How to optimize mediocre page speed results with Canvas element and Fontawesome.
Hi all!
As a fresh new designer turned front end guy I'm having a hard time optimizing my website with some big things that according to Pagespeed insights are problematic. Namely (what I think are the biggest issues) my canvas element and Fontawesome. I'm using Hugo to generate static pages with vanilla CSS and JS with some external connections.
Here is my speedtest result:
https://pagespeed.web.dev/analysis/https-www-theory7-net/7xvt6fkqjw?form_factor=mobile
Regarding the canvas element at the top of the page in the hero section:
This is a script that someone provided (link to codepen) that has an animation that isn't needed for page structure or anything like that. I've made sure that it loads after the DOM has loaded, however it looks like it is taking up significant time for Pagespeed. Is there any way to tell the browser more that it isn't an important resource to load so that it doesn't affect my pagespeed so much?
Regarding Fontawesome:
My Fontawesome files are so large it's taking about 6.5s to load on the mobile test. This is already the minified version they provide. Any way to optimize the speed for this more?
You can visit the website (hosted in the EU) here if it helps! https://www.theory7.net/
Greatly appreciate any advice on increasing the speed further, thanks so much!
Some images still need optimizing yes, but I thought I'd start here for now.
Theory7.net
Wij zijn de webhosting revolutie, voor jou. Verhuis je domein gratis, wij regelen de rest. ✓ gratis .nl verhuizing - ✓ gratis support - ✓ 1000+ extenties
14 Replies
Sorry if this is a question that is too broad to answer here. If there is anyone that can point me in the right direction that help would be appreciated 🥰
It really is just a question of going through the pagespeed results and resolving the issues one by one.
You can either go through them in order or start with the ones that affect the loading time the most.
For example "Defer offscreen images Potential savings of 580 KiB "
That is quite a lot but has an easy fix. Just add
loading="lazy"to any of the images below the fold, ie images that are not visible on page load before scrolling.
Another example is that you are loading a lot of external CSS (and JS) files? do you really need all of them?
Any that you really do need, add a preload headers so that the browser gets ready for them <link rel="preload" as="style" href="style.css">
More info
You mention your canvas animation. I would question whether delaying the load is actually a good idea as that is one of the first thing that the browser wants to show and is having to wait. You almost want to do the opposite. However I would also question if you really need it. It is hardly visible on your site and I don't think that not having it would make any difference.web.dev
Preload critical assets to improve loading speed | Articles | w...
As soon as you open any web page, the browser requests an HTML document from a server, parses the contents of the HTML file, and submits separate requests for any other external references. The critical request chain represents the order of resources that are prioritized and fetched by the browser.
if you have a canvas, only animate it if it is visible and the tab is active
you can use an intersection observer for that
Thanks for the advice guys I will go and implement these
about the canvas: I think that is my designer brain wanting it haha
It's certainly not needed
The pagespeed page gives pretty good advice. Just work through them one by one, following the recommendations. You should be able to improve the values and at the same time will learn some new tricks 😉
Yes I will do that, although sometimes I dont understand them, like the LCP element taking 16.7s
As this is just a <p> element
But I think maybe it's also judging that by other things that are loading in?
Admittedly that is a bit strange. It might be due to the canvas being loaded behind it more than the text itself. I would test the site without the canvas element to see if that makes a difference.
Will do!
Feels a bit weird to optimize such things as when I am browsing the site myself it feels really fast
but it's maybe an unfair comparison as you would want it to load fast on slow devices
can you show the graph where everything loads?
which graph do you mean?
the one in the network tab
You could remove the canvas on mobile completely, because it is hardly noticeable on my phone at least, not unless you take a long time to look at the hero section. But I don't think many people will look a long time at that part anyway, because you have read that very quickly.