Different browsers prefer different fonts, so we need to list all the fonts and then give resource hints using the format attribute .
If you are using a CDN, consider self-hosting your fonts so you can control how fast they load and are not affected by potentially slower third-party hosted fonts. Test this a lot, use Lighthouse reports or the Chrome Dev Tools Network tab to see how it affects loading.
If you're on CloudFlare, consider using CloudFlare Workers to automatically self-host Google Fonts on the fly.
If you use WordPress, check out this plugin . It will self-host Google fonts, preload, format, and implement the font-display property for you. Easy!
8. Image Optimization Tips
Web version
Images are one of the biggest contributors to page size. Reducing the overall page size is a great way to optimize the critical rendering path.
Unfortunately, high-resolution images and large banners always ecuador mobile database slow down your page, especially on a mobile device where you might be on a slower 3G or 4G connection.
Enter WebP images, developed by Google WebP, which reduces image file size by around 25 – 35% on supporting browsers, though I’ve personally seen more. If you have an image-heavy e-commerce site, it makes sense to implement it as it will reduce server bandwidth usage while also making your site load faster.
Google provides a list of WebP conversion libraries here that you can implement on your site to convert images to WebP, or you can use the Node.js library discussed here .
For browsers that don’t support it yet, if you just start using WebP images site-wide, anyone with an unsupported browser will get a blank image… not ideal!