Help with page speeds

Hi Folks! Hope everyone is great! :smile:

I wondered if anyone could help me learn extensively the ins and outs of optimising your site for page speeds? Has anyone got any recommendations for courses or useful links? I firstly need to learn to read/interpret the results I get from google?

I have went through all the related topics on the forum. However, I need to learn the basics first.

Example:

Using entire font families?
My mobi and desktop take too long before user can interact? I know what this means but where to look to resolve the isssue?

Any help at all would be incredible.

1 Like

Hey @Gareth_Ellison

First of all, could you share the URL you analyzed with google so we can have a look at it?

Generally there are many things that can slow down a website.

Here are some examples:

  • Large images:
    The most obvious one would probably be large images. If they aren’t compressed and don’t have the correct pixel-size, they can make your website quite slow pretty easily.

  • Custom javascript:
    Another thing I see quite often is javascript that is placed in the wrong position so it slows down the rest of your website.
    To break it down: → Always write your javascript code right before the </body> tag. Only put the JS inside <head> tag or between some HTML if its neccesary for the code to work properly.
    Explanation: → The later the JS is loaded, the better. We always want to first show the content to the user (HTML and CSS) and second make it interactive (Javascript).
    By putting the javascript further down in the code we allow the HTML content to be rendered BEFORE the javascript is loaded.

  • Webflow’s javascript:
    Webflow websites at their default load some javascript that isn’t neccesary for the website to run properly. This slows down the website, but there’s not much we can do to prevent this from happening when using Webflow to host our websites.

  • Unneccesary HTML code:
    Generally, every element and every CSS setting you add to your website will generate code.
    For example: If you add an image to your page and set display: none instead of deleting it, the image will be loaded even if the user will never see the image.

  • Unneccesary CSS code:
    Another thing you can have an eye on:
    Every setting in your Style Panel that is marked blue will generate some code.
    So if you want to set some value back to its default, don’t overwrite it with the default value (For examle write auto as width of an element). This will generate some unneccesary code.
    Instead reset the value by clicking on the blue text and click “Reset”.

1 Like

Hi @Gareth_Ellison , you’re using the PWA testing part of lighthouse, and as far as I know Webflow does not support progressive web apps. However it does seem you will need to look at what @Schuschi_Eyes mentioned as it does say mobile speed is slow.

1 Like

Hi @Schuschi_Eyes

Thanks so much for such a detailed response. This helps tremendously. Below is the link:

www.onlinepresence.media

It’s more so being able to interpret the google suggestions to bring page speeds down. I don’t know what half of them mean? I wondered if there was a link or tutorial to interpret it all? Or course?

Unneccesary HTML code:
Generally, every element and every CSS setting you add to your website will generate code.
For example: If you add an image to your page and set display: none instead of deleting it, the image will be loaded even if the user will never see the image.

So am I right in saying even although you display the section designed and everything along with it, it will still run through the code? For example I have created a lot of different elements and sections to run better for mobile and desktop. So some parts of the site have 2 sections, one for mobi and tablet, one for desktop. It would run both sections on each platform? Maybe in which case this is bad practice as a designer?

Unneccesary HTML code:
Generally, every element and every CSS setting you add to your website will generate code.
For example: If you add an image to your page and set display: none instead of deleting it, the image will be loaded even if the user will never see the image.

Also any chance you could go into more detail on the above if you would be so kind? Is this the section you are referring to?

Thanks again for all your help. :smile:

Hi @dmatthams. Thanks also for your response. I’ve just started using this from a tutorial I went over rather than using googles page speeds main page(https://pagespeed.web.dev/). I wasn’t sure if there was a difference? Can you recommend any tools etc you use that is better suited to Webflow? It may just be inexperience when designing and creating too much extra code. As Schuschi_Eyes mentioned it might also be down to creating 2 sections for some areas of the site for mobile and then desktop. I’m not sure if this is maybe bad practice?

Thanks again for your reply. :smile:

Lighthouse is fine, just untick ‘Progressive web app’

Google’s pagespeed.web.dev uses lighthouse in the cloud so measurements are taken from Google’s infrastructure and data from actual user experiences is also factored in.

Yes. The browser will load the HTML and CSS of any element no matter if you set display: none on the element or not.
If you don’t need a completely different HTML structure for mobile, then try to use the same HTML elements and just change the CSS. Or at least try to have the least “parallel” HTML elements for desktop & mobile as possible.

I guess you were referring to the section I wrote about the CSS code…?
What I meant is this:
Let’s say you have an element and you decide you want a border-radius of 20px. Now if you decide to remove the border (because you didn’t like it for example) you have two ways of doing it.
The first way is to just type in 0px in the border-radius setting (see screenshot below).
As you can see, the word “Radius” is marked blue. This means that you generated some code with this setting (see the red circle in the code-export-window).

The second way is to reset the setting to its default. You can do this by clicking on the word “Radius” that is marked blue. Then click “Reset”.

Bildschirmfoto 2022-10-12 um 11.53.12

Now the code is actually removed. You can also see that the word “Radius” isn’t marked blue anymore.

But even if this is good practice I think my first two topics (Image size & custom JS) have a much bigger impact on your page speed.

1 Like

Hi @Schuschi_Eyes. Firstly can’t thank you enough for such a detailed explanation. These are things I would never have know. I like to find out about best practices when designing and do what you just described a lot. So knowing to reset is just another way to keep code to a min and site speeds up.:+1:t3:

I also never realised putting code into the head tag on either pages or the main site would slow the speeds even more.

So for example the below code, am I able to place this into the before body placement rather than head tag? I guess more extensive courses of coding are needed as I am not even sure of the difference in placement between head or before body tags?

Thanks again for all your help with this.:grinning:

Hi @webdev . Thanks for taking the time to reply. Still not sure if there is a difference in heading to inspect then lighthouse as opposed to heading to google’s page speed (pagespeed.web.dev). Same thing? Confused about this. I’m just about to do a few short courses on pagespeeds and SEO. Hoping this will help. :smile:

@Gareth_Ellison - I suggest you review How To Think About Speed Tools to understand the difference between lab and field data. It is an important distinction. Worthy of a read by anyone looking to interpret test results.

Hi @webdev. Thanks for your message and apologies for the delay in replying. I’m working full time job as well as trying to design. I’ll read through the link you kindly sent me. Hopefully that’s a good start to understanding good practice for how websites perform. :slight_smile:

@webdev What I’ve learned so far… 1. I’m god awful at building websites for performance! 2. I’ve got a months worth of vids and articles to get through to vastly improve.

This is what I was looking for though. That page link you sent is awesome and so amazingly helpful for anyone looking to build websites that perform well. Thanks a million! :pray:t3:

Coffee in hand and long few nights ahead!:exploding_head: