Forum Replies Created
-
Posts
-
Hi Ismael, Ok I trust your expertise on this. I still don’t get how I can get different results in GTMETRIX waterfall (both images vs one image), but never mind that. Though I do think I get the same result (early loading of background image) by preventing lazyload for the background image as I get with your suggested asyncImage adaptation. Do you see any reason why I should use your adaptation in that case? As much as I appreciate your efforts I want to do as little special hacking as possible.
The conclusion then is that I will be better of just serving the gigantic 1500×430 image for all screen sizes for the background image? The ultimate solution would of course be to have srcset implemented also for the background image, that would optimize the page with the right size for the right screen automatically and through Imagify I would also get webp served. This would be perfect. Any chance that that would be implemented soon?
Hi Rikard,
I am using a limited number of elements on my site and I am also getting around 80% of the CCS and 65% of the JS as unused code. That is quite a big deal with 400 Kb “dead weight” of unused code on a page that is around 1.2 MB in size.Under performance, if I am manually disable unused elements, what happens with the CCS and JS? Will the code still be there? That kind of defeat the purpose with disabling them in that case?
Since performance quickly is becoming the third leg of SEO the other two being on-page optimisation and linking strategies, it would be great if you could look into this and try to minimize the dead-weight.
Having this said, you are no better or no worse than most of the websites I have looked at, but it doesn’t hurt to excel….. ;=))
Hi Ismael, to narrow down further what is causing the load of both image versions (mobile and Desktop) I have moved our live site to our development to test the behaviour. This site do NOT have your asyncImage implemented at all. The problem with double loading of the image versions seem to be related to whether the background image is allowed to be lazyloaded or not.
The Aptilo web WITHOUT your suggested asyncImage “hack”:
https://gtmetrix.com/reports/aptilodev.wpengine.com/S77xsUeP
As you can see the background image https://aptilodev.wpengine.com/wp-content/uploads/2020/05/Aptilo-IoT-CCS-because-you-do-not-need-another-mobile-core-v4-1500×430-1.jpg is loaded very late.
But, if I implement WPRocket’s helper plugin that prevents lazyloading of background images, then the background image will load early as I want but both image versions are loading:
https://gtmetrix.com/reports/aptilodev.wpengine.com/Q8N3MxWT
My conclution from this is that preventing lazyloading of background images will get me to what I want without your asyncImage “hack”. This is a good thing as maintaining custom code is a nightmare in the long run. However, the unwanted side effect is that both image versions are then loaded for some reason. Anything we can do about that?
I am looking forward to your conclusion.
Hi Ismael, are you sure about this?
Here I have disabled lazy loading for the image class you created (asyncImage) according to GTMetrix both images are loading and the total size of all images is 208.9 Kb https://gtmetrix.com/reports/aptilostaging.wpengine.com/Rjs2Jcwu
Here I have enabled lazy loading (or rather not disabled it) for image class asyncImage) and according to GTMetrix the correct version (414×119 smaller size for mobile) is loading and the total size of all images is 149.1 Kb https://gtmetrix.com/reports/aptilostaging.wpengine.com/9lIFYbKA
The difference 208.9-149.1 = 59.8 Kb is extremely close to the reported size of the 1500×430 larger size for desktop which is 59.9 Kb.UPPDATED: The reason why I am so particular about this is that if I prevent the background image from lazyloading my Google Web Core Vitals goes up significantly from 61 points to 83 for mobile and from 84 to 93 for desktop. The reason is that they are very particular about the time for the largest content to load. This will become crucial for SEO going forward.
Hi Ismael, I am using WPRocket and also essential grid. I will ask the same question to WPRocket but wanted to check with you as well.
The background image that I am using as the top banner here https://aptilostaging.wpengine.com/cloud/cellular-iot-connectivity-management-and-policy-control/ (name of image Aptilo-IoT-CCS-because-you-do-not….) is implemented in two sizes one for mobile and one for the other screens. I then use the advanced styling for the Enfold background image element to display the right size for the right screen. When I use the lazyload feature for Images in WPRocket, this works great only that it seems like the background image is lazyloaded as it is loading very late even after the essentialgrid is loading. This grid is not even visible on a mobile screen before scrolling so it should clearly load after the background image, check this waterfall:
https://gtmetrix.com/reports/aptilostaging.wpengine.com/g0iqpd25
But, if I disable the WPRocket lazyloading feature, either for all images or only for background images with their recommended helper plugin, then the image loads before the essentialgrid just as as it should after your great “hack”. But, now BOTH versions of the background image is loading as you can see from this waterfall:
https://gtmetrix.com/reports/aptilostaging.wpengine.com/aADKJ2eQ
Just wanted to check with you if you think there is anything in your “hack” that could cause this behaviour?
Another question that I don’t expect you to answer, since it is out of scope for the support, but you would be my hero if you have any insights:
In the waterfalls you will notice that there is a huge inactivity (big gap of 2,5 seconds) just before the essential grid is loading. I have tried to use chrome dev tools to figure out what javascript is causing this and how I can improve this, but I am not so savvy in this tool. Do you have any idea?Hi Ismael, thanks will look into this when back from vacation. Are there any plans to support srcset for background images too?
Sorry Ismael, I totally missed your reply. I am about to update to the latest Enfold with srcset support now. Does this change anything in your instructions?
Well, even a 12 MUSD software company has their priorities, below me we are one of them. But, I agree on one thing. Web tech people are not always up to speed to understand the importance of SEO and yes of course Enfold should have already support for srcset and webp by now.
Thanks Ismael, so what you are saying is that it should look like this?
item.style.backgroundImage = url(${item.dataset.src})url(${item.dataset.src})url(${item.dataset.src});
Doesn’t feel right to me………….I must have misunderstood your updated instructions?
I have added login credentials in private content.
IMHO: If we all agreed to pay more than pennies per year for Enfold, then they would be able to allocate more resources. Isn’t really a joke that multi-millon dollar businesses pay so little for so high value?
Thanks Ismael, now I get this error (Chrome inspect on page https://aptilostaging.wpengine.com/) on that modified line:
“Uncaught SyntaxError: missing ) after argument list”.
Since I don’t understand the code fully myselft, I need some help to trouble shot.
Hi Ismael, thank you so much for your support on this!
I did what you said, but get an error (use Chome inpect and you will see it) for this page https://aptilostaging.wpengine.com/
I should rephrase that, I did not do exactly what you said :
1. I implemented the code snippet in my child theme’s functions.php. By the way shouldn’t I try to use the new modified section.php in the child theme as well so it is not overwritten in future updates.?
2. I already had a custom CSS class name in the colorsection to get a responsive image: https://kriesi.at/support/topic/how-to-replace-the-advanced-layerslider/#post-1215293 and temporarily disabled it in order to test your idea (if it is succesful we need to find a way to merge them).
On your question about lazy-load: Yes, I have two plugins essential-grid and WPRocket using lazyloading. I have before tested to disabled them both, but same results. It seem to me that background images are loading very late no matter what, maybe it works as designed? I mean maybe it is generally logical to load a large background image last, but not in my case as it is (miss-)used as a top banner. If I could find another way (than using the color section background image + special heading) to get a full width top-banner 1500×430 with a H1 heading in front I would try that of course.
Please also note that I use the advanced responsive tab in the colorsection to load a 415×119 image for mobile and 1500×430 image for the rest (so basically the colorsection is repeated x 2 with different image sizes loading conditionally. Don’t know if this messes things up.
I don’t now if this information helps, but it seems to my that all background images are loaded after that footer js. I tried to but a background image in a 1/1 section and it was the exact same behaviour https://aptilostaging.wpengine.com/solutions/carrier-wifi/
GTMETRIX https://gtmetrix.com/reports/aptilostaging.wpengine.com/qHxfhT15 (look for the virtual service provider concept picture)
Why this is such a big deal for SEO is that Google will increasingly care about loading speed of Largest Content Paint LCP and my top banner is clearly the LCP for all my pages.
Hi Ismael, did you test it from a mobile device? Yes, we have good performance on our site, I am working hard on that, but the user experience is not quite as good as it seems. The fact that our top banner (implemented as a background image in a color section) is loading so late is devastating for the user experience, especially on mobile. Even though we get good grades on GTMetrix, the page feels very slow when almost every picture on the page, that is not even visible in the view port without scrolling, is loading before this top banner.
In fact, even your footer javascript https://aptilostaging.wpengine.com/wp-content/uploads/dynamic_avia/avia-footer-scripts-fe82e08c16b339646073b2fc2bfaacfb—5ee3651ebf67a.js is loading before, which make me think that maybe the loading of the background image is triggered from this script? (please bare with me, I am not that savvy in web development😂).
This is the top banner I am talking about, placed as a background image on a color section directly under the top header https://aptilostaging.wpengine.com/wp-content/uploads/2017/07/nr-1-soultion_1500x430-darker-new-414×119.jpg (I also noticed that without WP Rocket activated, I have disabled it for trouble shooting here, it seems like it is loading both the desktop and mobile version of it. I have made responsive conditions and added two banners one for mobile and one for the rest, no big deal but good to know).
This is the GTMETRIX waterfall https://gtmetrix.com/reports/aptilostaging.wpengine.com/ZqvURt9C
I really need to get to the bottom of this. I do not know what dev tools you are talking about, can I do anything to help?
Thanks Mike, that works perfectly! Below you can see my implementation of three new picture sizes (for other people too see that needs more than one):
add_image_size( ‘Top-banner-mobile’, 414, 119, false ); /* Top banner for mobile as background image in color section */
add_image_size( ‘eg-four-three’, 400, 300, true ); /* Cropped image to fit Essential grid 4:3 aspect ratio Mobile or > 2 column desktop */
add_image_size( ‘eg-sixteen-nine’, 400, 225, true ); /* Cropped image to fit Essential grid 16:9 aspect ratio (video) Mobile or > 2 column desktop */add_filter( ‘image_size_names_choose’, ‘my_custom_sizes’ );
function my_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
‘Top-banner-mobile’ => __( ‘Top Banner Mobile’ ), ‘eg-four-three’ => __( ‘Essential grid 4:3’ ),
‘eg-sixteen-nine’ => __( ‘Essential grid 16:9’ )) );
}Hi Mike, it worked almost perfectly and I need your further advice. I copied everything from line 166-205 which then included this at the end:
Code >>>>
avia_backend_add_thumbnail_size($avia_config);
if ( ! isset( $content_width ) ) $content_width = $avia_config[‘imgSize’][‘featured’][‘width’];
<<<< Code
When I saved I got an error that function avia_backend_add_thumbnail_size was undefined (of course as I have not copied to my child theme)
So, I commented it out just to test. The result is that the new image sizes I need is created perfectly, but I can’t choose them from the GUI. It must of course be because that function above is not run. I think maybe the most nice way to do this is to call the origignal function in the parent, but I am not quite sure how to do that. Then I am not sure exactely what the if condition does directly under the call of that function and what I should do with it.Feels like I am almost there, just need some more help…….
Ismael,
I still need Enfold’s input as why the background image used in the color section directly under the header is loading so late.Check this: https://gtmetrix.com/reports/aptilostaging.wpengine.com/4YeqqBqy
As you can see the picture https://aptilostaging.wpengine.com/wp-content/uploads/2019/08/Virtual-Service-Provider-1500×430.jpg is almost loading last on page even after the google analytics script in the footer. Yet this is the first picture on the page.
I have tried a uncashed version also without any interference from WP Rocket, same results (although it actually for some reason is loading both a version I use for mobile and the desktop version):
https://gtmetrix.com/reports/aptilostaging.wpengine.com/OBbPBKoa
Hi Mike, can I just copy the whole thing line 166-205 to my functions.php in my child theme and change sizes and/or add a few more sizes?
I do not want to mess with the parent themses functions.php. Will this copied and modified code in the child theme then override the code in the parent theme?Hi just a follow up on this one. This is the background image https://aptilostaging.wpengine.com/wp-content/uploads/2017/07/nr-1-soultion_1500x430-darker-new.jpg and as you can see from this GTMetrx report it is loading even after the script in the footer……..
https://gtmetrix.com/reports/aptilostaging.wpengine.com/kteep34j
Another question, is there a class that I can refer to for a background image in a color section? I want to disable lazyloading for this class when I switch on that feature in WPRocket (which I have temporarily disabled just for trouble shooting).
CORRECTION: The original picture is not loaded for Mobile phones, GTMetrix must have a problem with their mobile phone testing client, will talk with them.
Hi Ismael,Please try to put this high in the priority order, speed in mobile is everything nowadays for SEO. Infact, I would deem it almost as important as on-page SEO and linkbuilding strategies.
I implemented the suggested code (switch out the image.php). I am still somewhat confused though. When using Chrome web-dev tools I can see that srcset is implemented
, but it seems to me that the original picture is still loaded for mobile phones.It could be user error as I am not so savvy with this tool.However, when I use a browser on my laptop and right-click to download the picture. I get the exact same picture downloaded if I have the browser in full width or in the smallest width possible (trying to simulate a mobile phone).Another question, the code for srcset didn’t work for a color sections background image, is this possible to fix?
@7thflow just be aware that this fontello iconfont is also used for other things e.g symbols in tabs and other elements. I had issue with that the font was blocking the performance with a waiting state. Sine I use this symbols in more or less every page I decided to try to preload the font in the header, worked very well se my reply to my own post here https://kriesi.at/support/topic/fearure-request-being-able-to-choose-a-small-png-file-instead-of-icon/#post-1219481
UPDATE: Although the below approach took away the “wait state” for loading fonts, I couldn’t notice any significant performance gain when running multiple (10+) GTMETRIX tests at different times with and without pre-loading fonts. I was a bit to early in singing the praise…………
Never mind I did a copy of the header.php to my child theme and then I followed the below instructions to pre load the fonts in the header.
https://wp-rocket.me/blog/font-preloading-best-practices/This made wonders! https://gtmetrix.com/reports/aptilostaging.wpengine.com/etwthxqP
I highly recommend everyone to look into this.
Case closed, I am very happy. Still some bottle necks to sort out.
Well, when I look unto this more I may change my mind ;=)), but for now it is only the one spacing between the blue color section with initial text and the text under.
Hi Jordan, some additional information. It seems to help if I place a 1/1 or any other such layout elements inside a color section i.e the white space between color section and another color section is ok, but for some reason the distance between a color section and a 1/1 (or other such) is too big.
For me this seems like a workaround that shouldn’t be necessary? I mean it isn’t really best practise to have a layout element inside another layout element, such the color section, unless you need another background or something?UPDATE: The above only applies if ALL element on the page is in a colorsection. Exampel:
Swedish page all elements are within a colorsection white space between elements ok: https://aptilostaging.wpengine.com/cloud/guest-wifi-cloud-swedish/
English page where only elements that should have different color or background is within color section, far too much space between elements IMHO: https://aptilostaging.wpengine.com/cloud/guest-wifi-cloud-english/
Hi Jordan,
Here is one such example https://aptilostaging.wpengine.com/solutions/carrier-wifi/operator-managed-guest-wifi/ where I think it is a bit to much whitespace between the grey color section and the “Managed Guest Wi-Fi Your primary B2B asset” heading. If you look at it in a mobile I would say it is way to much maybe half would be good.
