Hi Team,I am struggling to get the core Web vitals pass for mobile version.
The last option developer has advised is to change the popins font to system fonts. Is it the viable option? Can we have an alternative to go for the same without compromising on fonts?
Looking for your advise.
Changing the font to a system font can be a viable option for improving Core Web Vitals, especially on mobile devices. System fonts are typically optimized for performance and are readily available on the user’s device, reducing the need to download additional resources.
Here are some alternatives to consider without compromising on font aesthetics:
- Optimize font loading:
- Use font display: swap or font display: optional to load system fonts as a fallback, ensuring the content displays quickly while the chosen font loads.
- Preload fonts: Using
<link rel="preload" as="font" ...>allows the browser to prioritize font loading.
- Reduce font file size:
- Use font compression techniques like WOFF2 to significantly reduce file size.
- Select font weights and styles carefully. For instance, if you only need regular and bold weights, don’t include light, semibold, or other unnecessary weights.
- Use font subsetting:
- Subsetting your font files can dramatically reduce file size by only including the characters actually used on the page. This can be especially beneficial for sites with limited character sets.
- Explore font alternatives:
- Consider using fonts with similar styles to your current font but with better performance characteristics. You can use websites like Google Fonts to browse for font alternatives.
- Implement lazy loading:
- If the font is only used in specific sections of the page, consider lazy loading it, meaning the font is only loaded when the user scrolls to that specific section, further reducing initial load times.
Remember, it’s crucial to test all these strategies to determine the most effective combination for your specific website and its performance goals. Tools like Lighthouse can help identify areas for improvement and measure the impact of each change.