When lazyloading iframes does (not) work (automatically)

WordPress has made some good progress to speed up site rendering the last couple of years and part of this is thanks to images and iframes having the “loading” attribute with value “lazy”, telling browsers these can be loaded later allowing other (more important) assets to take priority. Especially iframes can consume a lot of bandwidth (think embedded Google Maps or one or more YouTube videos), so the performance impact of lazyloading those can be very significant.

Unfortunately one cannot always rely on WordPress core to automatically make sure there is no performance penalty from stuffing your site with iframes. Here is a non-exhaustive list of when iframes will still delay your site:

  1. WordPress core does not always add the loading="lazy" attribute;
    1. if loading="eager" is set (which means load asap)
    2. if no width & height are set (as lazyloading iframes without those could cause layout shifts)
  2. Firefox (and some less important browsers) does not support lazyloading iframes even if loading="lazy" is set
  3. iframes in or near the “above the fold” part of a page are loaded immediately, even if loading="lazy" is set

Conclusion; show restraint when adding iframes; adding an image of Google Maps which links to (a separate page with) Google Maps is almost always as informative and the performance benefit of using an image instead of an GMaps iframe is huge. And when using iframes then consider using alternative solutions to avoid the performance impact (for YouTube you might want to give WP YouTube Lyte a try).

About to see Wilco live …

Wilco is in town tonight, playing the “Lokerse Feesten” ; an open air 9 day festival here, a mere 5 minutes bicycle ride from home.

I’m not counting on it, but it would be great if I could see, hear and feel “Impossible Germany” live …

Update the day after; they did play Impossible Germany, as always impressed by Cline’s (improvised) solo.

Wilco - Impossible Germany (Live at de Lokerse Feesten, August 2023)

 

Autoptimize Pro: page caching (finally) in beta

I just released Autoptimize Pro 2.0 as beta and now AO(Pro) finally includes page caching. If you’re on Cloudflare (APO), if your host offers page caching at server level (nginx/ varnish or similar) or if you already have a page caching plugin then you don’t need page caching in AOPro, but based on discussions with current customers page caching is still an important missing piece on a lot of WordPress sites, so for those page caching in AOPro will be a big help to get better performance.

If you’re on AOPro already you can switch to the beta-channel yourself (Settings -> Autoptimize Pro -> Account) or you can ask me to enroll you in the Beta. If you’re not using AOPro yet maybe this is the moment to give it a go? You can use the nowwithpagecache coupon code to get a 15% discount 🙂

As found on Our Tube; Edward November – Cold Street Light

So I heard Edward November on the (online) radio a couple of times already and the first and only single “Cold Street Light” is magic.

He (aka Edmund Lauret) should either stop making music entirely or (a lot more difficult) he could try to do even better.

The latter will be very hard though, because “Cold Street Light” is a perfectly unhappy pop-song, beautifully moody, slightly quirky and somewhat unpredictable but with an immensely catchy (downbeat) chorus.

Edmund November - Cold Street Light

Eurovision 2023; my winner is … Blanca Paloma

About #Eurovision; Loved Croatia, Finland and I’m happy my fellow-Belgian #Gustaph did (very) well. But my favorite by far this year was Spains #BlancaPaloma

Flamenco-ish, intense, great voice, beautiful act, uncompromising electro-track that completely avoids the standard 4 to the floor beat that is way to present in Liverpool.

So much to like & discover, I’ve got it on repeat!

Blanca Paloma - Eaea (LIVE) | Spain 🇪🇸 | Grand Final | Eurovision 2023

Want to know some Autoptimize secrets?

There’s a first for everything and so last week I did a presentation at a WordPress Meetup in Antwerp titled “Autoptimize: 5 secrets and an intermezzo” which at least I had fun with.

You can find a PDF export of the presentation here.

Questions go below, in the comments (or in the form on the contact page).

Autoptimize Pro 1.3; instant.page

New booster in Autoptimize Pro 1.3: instant.page, a 3rd party JS component that can significantly improve performance for visitors going from one page to another on your site by preloading a page based on visitor behavior.

Do take into account that it could increase the number of page requests as the preloaded page might end up not being requested after all.

More info on https://instant.page.

How to fix Autoptimize & Critical CSS cron issue

Critical CSS (either through Autoptimize with your own Critical CSS account or through Autoptimize Pro which includes Critical CSS) requires WordPress’ scheduling system to function to be able to communicate with criticalcss.com on a regular basis. In some cases this does not work and you might see this notification in your WordPress dashboard;

It looks like there might be a problem with WordPress cron (task scheduling)

If this is the case, go through these steps to troubleshoot:

  • install the “WP Crontrol“-plugin and go to Tools -> Cron Events
  • WP Crontrol will warn if “cron” (another name for job scheduling) is disabled
  • Look for “ao_ccss_queue” and check the “next run” time/ date.
  • If the has a “next run” date is in the past, there is an issue with your site/ host’s WordPress cron.  Some hosts’ info on the topic can be found for WP Engine here , here for BlueHost, here for HostGator and lastly here for SiteGround.
  • Alternatively you can click on “manually process job queue” in the jobs pane in Settings -> Autoptimize -> Critical CSS

AOPro 1.2; delay JS, CSS & HTML as long as you want

Autoptimize Pro has “Boosters” to delay JavaScript (esp. interesting for external resources), CSS and HTML (which can be very impactful for long and/ or complex pages). Up until today’s release the delay was either until user interaction OR a set timeout of 5 seconds, but now you can choose the delay time yourself, setting it to e.g. 20s or 3s or -and that’s where things get a teeny bit shady- 0s to disable the time-out, waiting for user-interaction to load the delayed resources.

Setting the delay to 0 is a bit shady because at that point you are hiding those assets for performance tests which -although artificial- is likely to improve (lab test) performance scores. If you do use the 0s delay then do take into account that *real* users will still need to load/ render those assets and that that still may be a sub-optimal experience.