Google PageInsights Optimization

My google page insights are low and I am not experienced enough to find the issues, can someone help?

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.eliselesolliec.fr%2F

Hello,

you are using often high-resolution images with 3000x5000px. This is makes your page slow.

Best,
Matthias

1 Like

I thought webflow automatically resizes the images

Is there any way to resize them all like download all and then upload all?

No auto tool (yet) on webflow (to resize/compress images). Fix only manually.

Webflow resize on small breakpoints (and only images not background images). You should resize images + compress (try tinyjpeg tool).

Read her under “images” section:
https://webflow.com/blog/how-to-boost-your-sites-performance

1 Like

A bit odd that while Webflow creates several images for responsiveness with another service. They suggest using Imgix directly on the post, and that’s a bit of an eye-opener.

As a paying CMS user, I would much more appreciate having Webflow add Imgix themselves inside their app. For the following reasons:

  • Implementing Imgix is not simple
  • Adding Imgix to a Webflow site takes time ( you have to add the Imgix URL to each post)
  • Paying for the CMS and Webflow hosting is supposed to offer a CDN and image responsiveness

@webdev has suggested using Imgix before and has implemented it

Overall, for page speed, which is a critical SEO factor, without having the best-case image service on Webflow and having to pay for another service seems a bit like buying a hotdog and not being given a bun.

'I’m a little late here but I thought I’d share in case it helps @anjul+panchal and future readers!

From my experience, improving your score on PageSpeed insights is about delivering a faster user experience. Here’s the framework I follow to ensure a website has a high score.

Reducing the overall size of your website

Reducing the size of your site can have a massive effect on the perfomance. The more kilobytes a user needs to download, the longer it takes to load the site. This has many benefits including:

  • less time for the site to load
  • smaller bounce rate (the % of times people leave your site shortly after visiting)

Optimizing Images

When building for the web, it’s always good practice to reduce the size of your images for faster page load and perfomance. You could easily do this by:

Minifying JavaScript and CSS files

As well as reducing images, minifying your site’s text files will also help increase perfomance. Minifying is the process of reducing the number of characters in a file. You can use an online minifier like https://www.minifier.org/ to do this.

Deferring off-screen images

As of August 2020, Webflow makes deferring images very simple. You can choose how individual images load by clicking on the settings of an image and adjusting the load property. Even better, by default images in Webflow are set to “lazy load. In previous days, you had to write custom code to lazy-load images.

Doing these things should bring your score up :slight_smile:

2 Likes

@Shuib - FYI: WebP images are not supported in the asset panel. Only externally hosted and with custom code.