PageSpeed Results

Hey @jennygw,

Thanks for sharing those PageSpeed results! I see the desktop performance is solid, but mobile needs a little tweaks. No worries, though—since you’re already using WP-Optimize, we can fine-tune a few things to boost that mobile speed!

One of the first things I noticed is the large image slowing things down. You can use WP-Optimize’s WebP image conversion option under the “Images” tab. This will help compress the image without losing quality, making it load faster. Also, try using the Preload Largest Contentful Paint image option, which will tell the browser to load that key image earlier.

Since JavaScript is blocking the page from loading quickly, head over to the Minify tab in WP-Optimize. Here, you can enable JavaScript and CSS minification and merging, which reduces the file size and the number of requests your site makes. You can also enable asynchronous loading of scripts, which ensures that essential content shows up before the non-essential JavaScript files.

Also, don’t forget to check the Caching tab to make sure page caching is enabled and set up properly. WP-Optimize offers advanced caching features that will keep your pages loading fast, especially for mobile. You can enable it and even fine-tune it by excluding specific URLs from being cached, if needed.

Lastly, if you haven’t already enabled lazy loading under the “Images” tab, I recommend turning that on. This will make sure images only load when they’re about to appear on the screen, which can be a big help for mobile users with slower connections.

Let me know how it goes or if you need any help adjusting these options.

Thanks!

LCP is from a Foogallery, lazy loading is applied within the gallery settings.  Images are in next gen format and sized as needed.

This is the largest contentful element painted within the viewport.?Learn more about the Largest Contentful Paint elementLCP

Element
Actor Headshot Photographer
<img decoding="async" alt="Actor Headshot Photographer" width="500" height="700" class="skip-lazy no-lazy fg-image" data-src-fg="https://jgw-photography.co.uk/wp-content/uploads/cache/2024/09/Cam2_2016_0…" src="https://jgw-photography.co.uk/wp-content/uploads/cache/2024/09/Cam2_2016_0…" loading="eager">

Phase
% of LCP
Timing
TTFB
6%
600?ms
Load Delay
76%
8,010?ms
Load Time
4%
390?ms
Render Delay
15%
1,590?ms

>>Also, try using the *Preload Largest Contentful Paint image*
How do I apply that to a gallery?

>>Since JavaScript is blocking the page from loading quickly, head over to the *Minify* tab in WP-Optimize. Here, you can enable *JavaScript and CSS minification* and *merging*, which reduces the file size and the number of requests your site makes.
Already done.

>>You can also enable *asynchronous loading* of scripts, which ensures that essential content shows up before the non-essential JavaScript files.
Already done.

>>Also, don’t forget to check the *Caching* tab to make sure page caching is enabled and set up properly. WP-Optimize offers advanced caching features that will keep your pages loading fast, especially for mobile. You can enable it and even fine-tune it by *excluding specific URLs* from being cached, if needed.
I use Preloading and I also schedule the Preload to refresh on the cache time.

>>Lastly, if you haven’t already enabled *lazy loading* under the “Images” tab, I recommend turning that on. This will make sure images only load when they’re about to appear on the screen, which can be a big help for mobile users with slower connections.
My images are being optimized by ShortPixel as this works with FooGallery. Can you make WPO work with FooGallery?

1. You would have to preload all the images in the gallery (this looks to be three on your site) by adding in their URL’s individually. Under Minify >> Settings >> Preload key requests / assets
2. As your site support http2, do not enabling the merging of JS and CSS, use the Minfication only as the merging will be slowing down your site
3. The images on your home page, their image class says that the lazy load is skipped (this is the correct thing to do for images above the fold, that is ones that appear on initial screenload) so it looks like Foo Gallery is lazy loading: https://snipboard.io/pWGKFA.jpg. The other images on your home page are also lazy loaded. The images on the rest for your pages are not lazy loaded.

1. There are 22 images and I wish I could add more. Opens the question, what can I do for larger galleries?
2. Just read a little on http2, I’m more rusty than I realised. Where could you see it supports http2, please?

Are these settings correct?
Enable Minify – on
HTML – off
JAVA – off
CSS – 0ff

I understand the lazy loading now.

Thanks Mansour and Vupdraft!

1. Since you already have 22 images and want to add more, I’d recommend using pagination or a load more button to avoid loading too many images at once. This helps maintain performance, especially on mobile, while still displaying all your images.
2. To verify if your site supports HTTP/2, you can ask your hosting provider or use an online tool like KeyCDN’s HTTP/2 Test to check.