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)
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!
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.
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?
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
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.
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.
Webflow by default is not speed friendly. One of the thing is the default CSS file that loads up on homepage that causing render-blocking and reducing the speed.
The other thing is that you can’t disable some elements on mobile. For example, you can’t disable lottie animation on mobile. If you disable it by CSS property “none” the json file still loads on mobile significantly slowing down your page.
Since I am a developer, I found ways to fix it and I was successful. I was able to get over 95 speed on Desktop and close to 90 on mobile.
This website has tons of images, at least 15 scripts, and a lottie animation. But with all of that, I was able to get over 80 on mobile by tuning and applying the custom code.
If you anybody looking to optimize the website for Google page insights, contact me now.
