I just became interested in optimizing a website’s page speed scores when Google released their new Core Vitals metrics and how they will be the primary ranking element in the future. It basically favors websites that provide the fastest and greatest mobile experience. That is exactly what I am going to show you right now.
You may watch me apply all of these procedures to optimize a real client’s website, and I’ll explain everything I do and why.
Asset Optimization
In general, a lot of it boils down to asset optimization, such as having graphics that are the same size as the display. For example, instead of resizing a 1000px wide image to 300px wide on the screen using CSS. That is a waste of space. Additionally, lossless compression of all your components can save up to 80% of the file size. I use Compressor.io to losslessly compress all of my photographs. I pay for the pro subscription so that I can compress 100 pictures at a time. I’ve been using it for several years. I absolutely recommend these.
Also, there are backdrop photos. Why is a 2300px large stock photo loading onto a 400px wide phone screen? Resize it to 500 pixels wide and compress it. You move from 2.3MB to perhaps 37k or less. HUGE decrease in size and load time. Then, on tablet and desktop, simply reset the background image to the larger 2300px image. I saw a website where someone was loading multiple 4000px wide photos as backdrops, and it was as slow as hell. It is not sufficient to compress it. Because even if it compresses 70%, 70% of 4MB is still approximately 1.2MB, which is too large for an image to load on a mobile device.Resize your photographs, loading smaller ones for mobile and larger ones for tablet and desktop, and compressing them.
The attribute “srcset” is used to select the appropriate image size for the screen size. You may read about it on the Mozilla Developer Network. What it does is offer a list of different sized images to load at the screen sizes you choose, with “src” serving as your fallback image. This way, if you have a 700px wide image in your HTML on desktop, you can load a 350px wide version on displays under 480px, or whatever you like, and load a smaller file, reducing load time.
After you’ve done all of that, make sure to add the right height and width properties to your photos, as Google expects to see them on all of them. It helps to reserve space for the image before it loads, reducing content layout shifts.
Lazy Loading
Then there’s lazy loading, which uses the loading=”lazy” tag that most browsers support. This leveraged the browser’s built-in slow loading feature without requiring any sophisticated JavaScript. However, do not lazily load any photos that appear “above the fold,” which is at the bottom of the screen when the website loads. If the image will load on the landing page and in the viewport, do not lazily load it. It will cause content layout changes. So, whatever graphics appear on the screen when your website initially appears should not be lazy loaded.
Remove jQuery, Google Fonts, and all other nonessential CDN links
There is a time and place for everything, and jQuery’s time is 5 years ago, and it is now on the bench. Class toggling and other functions may now be done in Javascript, so there’s no necessity to use JQuery. It’s bulky, and deleting it can improve your website’s security and speed. Remove it! Google’s page speed score will flag it as something to remove in order to enhance your score, therefore we should all get used to working without it unless absolutely required.
Then there’s the Google Fonts CDN connections. If your font is not a standard font in browsers, get it from them rather than linking to it in your head. I use @font-face to load fonts locally. I save all of the downloaded files in a fonts folder and then load them into my core-styles.css sheet, which is shared across all pages of the site. This manner, I can avoid accessing the Google Fonts CDN, which eliminates it as a render blocking resource.
Simply copy and paste this code into your CSS sheet, which is shared on all of your pages. Replaces the file path with the path to the font that you downloaded. The font-family attribute in here is anything you call it. So it does not have to be “Lobster” as shown in the sample code. It may be called whatever I want, and that is what I use when declaring it in CSS anywhere.
@font-face {
font-family: "Lobster";
src: url("/fonts/Lobster-Regular.ttf") format("woff2");
font-weight: normal;
font-style: normal;
}Downloading and loading your fonts locally eliminates the need to use the Google CDN, allowing your fonts to load faster while also removing a render-blocking resource. I highly recommend implementing this for all of your websites.
Defer your nonessential Javascript
Add the defer property to the opening script tag of all your script tags to “defer” their loading till AFTER the webpage has finished loading. This prevents Javascript from interfering with the website’s initial HTML and CSS loading and page painting. It calmly waits its turn till the others have finished.
Use SVG’s as often as you can over PNG’s
Use as many SVGs as possible instead of PNGs. SVGs are significantly smaller and load lot faster. I use Flaticon to get all of my svg graphics and icons, and I can change the colors and download the svg. Love it. This also substitutes Fontawesome, which is another CDN link that does not need to be loaded. Instead of utilizing Fontawesome, simply load the icons you require as svg files. It is considerably lighter than using Fontawesome.
If possible, employ an SVG graphic illustrator from Fiverr to convert your clients’ logos to svgs and upload them to the site instead. Significantly more optimized and scalable. You can substitute a 36k png or higher with a 2k svg. It’s worth every penny. You can discover several reasonably priced solutions for under $30 per graphic. A great investment.
It’s usually a good idea to convert your clients’ logos to svg format and give them the files to use on decals, business cards, and t-shirts. They’ll love you for it.
Google Lighthouse
When all is said and done check your Google Lighthouse scores in your dev tools inspector and satisfy those as well. Usually you just need to check off some accessibility stuff like adding aria-label attributes to links with no text in them or alt tags on images or contrast issues. Once you have a 96+ page speed score and nearly 100’s across the board on lighthouse, your website is now properly optimized and dressed to impress.
These are the optimization procedures I follow after finishing a website. I wanted to elaborate on this for anyone searching for a detailed “procedure” on what to do and how to accomplish it without all the jargon and overly confusing long descriptions. I hope this helped!
