Lighthouse / PageSpeed - Unused JavaScript

Dears, when checking with Google (Lighthouse or PagesSpeed), I get proposal to reduce unused JS on most of the websites I bult with Sitejet. Is this typical for a website builder in general, or for Sitejet, or am I doing something inefficient myself? Any of you encountered the same problem?
kind regards
Mark

1 Like

I also get this warning on most sites with Lighthouse - I’m curious as to what others have to say

1 Like

Devtools coverage tab, I found following info about the unused JS and CSS in my homepage (see image). Maybe something to analyse as it seems to negatively impact google pagespeed results and I presently have no idea where it comes from.
@sitejet_team: is if something you follow-up as far as the Sitejet code and templates are concerned?
kind regards
Mark

1 Like

and here is the image

1 Like

@Andre @Franzi Dears, could anyone give some comment on this issue? I have been checking the SEO-results for a few websites I made in Sitejet and I am getting a bit nervous on the bad performance scores, but I don’t know what is the cause (Sitejet general structure or settings or my own doing…), so some comments could be useful.
thanks!
kind regards
Mark

2 Likes

Hey @Mark_Fosseprez - let me check with our developers on this topic. No need to get worried - of course :slight_smile:

Would you have an example website for us, Mark?

Thanks André,
You can take a look at
www.nocode-factory.be and www.chantaldujardin.be

kind regards
Mark

Hi! While there is always room for tweaks and performance improvements, this can be an extensive topic.
The scores that Google (Lighthouse or PagesSpeed) gives doesn’t really mean anything (if it’s something good or bad). Mostly they are some conventions/metrics to compile a set of recommendations.
That being said, not even Google is getting high scores (especially on mobile), see for yourself:

P.S. I’ve tried to include these links that do not redirect to a login page (basically they are public pages)
If you would access these Google websites you would see that they are pretty snappy.

From what I’ve tested your website: nocode-factory.be its snappy also, I get a load time around 2sec. which according to Semrush:

  • if your site loads in 5 seconds, it is faster than approximately 25% of the web
  • if your site loads in 2.9 seconds, it is faster than approximately 50% of the web
  • if your site loads in 1.7 seconds, it is faster than approximately 75% of the web
  • if your site loads in 0.8 seconds, it is faster than approximately 94% of the web

Now, back to the Unused JS part, you don’t need to do anything Sitejet has already optimized all the resources (the JS part is already merged and minified). That hint in Google (Lighthouse or PagesSpeed) will always appear. Maybe someone from the SJ Team can add additional info on this.

P.S. Here are some (general) hints to improve your Google (Lighthouse or PagesSpeed)
score

  • remove popups after page load (try to delay them a few seconds)
  • try not to have images that take the entire screen (drawing these images increases memory and time to draw)
  • try not to overlay too many transparent objects
  • try to remove huge objects with using CSS effects/filters (for instance big divs with shadows)

I hope all of this helps you.

3 Likes

Hi Lucian,

thanks a lot for your extensive reply, fantastic and I want to take the occasion to thank your for all contributions made on this forum, which have already helped me a lot on other issues!
I will take your recommendations into account of course. Are you using Semrush for SEO?

kind regards
Mark

2 Likes

Hi Mark, Happy to help you!

I’m not an SEO expert :sweat_smile:.
I don’t use Semrush for SEO, but they usually have good (and well documented) articles and tips.

P.S. I forgot to mention that I’ve seen that on your website are using multiple SVG images (using the Sitejet SVG element). This SVG element embeds the SVG content within the HTML, which, in the end, increases the HTML size (for icons, if you have a few on a page, it’s a good practice to embed them as SVGs, but illustrations are a bit heavier). I would recommend adding them as images(using the Image element - also be sure to check the Lazyload option, and you can keep the file format as SVG). This way, if they are below the fold, they will be loaded later (the lazy way).

P.S. 2- For my tip on “try not to have images that take the entire screen” - I’m referring to Image elements(image content), not background images (these are draw differently)

1 Like

:+1: Thanks again - I owe you a nice Belgian beer …

2 Likes

Hey there @Mark_Fosseprez ,

Lucian gave a pretty good explanation about the situation. I also had a look at your websites and aside from what Lucian added, I would say this looks fine so far.

I do manage a few “different” websites from a News page with a lot of new content every day up to a small page with mostly static content and ran them through the well-known tools too. They do score okay up to “good”, but most of the “advices” were just not fully realizable.

In case you do not have “heavy errors”, you should be fine :slight_smile:

Hi André,
thanks for the reply - is fine for me.

kind regards
Mark

1 Like

@Lucian_Dinu I didn’t know these detais for SVG/Image!

I use SVG icons (just .svg) all the time, with the SVG element.

So we should be inserting those as image elements instead?

Hi @zachary ,
It might not be so important, if you have just a few icons/illustrations on the page.
But, if you have more, because they are embedded they will contribute to the page (HTML) size (even if they are below the fold line).
In the end, I guess the best answer is to test your case, test with them as embedded (SVG Elements) and as images (Image Elements) and see what is the best score.

P.S. In general (for Google Lighthouse or PagesSpeed), I optimize everything that is above the fold for the mobile/desktop.

1 Like

As was already said in this thread, the suggestions given by the tools are just best practice suggestions and don’t necessarily have to have a high impact on the actual score.

The JS is bundled and minified so it’s downloaded in one piece. It’s not larger than a single regular image and is even downloaded after the content has already been rendered (<script> tags are embedded before the closing </body> tag). So even if we removed most of the JS it would probably only have a very tiny effect on the score.

What’s more important is:

  • avoid too much content (count of elements) on the homepage. Turn very long one-page websites into multi-page websites
  • make sure to keep the number of initially downloaded files as little as possible, so lazyload images (otherwise they will be downloaded immediately and delay the rendering) and use icon and SVG elements for illustrations (these will be embedded and don’t cause another download)
  • avoid or defer third-party scripts
  • avoid JS-driven content above the fold (this includes sliders)

Also see the following article: Website Performance / Google PageSpeed - Sitejet Help

@zachary Keep using the SVG element. Most of the time, you’d use every illustration only once on the website. Hence it makes sense to have them embedded into the HTML so they are available immediately. Since HTML is compressed (Gzip) anyway, the embedded SVGs only consume 10-20% of their actual size in bandwidth.

4 Likes

Wonderful, @Lucian_Dinu and @malte ! Thank you very much!