Page Speed Checklist

Optimize page speed from every angle with a checklist of the fundamental strategies and advanced techniques to make any website a faster and more effective sales platform.

Maximizing website performance is the product of two primary strategies - reducing page weight and streamlining delivery - each of which involves many related factors - a whole list in fact. The page speed checklist is a reference of the many interrelated methods for maximizing page speed.

Questions? Need extra help? Contact me.

Core Concepts

First things first. Set yourself up for success and get more out of the page speed checklist with a conceptual basis and underlying context for why page speed matters, how it impacts user experience and performance goals.

• Load Time
• Performance Goals
• Where Science Meets Art
• Testing & Analysis
• Page Speed Glossary
• Load Time Goals

Minimize Page Weight

Minimizing the total quantity of data downloaded by the web browser is the first core strategy for optimizing page speed. Reducing both the number and size of file resources keeps pages loading quickly and efficiently.

• Reduce Resources

  It all starts here. Shrewd decisions about the best balance of content and features pay off with faster loading and a better overall user experience.

  • Clean House
  • Minimal CSS Reset

• Consolidate Files

  Logically combine files for more efficient server compression and quicker downloading.

• Minify Code

  Remove code formatting and unnecessary spaces for smaller file sizes.

• Optimize Fonts

  Take a bite out of page weight with fewer, faster-loading fonts.

  • Best In Moderation
  • Mobile Devices
  • System Fonts
  • Font Services
  • Optimize Google Fonts

• Optimize Images

  Big files = big opportunity. Images often account for the majority of total page weight, so minimizing the size of image files can have a big impact.

  • CSS Imagery
  • File Formats
  • Dimensions
  • Compression
  • Metadata
  • Composition
  • Quick Guide
  • Lazy Loading

Streamline Delivery

Along with minimizing page weight, the other fundamental strategy to maximize page speed is optimizing the way data is retrieved and transferred from the web server and loaded by the web browser.

• Eliminate Render Blocking Resources

  Prioritize initially-visible, above-the-fold content and eliminate render blocking resources. Async, defer, lazy loading, on-demand - all the hits.

  • What Is Render Blocking?
  • A Progressive Approach
  • CSS
  • JavaScript
  • Async & Defer
  • Asynchronous CSS
  • On-Demand Embedded Videos
  • Lazy Load Images
  • Defer Google Analytics
  • Async Google Fonts

• Resource Hints

  Jumpstart network connections and preemptively load high-priority files sooner in the loading process.

  • dns-prefetch
  • preconnect
  • preload
  • prefetch
  • prerender

• Web Hosting

  Match hosting resources to your needs and confirm server performance.

• CDNs

  Deliver files from a faster network of servers closer to the geographical location of your users.

• HTTPS & HTTP/2

  Enable the HTTP/2 networking protocol to deliver files more efficiently.

• HTTP Compression

  Setup server compression to reduce file sizes during transfer.

• Cache Control

  Configure cache settings to eliminate unnecessary repeat file downloads.

Odds & Ends

Although not specifically related to page speed optimization, a few other helpful front end techniques:

• CSS Transition To & From Auto Height
• Responsive Embedded Videos
• Responsive Tables
• 3 Ways To Create A Website
• How To Create A Portfolio Website