Solved

How can I optimize the speed of my website with large fonts?

Rishihuptech
Shopify Partner
469 80 86

Hello,

 

I'm reaching out for some guidance on optimizing the speed of my Shopify store.

 

Currently, we're encountering a significant issue with our website's Largest Contentful Paint (LCP), primarily due to the size of our fonts. These fonts have a file size of around 16 MB, which is causing considerable slowdowns for visitors.

 

I would greatly appreciate any insights or suggestions you might have regarding how to effectively reduce the file size of these fonts or any other strategies for improving our website's speed.

Thank you in advance for your help and expertise!

image_2024_04_15T10_05_45_039Z.png

image_2024_04_15T10_24_37_567Z.png

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
Accepted Solution (1)

oscprofessional
Shopify Partner
15895 2377 3082

This is an accepted solution.

Hello @Rishihuptech ,

The large font size (16MB) is definitely impacting your website's LCP. Here are two approaches to tackle this issue:

1. Reduce Font File Size:

  • Font Subsetting: This involves using only the specific characters your website needs from the font. This can significantly reduce file size without affecting the look of your website. There are online tools and plugins available for font subsetting.
  • Font Compression Techniques: Techniques like WOFF2 compression can significantly reduce font file size without compromising quality. Most modern browsers support WOFF2.
  • Consider Alternative Fonts: Explore using lighter weight versions of your current fonts or choose web fonts specifically designed for faster loading. Sites like Google Fonts offer free fonts optimized for web use.

2. Optimize Font Delivery:

  • Font Hosting Services: Consider using a Content Delivery Network (CDN) specifically designed for fonts. These services store your fonts on servers around the globe, ensuring faster delivery to visitors regardless of location.
  • Preload Crucial Fonts: Use preload directives in your website's code to prioritize the loading of critical fonts used for your LCP content.

Additional Strategies for Website Speed:

  • Image Optimization: Large image files can also contribute to slow loading times. Resize images to appropriate dimensions and use compression techniques to reduce file size without sacrificing quality.
  • Minify Code: Minifying HTML, CSS, and JavaScript code can remove unnecessary characters and whitespace, leading to faster loading times.
  • Browser Caching: Enable browser caching to allow visitors' browsers to store frequently accessed files locally, reducing the need to download them again on subsequent visits.
    If you're using a Shopify theme, some themes may have options within the theme editor to manage font size and delivery.
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

View solution in original post

Replies 3 (3)

oscprofessional
Shopify Partner
15895 2377 3082

This is an accepted solution.

Hello @Rishihuptech ,

The large font size (16MB) is definitely impacting your website's LCP. Here are two approaches to tackle this issue:

1. Reduce Font File Size:

  • Font Subsetting: This involves using only the specific characters your website needs from the font. This can significantly reduce file size without affecting the look of your website. There are online tools and plugins available for font subsetting.
  • Font Compression Techniques: Techniques like WOFF2 compression can significantly reduce font file size without compromising quality. Most modern browsers support WOFF2.
  • Consider Alternative Fonts: Explore using lighter weight versions of your current fonts or choose web fonts specifically designed for faster loading. Sites like Google Fonts offer free fonts optimized for web use.

2. Optimize Font Delivery:

  • Font Hosting Services: Consider using a Content Delivery Network (CDN) specifically designed for fonts. These services store your fonts on servers around the globe, ensuring faster delivery to visitors regardless of location.
  • Preload Crucial Fonts: Use preload directives in your website's code to prioritize the loading of critical fonts used for your LCP content.

Additional Strategies for Website Speed:

  • Image Optimization: Large image files can also contribute to slow loading times. Resize images to appropriate dimensions and use compression techniques to reduce file size without sacrificing quality.
  • Minify Code: Minifying HTML, CSS, and JavaScript code can remove unnecessary characters and whitespace, leading to faster loading times.
  • Browser Caching: Enable browser caching to allow visitors' browsers to store frequently accessed files locally, reducing the need to download them again on subsequent visits.
    If you're using a Shopify theme, some themes may have options within the theme editor to manage font size and delivery.
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
onescales
Shopify Partner
51 2 10

1. find a similar looking font that is smaller

2. when you embed the font, use only some of the "styles" (for example thin, extra bold) dont use all

3. preload the font

 

if you need other optimizations, we made a guide https://onescales.com/blogs/main/shopify-speed-optimization

OneScales.com Teaches Shopify and Solves Ecommerce Problems for Free. We Also Share Insight about E-commerce, Web, Tech, AI, Analytics, SEO, PPC, Marketing and More.

oreoorbitz
Shopify Partner
253 29 130

So yeah, like the mostly copy and pasted answer mentioned, font subsetting is probably your only hope if you want to keep that font, but reduce the file size.

That the font size is 15mb, means there is something seriously wrong with that font, like, whats up with those characters, how many characters are being used? Are they icons by any chance?

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes



You can also contact me directly if you prefer.