I recently took an interest in optimizing a website's page speed scores after Google announced their new Core Vitals metrics and how it will be the leading ranking factor going forward. It is basically favoring websites that have the fastest and best mobile experience. And that is what I am going to show you how to do right now.
Generally a lot of it comes down to asset optimization like having images the same size as they are being displayed at. Like not having a 1000px wide image resized in css to be 300px wide on the screen. That’s a waste of space. Also losslessly compressing all your assets can save up to 80% of the file size. I use Compressor.io to lossly compress all my images. I pay for the pro subscription so I can upload 100 images to compress at a time. I've been using it for years. I highly reccomend them.
Also, background images. Why have a 2300px wide stock photo loading on a 400px wide phone screen? Resize that sucker to 500px wide and compress it. You go from 2.3MB to like 37k or less. HUGE reduction in size and load times. Then on tablet and desktop you just reset the background image to the larger 2300px image. I saw a website from someone who was loading multiple 4000px wide images as backgrounds and it was slow as all hell. It’s not enough to compress it. Because even if it compresses 70%, 70% of 4MB is still like 1.2MB which is huge for an image to load on mobile. Resize your images and load the smaller ones for mobile and the larger ones for tablet and desktop and compress them.
Then theres picking the right sized images for the right screen size, ad that's what the attribute "srcset" does. You can read about it here from Mozilla Developer Network. What it does is you provide a list of different sized images to load at the screen sizes you want them to load, and using "src" as your fallback image. This way, if you have an image that's 700px wide in your html on desktop, you can load a verison of it that's 350px wide on screens under 480px or whatever you want and load a smaller file which in turn improves your laod time.
After you've done all that, make sure you add the proper height and width attributes to your images as Google wants to see those on every one of them. It helps allocate space for the image before it loads and helps reduce content layout shifts.
Remove jQuery, Google Fonts, and all other nonessential CDN links
Then there's your Google Fonts CDN links. Instead of linking to them in your head, download your fonts from them if it’s not a standard font on browsers. I use the @font-face to load my fonts locally. I store all the downloaded files in a fonts folder snd then load them in on my core-styles.css sheet that is shared on all pages of the site. This way I can eliminate using the google fonts cdn which eliminates it as a render blocking resource.
Just copy and paste this code in your CSS sheet that is shared on ALL your pages. Replaces the file path with the file path of your font that you downloaded. The font-family property in here is what YOU name it. So it doesn't have to be "Lobster" like in the example code. It can be called whatever I want it to be and thats what I sue when I declare it in CSS somewhere.
By downlaoding and loading your fonts locally you can eliminate the need for using the Google CDN, and load your fonts even faster while also removing a render blocking resource. I highly recommend doing this for all your sites.
Want to build a website?
Top comments (0)