Sitemap  |   Blog  |  Contact

Page Rendering Speed

Above-the-fold optimization & content prioritization

Optimizing the first page load 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.

Prioritize Critical CSS

This optimization 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 optimization determines which images are visible above the fold for the current user agent, and inlines those that qualify.

Defer javascript

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

With above-the-fold content priorotization optimizations, you site should feel a *lot* snapper. Especially mobile user-agents and large pages will benefit. It is good to have a look at the other PageSpeed optimizations 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.

Automating content prioritization and first page load optimization:

  1. Defer javascript execution
  2. Prioritize Critical CSS
  3. Lazyload images
  4. Insert DNS resolve hints
  5. Move CSS above scripts
  6. Move CSS to head
  7. Make Google Analytics asynchronous
  8. Insert image dimensions
  9. Inline preview images
  10. Resize mobile images
  11. Deduplicate inlined images



Some content on this website represents a modified version from The official Google PageSpeed documentation