Callahan

Page Speed Recommendations

Page Speed Checklist

Custom Page Speed To-Do List

This is a simple example of page speed recommendations, formatted as an easy-to-follow to-do list. Contact me for a custom list specific to your project.

  1. Server

    1. Update to HTTP/2.

    2. Add HTTP compression for SVG files and CDN-served resources.

    3. Set long cache expiration periods (up to a year) for infrequently-updated static resources like CSS, JS and images with file versioning as needed for cache busting future updates.

    4. Sweep for unminified CSS & JS files.

  2. HTML

    1. Add to this line:

      <meta name="viewport" content="width=device-width, initial-scale=1"/>

    2. Replace the block of preconnect resource hints with just:

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

      (preconnect should be limited to critical third-party resources that aren't otherwise directly referenced in the HTML. Superfluous items could interfere with loading higher priority resources and browsers may limit the number of connections anyway.)

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

      HTML
      <rel="preload" media="(max-width:999px)" href="/images/logo-shape.svg" as="image">
<rel="preload" media="(min-width:1000px)" href="/images/logo-wide.svg" as="image">

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

  3. Images

    1. Add accurate width and height attributes to all <img>s.

    2. Add missing alt attributes.

    3. Add the loading="lazy" attribute to all images that aren't certain to appear above-the-fold:

      HTML
      <img loading="lazy" src="..." width="..." height="..." alt="...">

      If the site recieves appreciable traffic from Safari, consider including a JavaScript fallback.

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

    5. Convert the homepage banner rotator to progressive loading:

  4. Videos

    1. Update embedded <iframe> videos to on-demand loading.

  5. Fonts

    1. To avoid the render blocking impact of Google Fonts, replace this line:

      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" as="style" href="https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@300;900&display=swap">

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

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

    2. Update the Font Awesome @font-face to reference only the WOFF2 format:

      CSS
      @font-face {
    font-family: 'FontAwesome';
    src: url('/fonts/fontawesome.woff2') format('woff2'));
    font-weight: normal;
    font-style: normal;
}

    3. Preload the Font Awesome WOFF2 file:

      HTML
      <link rel="preload" as="font" href="/fonts/fontawesome.woff2">

    4. Consider creating a custom version of Font Awesome that only includes the needed icons or replacing it with an SVG image sprite.

  6. CSS

    1. Remove fonts.css altogether.

    2. Crete a custom version of Bootstrap, omitting unused modules.

      For example, is the Glyphicons font used at all?

    3. Separate the critical, above-the-fold sections of custom.css into a much smaller file (ideally <~10KB) and load the remaining, non-critical styles asynchronously.

    4. Load other non-critical and JS-related CSS resources like minicart.css and magic-zoom.css asynchronously as well.

  7. JavaScript

    1. 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.6.0/jquery.min.js"></script>

    2. Reduce page weight and eliminate render blocking JavaScript with a combination of:

      • Remove resources from pages that don't use them, for example reCAPTCHA (>300KB), shadowbox.js and magic-zoom.js.

      • Add the defer attribute to external <script> references (and remove async) and move them to the end of the <head> section in the order they should execute.

      • Move and consolidate inline <script>s to one or more external files and defer as above.

      • Move inline <script>s to the end of the </body>, wrapping those that depend on defer'd files with an appropriate event listener:

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