Category Archives: performance

Sucuri, TTFB and Google ranking

Sucuri writes about their pov on performance:

We focus on useful metrics to optimize speed, like total time, not first byte or server response time.

Whereas Neil Patel writes:

When you’re in the weeds of optimizing your site speed, play smart. Instead of trying hard to push down your document complete, start rendering, or fully loaded page load time metrics (all of which are important), focus on the highest-impact metric first: TTFB.

Where TTFB = time to first byte. Needless to say I’m with Neil on this!

Loading webfonts just for a title? Switch to SVG instead.

So I wanted to replace a site’s (*) main title which required some fancy font (Courgette!) to be downloaded, by an SVG image.

Here’s what I did;

  1. make a screenshot of the node in Firefox Developer Tools -> Inspector -> select node -> click “screenshot node” in context menu
  2. convert the png-file into svg at http://pngtosvg.com/ result being a 6.93KB file.
  3. optimize the svg at http://petercollingridge.appspot.com/svg-optimiser resulting in a 3.1KB file (see above image) which remains crispy at whatever size.
  4. added the SVG as background image (not inline though, might do that next) and set “visibility” of the logo->a->h3 (which has the title in it as text) to “hidden”
  5. ticked Autoptimize’s “remove Google Fonts”-option (which also removed a slew of other unwanted requests for fonts)

(*) The site is my wife’s boeken-jagers.be which is an offspring of her successful “De Boekenjagers” Facebook group where people hide books for others to find (hunt) and share info about that. 27 000 members and counting, proud of my Veerleken!

Autoptimize 2.2 coming your way, care to test?

So work on Autoptimize 2.2 is almost finished and I need your help testing this version before releasing (targeting May, but that depends on you!). The more people I have testing, the faster I might be able to push this thing out and there’s a lot to look forward to;

  • New option: enable/ disable AO for logged in users for all you pagebuilders out there
  • New option: enable/ disable AO for cart/ checkout pages of WooCommerce, Easy Digital Downloads & WP eCommerce
  • New minification/ caching system, significantly speeding up your site for non-cached pages (previously part of a power-up)
  • Switched to rel=preload + Filamentgroup’s loadCSS for CSS deferring
  • Additional support for HTTP/2 setups (no GUI, you might need to have a look at the API to see/ use all possibilities)
  • Important improvements to the logic of which JS/ CSS can be optimized (getPath function) increasing reliability of the aggregation process
  • Updated to a newer version of the CSS Minification component (albeit not the 3.x one, which seems a tad too fresh and which would require me to drop support for PHP 5.2 which will come but just not yet)
  • API: Lots of extra filters, making AO (even) more flexible.
  • Lots of bugfixes and smaller improvements (see GitHub commit log)

So if you want to help:

  1. Download the zip-file from Github
  2. Overwrite the contents of wp-content/plugins/autoptimize with the contents of autoptimize-master from the zip
  3. Test and if any bug (regression) create an issue in GitHub (if it doesn’t exist already).

Very much looking forward to your feedback!

Autoptimize CSS defer switching to loadCSS (soon)

Historically Autoptimize used its own JS-implementation to defer the loading of the main CSS, hooking into the domContentLoaded event and this has worked fine. I knew about Filament Group’s loadCSS, but saw no urgent reason to implement it as I saw no big advantages vs. my homegrown solution. That changed when criticalcss.com’s Jonas contacted me, pointing out that the best way to load CSS is now using the rel="preload" approach, which as of loadCSS 1.3 is also the way loadCSS works;

<link rel="preload" href="path/to/mystylesheet.css" as="style" onload="this.rel='stylesheet'">

As rel="preload" currently is only supported by Chrome & Opera (both Blink-based), a JS polyfill is needed for other browsers which uses loadCSS to load the CSS. Hopefully other browsers catch up on rel="preload" because it is a very elegant solution which allows the CSS to load sooner then with the old code while still being non-render blocking. What more could one which for (“Unicorns” my 10yo daughter might say, but what does she know)?

Anyways; I have integrated this new approach in a separate branch on GitHub, you can download the zip-file here to test this and all the other fixes and improvements since 2.1.0. Let me know what you think. Happy preloading!

How to fix CSS media-types impacting Autoptimized CSS order

pixeldima-forum-screenshotAdel of Pixeldima contacted me to look into a problem with some of the styles not being applied after autoptimization on the forum-page in his beautiful OKAB-theme. I had seen similar problems before, but decided to dig in this time to understand the root cause. That root cause turned out to be 2 CSS-files, one overriding the style of the other, having a different media-type, which messed up the load order once autoptimized. This can either be fixed at the theme-level, at AO configuration level or with a couple of lines of code hooking into AO’s API.

The problem

Without Autoptimize (which one can trigger by simply adding ?ao_noptimize=1 to the URL), these 2 relevant files were loaded (among many others obviously):

  • bbpress.css (the default bbpress css-file) was loaded first with media=”screen”
  • okab/bbpress-styles.css (part of the theme) is loaded second with media=”all”, overriding some of the CSS in bbpress.css

Autoptimize honors the media-types, resulting in 2 Autoptimized CSS-files;

  • autoptimize_1a002577cefe349767025a16201f37a9.css with media=”all” is loaded first (because the very first CSS-file encountered in the HTML had media=”all”) which contains okab/bbpress-styles.css
  • autoptimize_8e3c7dac90177214b6583286ddaa141f.css is loaded second with media=”screen”, containing bbpress.css

So due to the mediatype the code in bbpress-styles.css was loaded before the CSS in bbpress.css when Autoptimized, resulting in styles being overwritten the wrong way (bbpress-styles.css is overwritten by bbpress.css instead of the other way around).

The solution(s)

As Adel was the theme developer, he could immediately attack the root issue by enqueuing bbpress-styles.css with media=”screen”. This way both files share the same media-type and go in the same autoptimized CSS-file, resulting in the CSS of bbpress.css getting properly overwritten by the CSS of okab/bbpress-styles.css.

If you’re not the theme developer you’ll probably not want to change the theme’s code (although you could dequeue and re-enqueue in a child-theme’s functions.php), in which case you have two workarounds at your disposal: the easiest workaround being simply excluding the CSS-file that gets overwritten from CSS optimization (i.e. in this case simply adding okab/bbpress-style.css to the list of CSS optimization exclusions). Easy indeed, but on the downside you’ll have one non-optimized CSS-file. That’s why it’s a good thing we have our precious little API, allowing us to override the media-type of the offending file with just a couple of lines of code, like this;

add_filter('autoptimize_filter_css_tagmedia','check_mediatype',10,2);
function check_mediatype($media,$tag) {
  if ( strpos($tag,"okab/bbpress-styles.css") !== false ) {
	$media=array("screen");
  }
  return $media;
}

Conclusion

As Autoptimize honors the original CSS’s media-types, 2 CSS-files that ought to be loaded in a specific order might end up being loaded in the wrong order if their media-type is different. This can be fixed in the theme or worked around by excluding a specific CSS-file or using AO’s API to override the media-type for the offending CSS-file.

Saying goodbye to 2012.FFWD

Earlier today I updated my performance-centric TwentyTwelve child theme to fix a problem with the mobile navigation (due to the fact that TwentyTwelve changed the menu-button from a h3 to a button, which required the navigation JS which 2012.FFWD inlines to be updated as well). You can download the update here.

This update “officially” marks the end-of-life of this child-theme. Although a lot of optimizations can be done on a theme-level, I prefer focusing on tools like my own Autoptimize, which not only optimize code spit out by the theme but also any CSS/ JS introduced by plugins or widgets.