preload webp image

403 views
Skip to first unread message

Ungov

unread,
Mar 15, 2022, 5:51:53 PM3/15/22
to mod-pagespeed-discuss
I have an issue with LCP over 8.3s due to a large image

lcp1.jpg

I added the image to preload in the head
lcp2.png

But the problem is that since the URL of the image is being rewritten by pagespeed, it is preloading the original JPG image and not the WEBP image used on the website

lcp3.png
How can I preload the rewritten WEBP image instead?

Longinos

unread,
Mar 16, 2022, 5:07:58 AM3/16/22
to mod-pagespeed-discuss
Hi
There is a filter hint_preload_subresources but thi work only for css and js files.
Pagespeed don´t rewrite assets in a subrequest, like files loaded by javascript, the only way to get some optimization for these assets is IPRO, and this don´t rewrite url, so no jpg to webp conversion is done.
You can use ImagePreserveURLs on but, again, the image can´t convert to web because this preserves the original url.

I have taken a look at the site and you have others issue, I think.
Maybe you have enabled js_defer filter and have rocket_loader in place?
The original jpg image is 75Kb and the webp 25kb so I think are not so big images, maybe the delay is the javascript for the zoom as far as the image is loaded again by jquery.zoom.js

Ungov

unread,
Mar 16, 2022, 5:06:24 PM3/16/22
to mod-pagespeed-discuss
Oh ok, so if it is impossible to preload the webp image, should I exclude this image with 'data-pagespeed-no-transform' and preload the original JPG? Will it load faster that way or should I just let modpagespeed convert it to webp without preloading?

Yes, I use both js_defer and rocket_loader, should I disable one of them? Which one is the fastest?

Thanks!

Longinos

unread,
Mar 17, 2022, 6:50:01 AM3/17/22
to mod-pagespeed-discuss
Hi
You can do the data-pagespeed-no-transform way, but the image don´t load faster as far as the same image get loaded again by a jquery-zoom script, and this one is the image Ligthouse takes the time to load. For test purposes, can you disable the zoom and test it?

About js_defer and rocket_loader, both do the same thing: delay the js load and execution. try both and test what is more faster, but not 2 at the same time.

Ungov

unread,
Mar 17, 2022, 6:41:06 PM3/17/22
to mod-pagespeed-discuss
Where do you see the image is loaded twice? I checked in the Network tab of the developer console but I see the full JPG image is loading only once, the other one is the thumb version. I was thinking the jquery zoom script would load the image only on hovering.

I have disabled RocketLoader for now

Longinos

unread,
Mar 18, 2022, 4:44:23 AM3/18/22
to mod-pagespeed-discuss
No, jquery zoom SHOW the image on hovering, but it download the image
Captura de pantalla 2022-03-18 092053.jpg
Message has been deleted

Longinos

