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.
This filter determines which images are visible above the fold for the current user agent, and inlines those that qualify.
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.
- 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.
- Move CSS above scripts : Moves css elements above script files to speed up rendering.
- Move CSS to head : Move CSS elements found in page content to the head element, to speed up rendering
- 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.