Streaming live at 10am (PST)

How to optimise for Google Pagespeed Insights

First of all, I’m no pro at this, I just figured some stuff out myself and thought I’d share it with the community.

Getting a high ‘speed’ score in google pagespeed insights is relevant for SEO purposes (you’ll have a higher chance of ranking higher in google because google favors fast websites)

The following helped me to get a higher score in Google pagespeed Insights:

  • Make sure all images on your site are as small as possible (while still remaining of good quality if you don’t want your site to look like crap. I use https://compressor.io/ to quickly compress my images for web use.

  • Clean up unused interactions (when I found this out my score went from 55 to 75 on desktop)

  • Set no default URL. Doing so will redirect the visitor too many times, google doesn’t like that apparently.

  • Minimize the amount of javascript on the page

  • Clean up unused CSS styles.

Doing all of the above almost always helps me to get a desktop score of around 90.

Like I said, I’m no expert so if anyone has anything to add please do so!

2 Likes

Good notes for folks who may be having issues with their site speed score, thanks for sharing.

I typically find that most issues with site speed revolve around large file sizes (images, videos, scripts, etc) being loaded immediately, so waiting to load these things until they’re in view or after a user interaction can do wonders.

Clean up unused interactions (when I found this out my score went from 55 to 75 on desktop)

As a note, there’s also a “Clean Up” function for CSS (shown in the same place but within the styles tab) that’s worth mentioning as well. I’ll save this step until right before launch as sometimes you’re working on styles or interactions that aren’t actively attached to anything and they’ll be removed with this action.

Set no default URL. Doing so will redirect the visitor too many times, google doesn’t like that apparently.

I’ve never had an issue with setting a default URL, however I’ve seen issues around this from other community members. I’d imagine there are other issues behind the scenes that contribute to the “too many redirects” issue people face, but this may be a good short term solution.

How would I go about doing this?

Ah good to know! I was hesitant to put it in there because I wasn’t sure if it would actually have any effect on site speed. I’ll put it in there.

Google’s pagespeed insights gave me a notice for this, once I didn’t select a default URL the score instantly went up.

Where did you find this ctrl shift i?
I ran this and it scanned my pages but didn’t say anything.
Does it just report and recommend or does it change things?

I’m pretty sure doing ctrl shift i will automatically make images responsive by making images that don’t need to be big (when they are scaled down in webflow for example) smaller in size.

Do you have a link to where this function is documented, I was unable to find one.
I dont like things being done without knowing what. So if it found an image I would like it to report before and after so I could undo and then do it myself.
Would you normally recommend everyone to do this or just if its a reported insight issue?

This is the page for it:
https://webflow.com/feature/responsive-images#:~:text=Webflow%20now%20automatically%20scales%2C%20compresses,up%20to%2010%20times%20faster.

And the blog post:

I’m not sure why they haven’t just made a button for this instead of a hidden key combination.

1 Like

Ok I did find that but didn’t see the ctrl shift i until just as it was just a mentioning of it.
So for others reading there is NO need or benefit to ctrl shift i unless you created a project prior to that release 2016!

So in essence it currently does nothing as it now does all this automatically behind the scenes.
Thanks for clearing that up :wink:

Ah wow I completely read over that, good to know. The site I was working on was created in 2015 so I think that’s why it did work for me :smile:

my desktop is 97 and mobile 94 by the way.

As you are posting some tips, I would also recommend prior to running pageinsight via url.
open your webpage and go to developer and run page insight from there.
You get way more information on what is causing issues.

If you don’t see the option microsoft edge has this feature.

I would also recommend using other checkers as each one I use gives different insights into issues, they also priorities different areas for benchmarks.

Well its a good job you did find it for that 2015 website! Still good info to know and I learned something as well.

1 Like

Alright so I’m pretty sure I couldn’t get the scores any higher because I was really cluttered with my html / css classes where I wouldn’t re-use them.