Over the last several years I’ve played around with preloading content, designing better enhanced frameworks, loading in less items, and trying to use advanced loading mechanisms.
However.. none of that will achieve this kind of score.
The reason seems the design of a page from inception can really bog down a site, along with dynamic loading and unoptimized media content.
I’ve attended many of google’s hangouts, web.dev blog to learn best practices, and reconstructed countless pages to be optimized, however none of it seemed to be bullet proof in terms of the fast loading and optimized for googles crawling and featuring.
Here are some of the tips I’ll recommend as some of what I’ve learned is combined with what others have likely taught you up till this point.
You can optimize 99% to 100% of everything and still have a slow website.
The painful truth is sometimes you can’t optimize something that can’t be optimized. The more resources and requests will take more time to load this is a fact. There are ways to try to get around this, but the more a mobile browser has to load will slow things down almost always. Mobile phones use ARM chips which save battery power, and load in processes in a single threaded nature of once at a time until the page is finished loading. At some point this will be solved by phone manufactures, but at this point battery saving is important.
This means that the total page size load matters, and every KB (kilobyte) counts and the more items to load in can take up dead loading time (also called blocked rendering). I believe during one of the hangouts I attended 10 resource (requests) is the perfect amount of things to load into a page. There are now tools to see how many of the resources KB’s are being used in your page and Google knows how much isn’t being used.
Why does it matter.. how much is being loaded in?
In the old days this didn’t matter, cause desktop machines render things quick especially on a fast network. In your template only put what you need.. this is a new way of sort of component build to a feature set to be small and compact instead of able to grow and scale later on.
Feeling bloated? …
Your website everywhere, even some of the best website out there have this method of loading in more than you need.
Good news, help is on the way.
Okay, please continue on reading if you feel like leaning about my adventure guide to Core Web Vitals.
You just need to rewrite your site framework to be more optimized per template, and eliminate as many resources as possible. (Nope your site is still slow)
… (sarcasm) …
Okay so what I experienced there is no silver bullet here.. according to Google or big G. You should learn css grid and possible flex box, and then .. eliminate all your media queries if possible as it slows down the rendering time. So Media queries add more lines and more render blocking.
that took a lot of time, but that didn’t change a lot. I thought I was learning a new skill here… Well yes that helped some css to render in less time preventing shifting, but there is more to try.
So please compress the styles and add them into the page, that will speed things up a bit, also refactor all the styles to be on each template per the DOM elements there.
but the page is still slow. You must have some blockers or unoptimized media. Convert all your media into webp (works with video and images). This will shave off most of the performance as I’ve seen.
Now the last 20% of the work.. is going to be harder.. to figure out based on your design, CMS system or the language you are writing in. I’m using WordPress so which is the most common system out there, and WordPress makes this really difficult as it really bloats a page to load more always. I had to reconfigure what I needed in WordPress to be more simple and stripped down. Hence my website doesn’t even look like a WordPress site anymore, but I do need to consider adding things to my site might be a bit different than a simple out of the box WordPress site, which is okay with me.
Preload your images above the fold, and lazy load images off screen. This adds a more optimized loading time experience to your page. You can also preconnect to things like a CDN network which might speed up some external requests, however in my experience this basically will slow things down. Try to host everything your self if you can.
Google current seems to score better for WebP media, even if your jpg or png loads quickly. This makes sense as Google has created the webp format to load quick in its render engine so you should invest time to learn it and use it.
Of course there is more to learn about and adapt, but I just simply felt like sharing some of the things I learned recently. If you want to learn the rest consider hiring me or reaching out as I’m available to help solve your sites problems. It’s very likely you have some of these issues, and would like a better mobile search presence so with that in mind consider reaching out.