-
Tulips are just the beginning!
I cant find anything about Litespeed on Google, is it PageSpeed thats messing with the code?
-
🙂
Litespeed is a server technology – i was expecting to see your site running a Litespeed cache but that does not seem to be the case.Can you check with the hosting provider if there is any caching on the server, and if so can those be purged ?
-
Thank you David for digging in, if any big work emerges I’ll get a developer in on it (we’re backing up site regularly).
There’s no server caching active, we do have Autoptimize and Cache-Enabler running: https://www.hostarmada.com/blog/autoptimize-and-cache-enabler-the-perfect-combo-for-wordpress-optimization/
However, this Healthscreen warning has been there for months, but I’m unsure if its false: https://postimg.cc/s1yN4dwS
-
This just in:
We do have CloudFlare active, please go ahead and have a look (logins provided).
If we need to change anything I’ll get my Admin to do so.
-
OK, so i done some digging and some testing, the
ls-is-cachedclass comes from the lazy loader scripts that autoptimize uses. I temporarily disabled ( and have now re-enabled ) autoptimize to figure that out, and then tracked the script down.So thats good as it means theres not another cache getting in the way of the images being output.
I made an adjustment to the the grid sizes snippet on the site.
For reference this is the change.function db_modify_srcset_sizes($sizes, $size) { if ( !is_single() ) { $sizes = '(max-width: 420px) 300px, (min-width: 421px) 768px, (min-width: 769px) 1024px, 100vw'; } return $sizes; } add_filter('wp_calculate_image_sizes', 'db_modify_srcset_sizes', 10 , 2);It makes the sizes options more definitive, so the browser SHOULD choose the smallest image size available for the given screen size.
I can see the changes to the sites HTML.
But i can’t see it in the Google test yet, and that is most likely to do with the time it takes for the CDN to propagate the changes and for googles caches to refresh.In the cloudflare dashbaord there should be a option to Purge its Caches. You can try that, or we may just have to wait until it auto refreshes.
-
Forever grateful David, I feel it would be a great achievement to get this model with oversized rich imagery and thumbnails load this fast, and on a shared server (before we move everything to dedicated systems).
I’ll check back in tomorrow if test scores have improved, or I’ll try purging CloudFlare caches.
-
Hi David,
At 8AM CET I didn’t see changes in test results, so I went ahead and fully purged CloudFlare caches, after which “Potential savings of 386 KiB” remained the same. Tried regenerating thumbnails as well.
I suspect the healthscreen ‘slow response time warning’ might hold clues? From the 4 sites on the server, only Curvspace gives the warning. My Admin is looking into it but recent checks didnt turn up any issues.
If you have the same test results, we could try deactivating plugins and test inbetween? (got a fresh full backup so we can go all out on this)
Any or all of these:
Autoptimize
Cache-Enabler
RankMath
Code Snippets
Defender
Easy Table of Contents
Regenerate Thumbnails
GP Plugins -
Ok, so i see the Google pagespeed test is now showing the correct sizes attribute in the Image HTML.
This narrows the issue down a to this:Google tests the site using a simulated Mobile device that has around a 412px wide viewport and a x2 DPR ( device pixel ratio ).
On that screen size the posts are displayed in 2 columns.
And each image is around 190px wide.
As its a 2x DPR, the browser will want to fetch 380px wide image ( 2 x 190 ).
And for that it will grab the nearest size that has enough pixels which happens to be the 768px image.
Hence Google says you could load a smaller image.So what you could do is this:
1. in Settings > Media , increase the Medium size image from 300px to 400px
2. run the Regenerate Thumbnails Plugin to update the images.
3. update the PHP Snippet i provided to this:function db_modify_srcset_sizes($sizes, $size) { if ( !is_single() ) { $sizes = '(max-width: 420px) 400px, (min-width: 421px) 768px, (min-width: 769px) 1024px, 100vw'; } return $sizes; } add_filter('wp_calculate_image_sizes', 'db_modify_srcset_sizes', 10 , 2);4. clear all caches, and purge the CDN.
Now when google tests the page and wants to load a smaller image it will choose the 400px one.
-
Thank you for that crash course, incredible the finetuning to get it all synched! And the second best thing besides a 5-lane Grid of Plenty is a 2-lane mobile column, I love it and cant wait to publish more posts to enable infinite scroll. Alright;
1. Increased to 400px and saved new setting; can/should I increase “Large size Max Width” from 1250px to 1350px (for full screen-width landscapes like https://curvspace.com/walkways/)?
2. Done; Should we regenerate (all new featured images) by hand regularly?
3. Could you please update the PHP Snippet, as I’ll likely ruin it
4. I’ll purge CloudFlare caches accordingly
While you’re in there please; the “Last Updated” date looks to have dropped off https://curvspace.com/stairway-safety-checklist-protect-your-loved-ones/
And the Table of Contents as well. I checked settings and it should insert automatically, but doesn’t anymore.
I can ask developer but terribly afraid this might ruin our big achievement here …
-
1. You can leave the Large as is, as the original image you upload will be the correct size ( i assume )
2. No, its only required if you modify any media setting values.
3. Dones
4. if you can purge the Cloudflare cachesHopefully that will keep the mighty google happy.
The Latest Date looks ok to me. Try clearing the browser caches.
The ToC i am not sure – if you want to raise a new topic for that we can take a look.
-
Alright caches purged, Ill let it settle and check back in tomorrow again.
I cant believe all the hoops you need to jump through, and I’m just trying to get fixed and durable configurations right.
-
Hi David,
Just ran a test and although its still “Potential savings of 386 KiB”, I believe it might have worked for an instance and went away again somehow.
I checked Media settings and Regenerating thumbnails, couldn’t find anything wrong.
-
Google still chooses to load the 768px wide image regardless of the screen size.
And that i can’t really explain, considering at the start of this topic i don’t believe this was an issue….Last ditched attempt, swap the PHP Snippet of this:
function db_modify_srcset_sizes($sizes, $size) { if ( !is_single() ) { $sizes = '(max-width: 420px) 200px, (min-width: 421px) 380px, 100vw'; } return $sizes; } add_filter('wp_calculate_image_sizes', 'db_modify_srcset_sizes', 10 , 2);And then purge the CDN and caches.
this instrucsts the browser to load the 400px image size on any size up to a small laptop. Comnsidering the number of columns on display that size would be adequate in the archives.
If google still wants to load the 768px image and complain its too large, then there really isn’t much else i can advise.
-
Much appreciated David, its been a haul.
Could you please apply that PHP Snippet, I’ll purge the CDN and caches (Admin standing by to make sure)
-
Done
-
Happy Easter David!
I’ve been busy because for an instance test dropped from 386KB to 119KB :), but then went back to 386KB :(.
Felt like a setting or override or something, because I didn’t change anything before it want to 386KB again.
Got a full site backup, and started switching on/off every plugin, purge and test inbetween, same results.
Until I switched off GP Theme and Blocks, which improved score to 97% and 142KB!
I can switch everything off again for you to see (maybe disconnect CloudFlare), it feels like we’re so close …
- You must be logged in to reply to this topic.