unread,
Apr 6, 2022, 5:56:35 AM4/6/22
to mod-pagespeed-discuss
Hi
Well... this a coplex page, too many elements.
1.- try to NO lazyload ALL images. The images in the 1st viewport don´t need to be lazyloaded, only those that are out of the viewport. You are lazyloading the spinner (loadin_image.gif)
2.- Don´t preload resources not needed in the 1st seconds. (In dev tools panel, console, I can view a bunch of woff2 files preloaded that are not used in the 1st seconds of page render.
3.- The page has a javascript error, there is an inlined snippet: $('#section-reviews').click(function(evt){$(".hide-mobile-reviews").show();}); This uses jwuery, but the jquery file himself is loaded at the bottom of the page, so when this snippet runs (inmediately when it load) jquery is not here. Preload jquery and put it in the headed section of the page.
4.- Try, as a experiment, not to use these image sliders, maybe only the "More with the same design".
5.- Take account that the mobile test is done in a poor simulation, 3G and a Moto G4, not the same as the real world. For example, here in Spain, the mobile companies are dismounting the 3G networks, so these test don´t make too much sense for us.
6.- Take care of the TTFB, this a server side config and maybe related to the number of images that pagespeed need to rewrite but with the ISP speed too...

El martes, 5 de abril de 2022 a las 23:24:58 UTC+2, Ungov escribió:
Hello,

I disabled the zoom but we still have an issue with LCP around 8 seconds (!!!)

Due to this, Google Search Console is flagging thousands of pages as "poor" in the "Core Web Vitals" because of "LCP issue: longer than 4s (mobile)"

lcp1111.png

The suggestion to improve LCP is still to preload the webp images

What can I do to improve our LCP score?

Ungov

unread,
Apr 7, 2022, 6:46:04 AM4/7/22
to mod-pagespeed-discuss
Hi

1- disabled spinner & preload woff2
3- we're still working on this. trying to find a way to avoid preloading jquery because it used to slow the site down when we did it, and reviews are not an important feature
4- added a parameter to disable the sliders. But we already optimized it. The entire "suggestions" section is generated only once, then the HTML cache is saved to DB, so getting the cache of the sliders is very fast with just 1 sql query. https://www.no-gods-no-masters.com/tshirt-sabotage-black-cat-D01004174288P0210/?noZoomTest=1&disableSuggestions=11
5- yeah I'm not trying to get the perfect score, I just want to get rid of the warnings in the search console because our impressions have been dropping a lot since last year

6- we've been trying for months to lower TTFB but having real trouble figuring out what exactly is causing it. Running MySQL slow query log to optimize queries. DB is optimized with indexes.
Tested a blank page and TTFB is lower, so it's not a server-side issue. Running MySQL slow query log to optimize queries. https://speedvitals.com/report/www.no-gods-no-masters.com/Ju4Lys/ 
Hosting is a dedicated server w 1gbps. CPU avg 25% load https://prnt.sc/CS5_nAQuhElP 
Other pages are having similar TTFB issues, so it's not specifically related to the "product display" page or the sliders

After the changes and with suggestions disabled, 750ms TTFB and 6.3s LCP
Speedvitals is still suggesting to preload the big t-shirt image

thanks

Longinos

unread,
Apr 7, 2022, 8:32:52 AM4/7/22
to mod-pagespeed-discuss
Hi
Well...
About server config for better TTFB, not only a web config optiization, this includes DB, files....
Making html cache to a DB still ned a DB request so... is there any way to get a file cache for the whole page?  I know some parts can´t be cached like the basket or payments...
Bur nginx is fast serving files.
I don´t know how the site is created, whats CMS if one is used, but some type of page cache can be helpfull.
For some linries like jquery or lazyload, have you tried to "outsourcing" it?
Jquery or lazysizes, maybe other js libraries like bootstrap can be downloaded from Cloudflare, take a look at cdnjs.com.

All the webvitals sugestion are preload the big assets but I think is not the best way to do.
The DOM (https://www.no-gods-no-masters.com/tshirt-sabotage-black-cat-D01004174288P0210/?noZoomTest=1&disableSuggestions=11 has more than 1200 nodes, any over 800 is considered too big) and the CSS-DOM + javascript (all changes the css and javascript do to the initial DOM) makes the page slow (in the broser side).

And take a look at the DB stats. 1 sql may be fast, but is the DB sized to support all the load?  Maybe is this the bootleneck.
with a page cahe these DB acces are avoided.

But take a look at the times assets download, images are not the big ones:
Main page takes 1,25s for 256Kb (uncompressed)
Request to the basket takes near of 500ms for 700b
anifest_ngnm4_en.json takes more than 400ms for 900b
/ajax_get_stock_state.php takes 400ms for 800b

Why all these small assets takes to much time?
Most of these are loaded by jquery, so until jquery is loaded they can´t start downloading and maybe take time because these do DB request to contruct the response.
Make a test, preload the jquery NOT in the html code but in headers and put the load of jquery at the very start of the head section.
so jquery is ready when the page is usable and put these asset at the very start of the body (if feasible)

Ungov

unread,
Apr 7, 2022, 7:06:11 PM4/7/22
to mod-pagespeed-discuss
Hi, thanks for the explanations

1- We already have page cache on the majority of the website. The only parts that are not cached are the header and sidebar, which should be fast to load. The rest of the website has too much dynamic content generated by PHP to use static cache everywhere
I just benchmarked the SQL query to get cache from DB, it took an average of 0.0005 seconds (0.5ms) to execute in phpMyAdmin

2- Node count is very hard to reduce because there's a lot of content on the page. No CMS, all custom made

3- Moved jquery to head and added this: header('Link: https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js; rel=preload; as=script');

We changed the domain for testing to the german version (lower traffic in case something go wrong). We do have a dev/staging website but it's not public and different server/DB, but it is better to do the testing with the normal server load, and pagespeed caching wouldn't work correctly in a dev environment with no traffic

unfortunately, still having similar result with TTFB and LCP after the changes. Anything else we can try?

Ungov

unread,
Apr 7, 2022, 9:57:58 PM4/7/22
to mod-pagespeed-discuss
We added a live benchmark to calculate page load speed using microtime. We tracked every single query and each part of the website


Currently, it takes only 0.01s to load the entire page from the first to the last line of code including all queries. But if you reload the page many times sometimes it takes longer

Entire page: 0.0103
-
main config: 0.0018
domain config: 0.0001
DB config: 0.0007
main functions: 0.0002
SQL Query Spreadtags: 0.0001
SQL Query Sellable: 0.0011
SQL Query Hits: 0.0000
SQL Query Tags: 0.0001
header backend: 0.0011
tshirt.php backend: 0.0019
html_page frontend: 0.0052
main module frontend (tshirt display or products listing): 0.0013
tshirt form: 0.0004
footer: 0.0012

It is a complete mystery as to how a page generated in 0.0103 seconds can have a TTFB of 600+ ms

We can also change the parameters in the URL to test without disabling the sliders: https://www.keinegotterkeinemeister.de/tshirt-sabotage-black-cat-D01004174288P0210/?benchmark=165465786567 (takes 0.1197 with sliders)

Ungov

unread,
Apr 7, 2022, 10:31:43 PM4/7/22
to mod-pagespeed-discuss
slow TTFB is caused by ModPagespeed. 
When disabling ModPagespeed,  I get a TTFB of around 100ms
But LCP is still around 7s
^ these tests were ran with ModPagespeed OFF, always get around 100ms TTFB

Longinos

unread,
Apr 8, 2022, 3:35:52 AM4/8/22
to mod-pagespeed-discuss
Hi
Regarding the german page:
1.- Jquery is not preloaded in headers, only the image
2.- The image url is in the top of the page, before the DOCUMENT type, this throw errors. You can see it viewing the html code.
3.- More libraries can be "outsurced" to cndjs.com:

4.- Facebook pixel and Google Analitics can be "outsourced" by Clodflare Zaraz.

Longinos

unread,
Apr 8, 2022, 4:00:32 AM4/8/22
to mod-pagespeed-discuss
Regarding TTFB
Maybe there are too many assets before the image start to load.
In a webpagetest it start to load at 450ms the 1st byte 158ms and time to load 22ms = 630ms time to the image is in the browser.
but it don´t appear in the page until 2.191ms so the page is doing "things" before the image show.
For example the basket_hover.php is making a xhr request, is this async?
xhttp.open("GET", "ajax_info.txt", true);
The "true" make the request async, the page don´t wait to the response to render.
same for ajax_shop.
Not the same for ajax_basketid.js because $.get() us async by default.

Ungov

unread,
Apr 8, 2022, 7:55:37 PM4/8/22
to mod-pagespeed-discuss
Preload seems to be fixed now, I think it was being overwritten by the second header preload for the image. I see jquery preload in the headers now: https://prnt.sc/wYQaa48mNDoQ 
Does header preload work only for clients that support HTTP2? What happens if a client is using HTTP1, or a browser that doesn't support preload? 
Should I still use a <link rel="preload"> as fallback for HTTP1?

- replaced all local JS with cdnjs
- fixed image before document type
- added async: true to basket_hover
- Moved Google Analytics & FB Pixel to Cloudflare Zaraz

LCP went down a little bit, now under 6s instead of 7s

Any idea why ModPagespeed is causing high TTFB? It's disabled right now and it brought down TTFB to normal levels. Can we lower TTFB by adjusting the pagespeed config?

thanks

Ungov

unread,
Apr 8, 2022, 8:26:14 PM4/8/22
to mod-pagespeed-discuss
6.0 LCP with the image

2.7 LCP without the image

But the image itself is very fast to load (around 35ms with Cloudflare cache hit)
https://www.keinegotterkeinemeister.de/img/tshirt-sabotage-black-cat-D01004174288P0210.jpg

Longinos

unread,
Apr 9, 2022, 9:19:43 AM4/9/22
to mod-pagespeed-discuss
Hi
There are 2 things: Preload and HTTP2 Push.
Preload: is a priority mark, the resource is loaded before othres
Push: The resource is delivered by the server at the same time that the html code.
If browser don´t are preload or push capable, the download is done in a standar way.
header or marckup is like the same thing.
So, no, if you use header, don´t need to put it as an html marckup.

With the image, the LCP is the image himself, w/o the image the LCP is a text pieze, so this makes the diff.
Why the image take to much time in appear even if it takes low time to donwload?
Well... the browser need to donwload the html, all css and js files, then construct the DOM, apply the css to the DOM (and repaint the screen) and the apply the changes js code does to the DOM (and again repaint the screen) before the image is showed.
More on this: The images don´t have explicit sizes (width and heigth) so when the images are rendered, the whole DOM es repainted.
This takes time, much time. As explained before, the image is downloaded in the browser about 600ms from the 1st request, but don´t appear in screen until 2100ms aprox.
The js code have a bunch of statements like getElementsByClassName this must traverse the whole DOM to find these elements, and the DOM is very big.

And last. With pagespeed some TTFB increase is spected, but the amount of this increase depends on several factors.
Size of the SHm cache, speed of the filesystem where the filecahe is running, the value of ModPagespeedRewriteDeadlinePerFlushMs (by default 10, but you have increased this to 20 to get time to optimize more resources in less request)....

complete load takes 2.180ms but the html code takes 701ms, 32% of total time is from donwload the html code and render don´t start until 450-500-ms, so why the page start to download after 400ms? (w/o pagespeed enabled)

Ungov

unread,
Apr 9, 2022, 3:23:57 PM4/9/22
to mod-pagespeed-discuss
Ok, I understand why the image is loading slowly. Anything I can do to speed it up? I can't specify an explicit width and height because the image won't be responsive on mobile devices

Is there anything faster than getElementsByClassName? It seems like the native function is the fastest according to what I've found on google

I don't use SHM cache yet, and I lowered ModPagespeedRewriteDeadlinePerFlushMs back to 10ms

I re-enabled PageSpeed on the german domain to do some testing since we can disable PageSpeed with URL parameter ?PageSpeed=off
TTFB is 50% faster with PageSpeed disabled and LCP is also a little bit lower

Longinos

unread,
Apr 10, 2022, 5:40:10 AM4/10/22
to mod-pagespeed-discuss
Hi
You MUST set the width and height of each image. Don´t set it implies CPU consuption, layout repaints and... time.
You need some like this in the html
<img src="iamhe-url" width=XXX heigth=YYY atl="some string" >
and some like this in the css
img { width: 100%; height: auto;}
This makes images responsive and less layout calculations.
> Is there anything faster than getElementsByClassName?
Well... is not about if the function is faster or slower.... why do you need to get all element with a determined class?
You need this to add some thing like an atrribute or add a new class or somo like this?
Then why don´t add the attribute or class from the start?

But you need to rethink what changes are done by javascript and what of these changes can be avoided from the start changing the html code or adding custum css.
As a example of recap things: Why do you need to check if images are loaded? or wording it in other way: Why do you use imagesloaded.js?

SHMcache: You need it. In other thread you have verified than when the size of SHMcache was increased, optimized pagespeed resources become more "persistent" between request.

Longinos

unread,
Apr 10, 2022, 6:15:54 AM4/10/22
to mod-pagespeed-discuss
Hi again, more on this.
About images width and heigth.
I see that the main image have explicit width and heigth and don´t have responsive issue, so why not the others?

About icons: Maybe you can explore the way to change fontello fonts to embed svg for the icons

Ungov

unread,
Apr 10, 2022, 4:45:36 PM4/10/22
to mod-pagespeed-discuss
Hi,

We added width and height to all images on the page

For getElementsByClassName I'm not sure how we can use something else to get an element's value? Also it seems that this code is fired only with events such as onClick or onChange

We use imagesloaded because it is required for masonry (customer photos in the footer)

SHMCache - sorry, I forgot it had another name in pagespeed config. It is still enabled since the last topic.
ModPagespeedFileCachePath            "/var/cache/mod_pagespeed/"
ModPagespeedFileCacheSizeKb          100000000
ModPagespeedFileCacheCleanIntervalMs 864000000
ModPagespeedFileCacheInodeLimit      50000000
ModPagespeedLoadFromFileCacheTtlMs 31556952000
ModPagespeedDownstreamCachePurgeLocationPrefix http://localhost:8443

I also noticed we are using this code, is it useful or should we remove it? https://blog.speedvitals.com/delay-javascript/#For_Non-WordPress_Sites 

Longinos

unread,
Apr 11, 2022, 4:27:32 AM4/11/22
to mod-pagespeed-discuss
Hi
The next days I go out of home, w/o internet conection so can´t see any message.
I can see now much better times in lighouse
In mobile test LCP was changed from the T-shirt to the menu logo image, and times go down from 6s to 3s
In desktop the LCP still the t-shirt and times are 1.6s

Regarding width and heigth, you need to put it on all images, there are some that don´t.
The logo image in navbar
The hambutger menu
And all the ethics images.

The code you use is for delaying the js code until user interacts with the page, try to no use andd see the impact in the page load times.

Ungov

unread,
Apr 11, 2022, 3:18:12 PM4/11/22
to mod-pagespeed-discuss
Indeed I see some improvements, but there is still a hugeee difference of TTFB when PageSpeed is disabled and I don't understand why.
We fixed the other images. Also extended our page cache, made some images smaller and a few other optimizations

Ungov

unread,
Apr 12, 2022, 12:52:25 AM4/12/22
to mod-pagespeed-discuss
the high TTFB was fixed after installing Memcached, thanks to jmarantz for help with this and thank you too! All your comments and suggestions were very helpful
The only problems remaining are the LCP and the resource header in the other discussion

Longinos IntersindicalRM

unread,
Apr 12, 2022, 8:28:04 AM4/12/22
to mod-pagesp...@googlegroups.com
Hi
Glad to heart this.
Remember, in some past email I tell you to use Redis (or memcached).
I prefer Redis. Memcached has a fixed object size (by default 1Mb), Redis can store objects with variable sizes.

In the other thread you day Cloudflare delete html comments. Have you enabled CF optizations? Disable it. Specially those related to JavaScript.

Optimize pagesped:
Same that lazyload get disabled because you don't need, you need to rethinking about others filters.

You have inline CSS, js and preview images.
None of these filters do nothing in you site. CSS an JavaScript because the default max size to inline is only 2024b and none of your files is bellow this size.

Preview images is supposed to inline low quality images and change it with high ones when page load . But you have lazyload, I think you don't need this.

You have others CSS filters that does nothing. Put CSS in head, you have it done, or put it over script, you have it too, don't need these filters.

Critical CSS, well, maybe some day it work, if you enable beaconing ( same for some image filters like put dimensions).
This filter takes cache space because it need to "remember" the CSS loaded in EACH page, and what CSS is used first, put CSS files at bottom an load it when page load finishes.
Takes CPU and, yes, time...

Concatenate CSS and us files... With http2 or http3 (can be enabled in CF) concatenation of files is not needed.

Try to disable all those filters and see if timing for the page goes down, a bit almost.

--
You received this message because you are subscribed to a topic in the Google Groups "mod-pagespeed-discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/mod-pagespeed-discuss/z9hkmYBHLX4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to mod-pagespeed-di...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mod-pagespeed-discuss/801bd718-52e1-4f0c-a6f8-15e309873600n%40googlegroups.com.

Ungov

unread,
Apr 12, 2022, 4:59:59 PM4/12/22
to mod-pagespeed-discuss
You're right, I forgot you suggested it. It was easier to install than I initially thought. Do you think 51200 is enough for Memcached? We will look into Redis but it seems more complicated to set up than memcached.

Right now Cloudflare is paused so there is no optimization. Rocket Loader is always disabled if that's what you're referring to.

I disabled the filters you mentioned. jmarrantz also suggested disabling defer javascript because it could be doing more harm than good.
But now the website is acting really strange... If you click a random t-shirt for the first time, there are 404 errors in the console
Strangely I can open the 404 files in my browser without any error
It usually goes away after pressing CTRL+F5 many times, but the problem comes back when you open another page

GET https://www.keinegotterkeinemeister.de/anti-war-tshirts-C84735/_.pagespeed.jo.RZO_rNUGMr.js net::ERR_ABORTED 404
ngnm_search_suggestions.js:6986 Uncaught ReferenceError: Awesomplete is not defined


Strangely I can open the 404 files in my browser without any error
The errors usually goes away after pressing CTRL+F5 many times, but the problem comes back when you open another page for the first time

prioritize_critical_css - disabling it breaks the layout of the website but it fixes itself after multiple CTRL+F5

Also, do you recommend letting gzip be enabled?

Here is the most recent config as of today: https://pastebin.com/Fgk2R9YH

Longinos

unread,
Apr 13, 2022, 4:38:11 PM4/13/22
to mod-pagespeed-discuss
Hi

Yes, let gzip enabled. this makes the traffic between server and CF takes leed bandwidth.
I don´t see any of these messages ( net::ERR_ABORTED 404) sound like your browser have issues. Uninstall it and reinstall, or try with others browser.
I take a look at this config https://prnt.sc/R2YsTV8yRpFr

There are other filters you xan disable too:
The outline css and js.
With the config you have, when a inlined css snippet is greather thatn 1000 bytes, pagespeed creates a "file" and download it. Same with inlined js, but the ,in size is 3000 bytes.

Disabling prioritize_critical_css don´t break the page, almost for me. (See the minus sign before prioritize_critical_css)


Captura de pantalla 2022-04-13 223542.jpg

Longinos

unread,
Apr 13, 2022, 5:01:34 PM4/13/22
to mod-pagespeed-discuss
Hi

More things in this site:

Put all js files with defer attribute, even those from cdnjs, unless jquery because this is needed for some inlined js snippet.
You have combine css enabled (see the image) and js too, and some type of optimization with CF
Captura de pantalla 2022-04-13 230020.jpg

Jon

unread,
Apr 13, 2022, 5:31:56 PM4/13/22
to mod-pagesp...@googlegroups.com
Hi,
Disabling critical css is working now, not sure what happened the last time. We also disabled outlining.  
Are you suggesting we should also disable combine CSS?

We tried adding defer but it doesn't work with some JS files

Deferring Masonry and Imagesloaded breaks the footer: https://prnt.sc/zFN_Mlsea8_t 
Defer AOS hides all images https://prnt.sc/B-QZbp8NWeoQ
Deferring Fancybox gives errors in console https://prnt.sc/GcZ4z0ON7Gvy 

As always thanks for your help

To view this discussion on the web visit https://groups.google.com/d/msgid/mod-pagespeed-discuss/f2532412-cb40-46be-9b7e-e3f76426ebf1n%40googlegroups.com.

Ungov

unread,
Apr 13, 2022, 5:44:34 PM4/13/22