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

[Huptech-Web]

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!

[oscprofessional · Accepted solution]

Hello @Huptech-Web ,

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.

[onescales]

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

[oreoorbitz]

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?

[shopfy-2020]

It's one of a million other issues and problems with Shopify that never gets fixed.

To get the features you need to run the shop properly, you have to rely on third-party apps. Some who are very large files and should be hosted OUTSIDE your shop so it doesn't eat into your space and memory, but they're not and eat up the loading speed of the store...

If the issue is only your own files being too large, you simply have to minimize them. But, some of these issue are beyond shop owners control.