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

Ubuntu Jammy Jellyfish; about screenshots and Firefox

Yesterday I had the day off, so I decided to finally upgrade my Thinkpad X13 to Ubuntu 22.04. Jammy Jellyfish (as the release is nicknamed) is nice but the new default display server, Wayland, blocks Shutter and other non-native screenshot apps from making screenshots. This interfering with my support workflow as I use Shutter not only to make the screenshot but also to edit and upload it to imgur. The solution was simple; I logged out and switched back to the Xorg display server on the login screen settings.

Coincidentally or not; making screenshots in Firefox (which can be handy to screenshot an entire page or a node for example) was suddenly disabled as well, so in about:config I had to toggle screenshots.browser.component.enabled back to true.

And lastly, also on the topic of Firefox; it now comes as a snap instead of a deb now and although I’m not dogmatic about deb vs snap, I see no need for Firefox being packaged/ updated by the OS as the in-browser update mechanism is sweet, so I installed the Mozilla-build instead.

Don’t take free & open source for granted; donate to Mozilla!

Do you ❤️ the free and open web and do you want to ensure a non-profit can continue to play an important role? Do you use Firefox or use MDN (Mozilla Developer Network) to check up on JS or CSS or HTML syntax?
We do too and as from today Optimizing Matters will donate $20 monthly. If you use Autoptimize or Async JavaScript or WP YouTube Lyte then please, pretty please, consider donating at https://donate.mozilla.org too.

(even) more privacy with Firefox Containers

Being wary of all things tracking by Google & Facebook, both of who’s products I love but data capturing practices I hate, for the last 4 years or so I always logged in into these in “Private browsing” sessions in Firefox (because why trust the worlds biggest advertising platform with your privacy, right?)
Now I just “discovered” that the Mozilla team have rendered that somewhat clumsy procedure -which required me to log in each time I restarted my computer or browser- redundant with their “Firefox Multi-Account Containers” add-on, allowing you to contain entire sessions to one (or more) tabs;


So now I have one browser window with a couple of tabs in the Google container, one tab in a Facebook container and all others in the “default” container where Google & Facebook can’t track me (fingerprinting aside, but there’s an option for that).

Firefox OS dead or just resting?

So Peter-Paul Koch (Quirksmode) declares Firefox OS dead. I’m afraid he’s right. A pity really, as I loved the idea of an entirely open web-based mobile OS. Mozillians don’t agree, saying they’re just not going offer Firefox OS phones through carriers any more.
Or maybe It’s just resting?

Customer: I wish to complain about this here fox what I purchased not half an hour ago from this very boutique.
Shopkeeper: Oh yes, uh, Firefox OS …What’s,uh…What’s wrong with it?
Customer: I’ll tell you what’s wrong with it, my lad. It’s dead, that’s what’s wrong with it!
Shopkeeper: No, no, ‘e’s uh,…it’s resting.
Customer: Look, matey, I know a dead fox when I see one, and I’m looking at one right now.
Shopkeeper: No no it’s not dead, it’s restin’! Remarkable software, Firefox OS, idn’it, ay? Beautiful openness!
 

No Google fonts with NoScript

I’m not only into optimizing the speed of sites with for the benefit of their visitors, but also into speeding up all sites in my browser, to satisfy my own impatience. I already blocked Facebook, Twitter and Google+ widgets using NoScript’s ABE and now added this little snippet in ABE’s user ruleset to stop Google Fonts from being loaded;
# no google fonts
Sites fonts.googleapis.com
Deny INCLUSION(CSS,SCRIPT)

Result: less requests, less to download and faster rendering without that ugly FOUT. Because let’s face it, your fancy fonts slow down the web and they are of no interest to me.

Mobile web vs. Native apps; Forrester’s take

So web is going away, being replaced by apps? Forrester researched and does not agree;

Based on this data and other findings in the new report, Forrester advises businesses to design their apps only for their best and most loyal or frequent customers – because those are the only one who will bother to download, configure and use the application regularly. For instance, most retailers say their mobile web sales outweigh their app sales, the report says. Meanwhile, outside of these larger players, many customers will use mobile websites instead of a business’ native app.

My biased interpretation; unless you think can compete with Facebook for mobile users’ attention, mobile apps should maybe not be your most important investment. Maybe PPK conceeded victory too soon after all?

Firefox: how to enable the built-in tracking protection

Just read an article on BBC News that starts of with the AdBlock Plus team winning another case in a German court (yeay) and ended with a report on how Firefox also has built-in tracking protection which -for now- is off by default and is somewhat hidden. To enable it, just open about:config and set privacy.trackingprotection.enabled to true. I disabled Ghostery for now, let’s see how how things go from here.

User Agent Madness

Just found this one in my http logfile;

Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.111 Safari/537.36 OPR/27.0.1689.69

So one User Agent string mentioning 4 browsers (Mozilla, Safari, Chrome and finally Opera 27, which is the actual browser) and 3 rendering engines (Applewebkit, KHTML and Gecko)? There is a lot of web-history in those 127 characters.