Callahan

Performance Recommendations

Page Speed Checklist

Custom Page Speed To-Do List

Example page speed recommendations, formatted as an easy-to-follow to-do list. Contact me on Twitter for a to-do list made just for your site.

  1. General

    1. Update the hosting/server to HTTP/2.

    2. Add HTTP compression for SVG files.

    3. Set long cache expiration periods (6 months or more) for infrequently-updated static resources like CSS, JS and images, using cache busting/file versioning as needed for future file updates.

    4. Remove reCAPTCHA resources (>300KB) from pages that don't use it and remove the async="" attribute from the reCAPTCHA <script> reference, leaving only the defer attribute.

    5. At ~184KB, Font Awesome is quite heavy. Since there are only a few icons used around the site, consider replacing Font Awesome with an SVG image sprite with only the needed icons.

  2. Images

    1. Add sitewide lazy image loading.

    2. Upload these optimized replacements for the homepage banner rotator and some template images.

    3. In addition to the replacement images above, convert the homepage banner rotator to progressive loading:

  3. CSS

    1. To avoid the render blocking impact of Google Fonts, replace these lines:

      HTML
      <link href="https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@300;900&display=swap" rel="stylesheet">

      With:

      HTML
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@300;900&display=swap" as="style">

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@300;900&display=swap" media="print" onload="this.onload=null;this.removeAttribute('media');">

<noscript>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@300;900&display=swap">
</noscript>

    2. The main local CSS file is large enough that it makes sense to separate the critical, above-the-fold styles into a much smaller file (<~10KB) and then load the non-critical styles asynchronously.

    3. Load other non-critical local CSS resources like minicart.css and magiczoom.css asynchronously as well.

  4. JavaScript

    1. Update the Google Analytics snippet to deferred loading.

    2. Update the existing jQuery reference to a defer'd public CDN copy, like:

      HTML
      <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    3. Add the defer attribute to all <script> references and move to the end of the <head> section. If needed, manage any dependent inline <script>s (like jQuery) by moving those snippets to an external defer'd file or wrapping each one with an event listener to run after the defer'd external files:

      JS
      document.addEventListener('DOMContentLoaded', function(){
    // existing inline JS snippet
});

    4. Minify any unminified JavaScript resources, like product.js, ajaxshipping.js and other page-specific files.

    5. Remove magiczoomplus.js from any pages where it's not needed.

  5. HTML

    1. Add these resource hints to the <head>:

      HTML
      <link rel="preload" href="/img/header-logo.svg" as="image">
<link rel="preload" href="/img/icon-sprite.svg" as="image">

    2. Add missing alt attributes to <img>s.

    3. Remove the nested <form> tag on product pages.