Callahan

Performance Recommendations

This is only a sample - recommendations vary by project.

To learn more about website loading speed optimization download the checklist, explore the complete guide or email me for extra help.

  1. General

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

    2. Add HTTP compression for SVG files.

    3. Some file types don't appear to have a cache expiration period set and others are set to 10 days, which most performance tests consider too short.

      • Set a default max-age of at least 1 month to cover all file types.
      • Set HTML files to 1 hour or less.
      • Set infrequently-changed static resources like images, CSS and JavaScript to longer than 1 month as desired, with cache busting/file versioning as needed.
    4. If the third-party ecommerce system is only used on search results pages, is it possible to omit those CSS & JS resources from other pages? Doing so will open up page weight budget for those files on search pages since most other resources will already have been cached from prior page views.

  2. Images

    1. Here are optimized replacements for the homepage banner rotator and some template images: optimized-images.zip

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

    3. It looks like there's room for further compression of all the product, category and manufacturer images ('large', 'medium', etc.) without perceptible loss in quality. A few samples averaged a ~72% reduction, so this will likely yield the biggest overall page weight savings. (Also save JPGs with progressive encoding, particularly files over ~10KB.)

    4. Lazy loading images, particularly on pages with a lot of images below the fold - like the homepage and product listing pages - will have a big impact on initial-load page weight.

      This is a simple setup I recommend to lazy load images.

  3. CSS

    1. To reduce the render blocking impact of CSS, the main CSS file is large enough that it makes sense to separate the critical/above-the-fold styles into a separate file and then defer loading of the non-critical styles:

      HTML
      <!-- critical CSS -->
      <link rel="stylesheet" href="critical.css">
      
      <!-- non-critical CSS -->
      <link rel="stylesheet" href="non-critical.css" media="(max-width:1px)" onload="this.onload=null;this.media='all'">
      
      <!-- no-JS fallback -->
      <noscript>
          <link rel="stylesheet" href="non-critical.css">
      </noscript>

      (And of course minify both/any CSS files.)

    2. Now that Google Fonts supports the font-display property, unless the greater control of the JavaScript web font loader is specifically needed, replace the existing references with a deferred version of a regular <link>:

      • Remove the 2 existing Google Font related <script>s and the <noscript> right above them.
      • Add this <link> and <noscript><link> in the <head>, similar to the configuration of other non-critical CSS:
      HTML
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700&display=swap" media="(max-width:1px)" onload="this.onload=null;this.media='all'">
      
      <noscript>
          <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700&display=swap">
      </noscript>
    3. legacy.js (referenced inside .footerBBB) appears to only load some CSS. That file request could be eliminated by adding the CSS directly to the non-critical CSS file and then removing the reference to legacy.js.

  4. JavaScript

    1. Update the existing jQuery reference to a public CDN copy, like:

      HTML
      <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    2. With over 200KB of JavaScript resources and a number of inline <script>s on most pages, consolidating and restructuring JavaScript will minimize the render blocking effect and maximize caching as users click around the site.

      At a minimum, add the defer attribute to as many <script src="..."> references as possible, and then manage any inline <script>s that rely on those files accordingly. (For example, by wrapping their content with document.addEventListener("DOMContentLoaded", function(){ ... });.)

      Taking this a step further, move inline <script>s to a separate file and reorganize all JavaScript resources based on what can and can't be deferred. (In most cases all or nearly all JavaScript can be deferred, but if not this may require separating parts of bundled files that can't be deferred.)

      The result will look like this:

      HTML
      <head>
          <!-- other head & CSS stuff -->
      
          <script src="critical.js"></script> <!-- (only if needed) -->
          <script defer src="tracking-and-conversion.js"></script>
          <script defer src="page-specific.js"></script>
          <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
          <script defer src="jquery-dependent.js"></script>
      </head>
    3. Minify any not-already-minified JavaScript, like product.js, ajaxshipping.js and other page-specific files.

    4. Remove magiczoomplus.js from any pages that don't use it.

  5. HTML

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

      HTML
      <link rel="preconnect dns-prefetch" href="https://fonts.gstatic.com" crossorigin>
      <link rel="preload" href="/fonts/glyphicons-halflings-regular.woff2" as="font" crossorigin>
      <link rel="preload" href="/img/header-logo.svg" as="image">
    2. Add a lang="en" attribute to the opening <html> tag.

    3. Remove all instances of type="text/javascript" and type="text/css" and any commented-out code or file references.

    4. Replace <img> name attributes with IDs and add alt="..." attributes where missing.

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

    6. Facebook <noscript> snippet:

      • Move from the <head> to the <body>.
      • Add an alt="" attribute to the <img>
      • Remove the line break from the src.
    7. All together, the new HTML structure for resource hints, CSS and JavaScript mentioned above:

      HTML
      <head>
          <!-- other head stuff -->
      
          <!-- resource hints -->
          <link rel="preconnect dns-prefetch" href="https://fonts.gstatic.com" crossorigin>
          <link rel="preload" href="/fonts/glyphicons-halflings-regular.woff2" as="font" crossorigin>
          <link rel="preload" href="/img/header-logo.svg" as="image">
      
          <!-- critical CSS -->
          <link rel="stylesheet" href="critical.css">
      
          <!-- non-critical CSS -->
          <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700&display=swap" media="(max-width:1px)" onload="this.onload=null;this.media='all'">
          <link rel="stylesheet" href="non-critical.css" media="(max-width:1px)" onload="this.onload=null;this.media='all'">
      
          <!-- no-JS fallback -->
          <noscript>
              <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700&display=swap">
              <link rel="stylesheet" href="non-critical.css">
              <link rel="stylesheet" href="no-js.css">
          </noscript>
      
          <!-- JavaScript -->
          <script src="critical.js"></script> <!-- (only if needed) -->
          <script defer src="tracking-and-conversion.js"></script>
          <script defer src="page-specific.js"></script>
          <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
          <script defer src="jquery-dependent.js"></script>
      </head>
      
      <body>
          <!-- potentially few or no inline <script>s -->
      </body>

Questions? Need extra help?

Brandon@FrontMend.com