Photos should be saved as JPGs
Graphics/transparent images (like logos or icons) should be saved as PNGs or SVGs.
If you’re really cool, you could use a relatively new format like WEBP or AVIF, but that’s not necessary yet for this project.
Other listed large-ish images were the partner logos on the homepage. Because these are small transparent graphics, we were able to save them as much smaller file sizes without losing too much quality. All are now under 10 KB each and saved in PNG format.
For the main company logo, it was at 103 KB which isn’t too bad philippine number for whatsapp because we want this graphic in particular to be extra sharp. We still ran it through a resourceful website called tinypng.com and it reduced the file size by 70% without losing any quality. The new file size is 30 KB.
After fixing the images, there’s already a noticeable speed improvement.
Grade E → C. The overall grade is much better.
Largest Contentful Paint (LCP): Improved from 3.7 to 2.8 seconds.
Performance: 46% → 72%
Structure: 80% → 92%
Total Blocking Time: 370 milliseconds → 15 ms.
GTMetrix performance after reducing image sizes
Step #2 – Check the Fonts
You never think too much of fonts, right? Maybe you select one that looks good when you’re first designing your site and never think twice about them. Well, they can slow down your site big time if not optimized properly.
Here’s how to do that:
1) Load fonts from your website, not Google or some other outside source. This is especially important for making your site fast in China, which (sometimes) restricts fonts from Google. The website had no problem here. The font files were already loading from the website itself.
2) Cache font files. The site was loading 3 different font files: fa-regular-400.woff, fa-solid-900.woff, and material-icons.woff. In a step below, we turned on a caching plugin, which helped improve the speed these fonts load.
3) Use font-display: Swap. If it’s taking too long for a user to load the custom fonts, this tells their browser to first load a separate font that is already present on their computer.
Use font display swap