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).

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 🙂

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.

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.

Adding PHP 8.2 in travis tests

Phew, getting php 8.2 working in my plugin’s travis tests required quite a bit of trial & error in travis.yaml, but 8 commits later I won 😉

The solution was in these extra lines to ensure libonig5 was installed;

matrix:
  include: 
  - dist: focal
    php: 8.2
    env: LIBONIG_INSTALL=1

install:
  # for PHP 8.2 install libonig
  - if [ -n "$LIBONIG_INSTALL" ]; then sudo apt-get install libonig5; fi

Mastodon oEmbed requests overload; use WP Rest Cache

Mastodon due to the decentralized nature can result in a significant extra load on your site if someone posts a link to it. Every Mastodon instance where the post is seen (which can be 1 but also 100 or 1000 or …) will request not only the page and sub-sequentially the oEmbed json object to be able to show a preview in Mastodon. The page requests should not an issue as you surely have page caching, but the oEmbed object lives behind /wp-json/ and as such is not cached by page caches. The solution; the WP Rest Cache plugin and one small code snippet (for now). A lot more info can be found in Donncha’s excellent post on the subject.

Autoptimize Pro released, secret discount code here ;-)

Autoptimize ProSo Autoptimize Pro has finally been released, somewhat secretively (I like flying under the radar).

All info about features can be found on https://autoptimize.com/pro/ including a 20% early birds discount code, but if you use my internet nickname/ handle of whatever you want to call it (it’s part of the domain of this blog and has 3 t’s in it 😉) as coupon code between now and November 16th, you’ll get an even bigger discount!

Be quick, your website will be too 😉

Autoptimize Pro is coming, 10 beta-testers needed!

It has been long overdue, but I’m finally almost ready to release Autoptimize Pro. The first version of AO Pro (an add-on to be installed on top off Autoptimize) will have Image optimization, CDN, fully automated critical CSS and a number of “boosters” to improve performance even more, with more features are in the backlog.

autoptimize pro boosters screenshot

If you’re interested in beta-testing fill out the form below and based on data submitted I’ll pick 10 beta-testers. As a beta-tester you’ll be able to use AO Pro free of charge until the end of the year.

Beta-testing is being finalized, I am currently not looking for additional testers.