Technology

Blogposts on blog.futtta.be about internet, web developement, browsers, security, linux, …

AOPro 2.2: delaying iframes (and other improvements)

by

I released AOPro 2.2 today and the main new feature is the ability to delay the loading/ rendering of iFrames. Despite the fact iFrames can be lazy-loaded (using browser-native loading=lazy attribute), in reality this does not always work in WordPress, hence the new “delay iFrames” option on the Pro Boosters tab.

  • How it works: a delayed iFrame has no src but a data-src attribute. Upon user interaction (or a timeout as also specified on the Boosters settings) the src will be set. If the iFrame is a YouTube, Vimeo or Dailymotion video, AOPro will load the video thumbnail as a placeholder.
  • How you can activate it: by default no iframe is delayed, if you want to have e.g. YouTube video’s delayed add youtube.com to the “delay iFrames” option.
  • What’s next: this is a “minimal viable product”, but depending on user feedback I might incorporate some of WP YouTube Lyte’s functionality for video iFrames. Tell me what you think in the comments!

Apart from delaying iFrames, AOPro 2.2 also has;

  • new under the hood logic to improve the speed at which Critical CSS rules are generated and visible
  • if you are “removing CSS/ JS” then the logic change this at a per page/ post level has changed; if you want one page NOT to remove CSS/ JS, just enter none in the “Autoptimize this page” metabox. If you leave the field empty the default “removals” apply. If you put something else in there then that overrides the default removals.
  • The ShortPixel Adaptive Images JavaScript component was updated to version 1.1.

HTTP/2; do not aggregate? Well, maybe …

by

Ever since the advent of HTTP/2 people asked if they still needed JS/ CSS files to be combined and indeed by default aggregation is off in Autoptimize. But based on this interesting article by Harry Roberts, “bundling is here to stay for a while”. So when in doubt; test performance with and without aggregating CSS/ JS ideally both on mobile and desktop bandwidth profiles and learn which works best for your site! 🙂

When lazyloading iframes does (not) work (automatically)

by

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

by

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?

by

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

by

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

by

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

by

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

by

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.