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.
-
General
-
Update the hosting/server to HTTP/2.
-
Add HTTP compression for SVG files.
-
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.
-
Remove reCAPTCHA resources (>300KB) from pages that don't use it and remove the
async=""
attribute from the reCAPTCHA<script>
reference, leaving only thedefer
attribute. -
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.
-
-
Images
-
Add sitewide lazy image loading.
-
Upload these optimized replacements for the homepage banner rotator and some template images.
-
In addition to the replacement images above, convert the homepage banner rotator to progressive loading:
- Update the Cycle2 rotator plugin with this version.
- Update the HTML of
.cycle-slideshow
to match this example.
-
-
CSS
-
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>
-
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.
-
Load other non-critical local CSS resources like minicart.css and magiczoom.css asynchronously as well.
-
-
JavaScript
-
Update the Google Analytics snippet to deferred loading.
-
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>
-
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 externaldefer
'd file or wrapping each one with an event listener to run after thedefer
'd external files:JS document.addEventListener('DOMContentLoaded', function(){ // existing inline JS snippet });
-
Minify any unminified JavaScript resources, like product.js, ajaxshipping.js and other page-specific files.
-
Remove magiczoomplus.js from any pages where it's not needed.
-
-
HTML
-
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">
-
Add missing
alt
attributes to<img>
s. -
Remove the nested
<form>
tag on product pages.
-