5 Major Mistakes Businesses Keep Making with their Website’s Homepage Design
The Ultimate Website Speed Checklist · Use TinyPNG to optimise all of your website’s images or...
3
Transcript of The Ultimate Website Speed Checklist · Use TinyPNG to optimise all of your website’s images or...
The UltimateWebsite Speed Checklist by
1) Minify CSS
Ensure all the site’s stylesheets are concatenated into one minified stylesheet
View Source to see if there are any additional stylesheets being included by plugins and consider removing them and then moving these plugin stylesheets to the footer or your master CSS file
2) Minify JavaScript
Ensure all the site’s scripts are concatenated into one minified JavaScript file
View Source to see if there are any additional scripts being included by plugins and consider removing them and then moving these plugin scripts to the footer or your minified JS file
3) Optimise Images
Consider whether any images can be replaced with CSS (backgrounds, arrows, shadows etc.)
Combine fixed width background images into sprite images
Ensure no images are much bigger than they need to be in terms of their physical dimensions
Use “Progressive JPEGS” instead of “Baseline JPEGS” for content images (although the file size may be bigger, the way they load makes them seem faster)
UUse TinyPNG to optimise all of your website’s images or download your site’s optimised images from PageSpeed Insights using the link at the bottom of your report
Consider using the TinyPNG WordPress plugin to bulk optimise all images in the WordPress uploads folder
Consider deferring HTML images until the rest of the page has loaded
1Stephen Greig /
4) Leverage Browser Caching
If this warning is showing, make sure it’s only for external resources
If not, you’ll need to enable browser caching – this can oen be done using the appropriate code in your htaccess file, but can also be enabled server side – it’s worth asking your web host about this first
FFor external resources that are triggering this warning, see if you can amend the cache length in the external resource settings (TypeKit for example, provides an option to increase the cache length)
5) Enable Compression
If this warning is showing, make sure it’s only for external resources
If not, as above, you’ll need to enable compression on your server – this can oen be done using the appropriate code in your htaccess file, but can also be enabled server side – it’s worth asking your web host about this first
6) Eliminate render-blocking JavaScript and CSS in above-the-fold content
Move all scripts to the footer (including jQuery if there are no scripts or inline JS in the <head> or <body> that need jQuery included before them)
If you do have jQuery dependent scripts/code in the head/body, if they’re only on certain pages, use an if statement to move jQuery to the footer on all other pages
If you have a plugin including scripts in your header, consider de-registering them and then manually including the scripts in your footer or in your minified JS file
Add the deAdd the defer attribute to all of your non-critical scripts
If you have any other stylesheets apart from your master.css file, you should move these to the footer
If you have a plugin that includes stylesheets in your header, consider de-registering them and then manually including the stylesheets in your footer or in your minified CSS file
If those plugin files are only required by certain pages, use an if statement to include the files on those pages only
Identify the critiIdentify the critical CSS from your master stylesheet (the CSS required to render the “above-the-fold” portion of the page) and inline it in the <head> (leave this CSS in your master stylesheet as well)
Use loadCSS to then load your master CSS file (and any other non-critical CSS) asynchronously
2Stephen Greig /
6) Eliminate render-blocking JavaScript and CSS in above-the-fold content (continued)
Look at using a cookie to only include the inlined critical CSS on a user’s first visit, as the master stylesheet should then be cached for subsequent visits
Additional Suggestions
Defer iframes (such as Google Maps) until rest of the page has loaded (these can be deferred in the same way as your images)
If your site has a hero/background video, ensure this has been compressed as much as possible (whilst ensuring the video quality is still acceptable)
Add DNS prefetches for important external resources such as Google Fonts
Remove the unnecessary scripts and HTTP requests from the WordPress head
Consider whConsider whether the site is using any external resources that don’t need to be external (such as sliders etc.)
Strongly consider using server-side caching to deliver a cached, static page to the user, cutting out heavy server processing time (WP Super Cache is a good option for this if using WordPress)
Consider using “skeleton screens” to create the perception of a faster page
3Stephen Greig /
