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.
-
Server
-
Update to HTTP/2.
-
Add HTTP compression for SVG files and CDN-served resources.
-
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.
-
Sweep for unminified CSS & JS files.
-
-
HTML
-
Add to this line:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
-
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.) -
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">
-
Remove the nested
<form>
tag on product pages.
-
-
Images
-
Add accurate
width
andheight
attributes to all<img>
s. -
Add missing
alt
attributes. -
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.
-
Upload these optimized replacements for the homepage banner rotator and some template images.
-
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.
-
-
Videos
-
Update embedded
<iframe>
videos to on-demand loading.
-
-
Fonts
-
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>
-
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; }
-
Preload the Font Awesome WOFF2 file:
HTML <link rel="preload" as="font" href="/fonts/fontawesome.woff2">
-
Consider creating a custom version of Font Awesome that only includes the needed icons or replacing it with an SVG image sprite.
-
-
CSS
-
Remove fonts.css altogether.
-
Crete a custom version of Bootstrap, omitting unused modules.
For example, is the Glyphicons font used at all?
-
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.
-
Load other non-critical and JS-related CSS resources like minicart.css and magic-zoom.css asynchronously as well.
-
-
JavaScript
-
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>
-
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 removeasync
) 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 anddefer
as above. -
Move inline
<script>
s to the end of the</body>
, wrapping those that depend ondefer
'd files with an appropriate event listener:JS document.addEventListener('DOMContentLoaded', function(){ // existing inline JS snippet });
-
-