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.
Asset Optimization
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.
Lazy Loading
Then there’s lazy loading, using the loading=“lazy” attribute that is supported by most browsers. This used the browsers built in lazy loading without you having to do a lot of fancy JavaScript. But don’t lazy load any images that are “above the fold” meaning the bottom of the screen when the website loads. If the image will load on the landing page section and in the viewport, don’t lazy load it. It will create content layout shifts. So whatever images are on the screen when your website first loads should not be lazy loaded.
Remove jQuery, Google Fonts, and all other nonessential CDN links
There's a time and place for everything, and jQuery's time is 5 years ago and it's place in on the bench. Class toggling and all that can be handled within javascript now and there’s really no reason to be using JQuery anymore. It’s bloated and removing it can make your website more secure and load much faster. Remove it! Google's page speed score will label it as something you need to remove to improve your score, so we should all just get used to working without it unless its absolutely necessary.
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.
Defer your nonessential Javascript
On all your script tags, add the defer attribute to the opening script tag and this will "defer" its loading until AFTER the website has loaded. This way, the Javascript doesn't interrupt the website from loading it's HTML and CSS first and painting the page. It waits its turn patiently until everyone else is finished.
Want to build a website?
Visit aparadesign.com
Top comments (0)