Above-the-fold optimization & content prioritization

Optimizing for the speediest above-the-fold render time is one of the tricks that great websites use to deliver a snappy user experience. In short, optimizing for this boils down to making sure that only assets that are important related to rendering the first view are send down the wire, and inlining as much of these assets that actually are needed as possible. We offer filters that automate this optimization process:

Prioritize Critical CSS

This filter determines which CSS rules are needed for rendering what is above-the-fold for the current browser, and inlines just that into the top of the page.

Lazyload Images

This filter determines which images are visible above the fold for the current user agent, and inlines those that qualify.

Defer javascript

This filter defers execution of javascript until after the page has loaded, thereby removing potential rendering/network blocking issues, and speeding up the experience drastically.

With the above-the-fold optimizations, you site should feel a *lot* snapper, especially on mobile user-agents. It is good to have a look at the other filters as well. For example, a DSN lookup can take seconds on a 3g connection - our filter that inserts dns prefetch hints can really make a huge difference here.

Filters marked bold are in the core filter set, which is enabled by default.

Related filters

  • Defer javascript execution : Delays javascript execution until after the page has loaded, thereby speeding up rendering.
  • Inline preview images : Inline low quality images, which will be replaced with full versions once the page has loaded.
  • Insert DNS resolve hints : Insert prefetch link elements early in the html head for domains that need to be resolved later anyway.
  • Insert image dimensions : Enrich IMG tags with 'width' and 'height' attributes where needed
  • Lazyload images : Only load images for the initial viewport, and defer loading of the rest untill they become visible.
  • Make Google Analytics asynchronous : Optimize the Google Analytics javascript so it is executed asynchronously
  • Move CSS above scripts : Moves css elements above script files to improve page rendering speed.
  • Move CSS to head : Move CSS elements found in page content to the head element to speed improve page rendering speed
  • Prioritize Critical CSS : This filter speeds up the time to render, by inlining critical css rules (those needed to render) and deferring the load of the full CSS resources. Part of the content prioritization filters that optimize for a speedy above-the-fold delivery.
  • Resize mobile images : Like Inline Preview Images, but with smaller images. Will only rewrite for mobile user agents.