It can be a bit annoying for a beginner to figure out where to start when attempting to speed up a website.
Here’s a few tips that I’ve picked up in my attempts.
testing sites:
First you’ll need a few ways to test your site’s speed.
The simplest of these is Pingdom which is a decent basic speed test.
An important one is Google’s own Pagespeed since they base their own judgements on it.
Be sure you check your sites performance on both mobile and desktop (especially if your trying for one of their grants).
But the most accurate (and unfortunately the one you can’t spam too much for free) is GTMetrix.
Register an account for free to get regular auto-tests and more tests per month!
Their Waterfall Chart is especially informative for figuring out what is holding up your page loading.
I use it to find scripts and images that could be loaded more efficiently.
Speeding up your site:
WP dark mode plugin
This plugin is one of my favourites.
Not only does it provide ways to make the site more readable: it also makes your site faster!
Regardless of if “Performance Mode” was turned on or off I have consistently found my sites performing far worse when this plugin is deactivated or uninstalled.
If that isn’t a good sign I don’t know what is.
preloading images
This is one of the most simple ways to speed up a page.
Simply take the path to whatever images are on a page (or just the ones at the top if your lazy loading everything off the screen).
Then add this code to the header of your site (with the href being the path to your own image obviously).
<!-- Preload Logo Image -->
<link rel="preload" as="image" href="/wp-content/uploads/2022/04/RCVDA-Logo-Just-Title-White-Outlines-950x191-1.webp">If your just trying to trick a speed test you can just do this for your homepage.
Though obviously you may want to add some conditions to prevent images being preloaded for pages that don’t contain them.
preloading scripts (including Google Analytics Tag)
If you are using scripts like Google Analytics be sure to preload them as well.
In the case of Google Analytics you should preferably do this within your footer.
Since otherwise you may be blocking the site from loading for a second.
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX99XX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXX99XX');
gtag('config', 'UA-99999999-9');
gtag('config', 'AW-99999999999');
</script>It’s also a good Idea to combine any gtags into a single script if you can.
async
When preloading something like an image another nice trick is to use “async”.
This downloads the file during HTML parsing and will pause the HTML parser to execute it when it has finished downloading.
<!-- Preload Logo Image -->
<link rel="preload" as="image" href="/wp-content/uploads/2022/04/RCVDA-Logo-Just-Title-White-Outlines-950x191-1.webp" async>defer
Another handy trick is using “defer” for things like loading fonts.
Defer downloads the file during HTML parsing and will only execute it after the parser has completed.
Defer scripts are also guaranteed to execute in the order they appear in the document.
<!-- Font Awsome -->
<script defer src="/wp-content/themes/underdavid-rcvda/fonts/fontawesome-free-5.14.0-web/js/all.js"></script>jetpack boost
Jetpack’s Boost add-on is relatively good at speeding up a website, especially when combined with other tricks such as preloading.
This plugin allows you to easily speed up your site by with this simple interface:
Jetpack stuff that might actually make your site slower!
I have found that for some websites the “Lazy Image Loading” offered by both Jetpack and Jetpack Boost can paradoxically cause a website to load slower.
This isn’t always the case but it has happened several times.
So be sure to check it’s actually helping your site.
Asset CleanUp: Page Speed Booster
When you have annoying plugins loading on pages that don’t need them like Contact Form 7 it ends up slowing down your load times.
This plugin allows you to prevent CSS and JS files being loaded both in bulk and on a page-by-page basis.
Make images smaller (maybe even make them webP?)
If your pages have a lot of images and are loading slow Google recommends making the image files smaller.
There are several ways to do this such as:
- Make the image physically smaller (if the image is too big to be shown at full size on most screens).
- Using an online image optimizer (which decrease the file size using lossy compression).
- Changing from PNG to JPEG.
Or you can go all in and change them to WebP format as Google recommends.
tricks to trick the speed tests:
- Preloading the top images of a page (using if statements based on media width) so that you only preload what you need to depending on what will be visible on the screen.
- Preloading your site icon.
- Disable Facebook Pixel and Google Analytics tags before tests to reduce outside influences!
- Just temporarily remove whatever is slowing your website/page down (if you just need to pass a test).
Conditional Preloading Of Images:
This is particularly useful if you are using lazy loading as you can avoid preloading images off screen.
This can be achieved with code like this:
<!-- Preload Top 3 Images On Home -->
<link rel="preload" as="image" href="/wp-content/uploads/2022/04/i1.webp" async>
<link rel="preload" as="image" href="/wp-content/uploads/2022/04/i2.webp" media="(min-width: 600px)" async>
<link rel="preload" as="image" href="/wp-content/uploads/2022/04/i3.webp" media="(min-width: 782px)" async>
<!-- Preload image which is not shown on smaller screen sizes) -->
<link rel="preload" as="image" href="/wp-content/uploads/2022/04/home-banner-transparent-1116x488-1.webp" media="(min-width: 669px)" async>And you can also prevent images being preloaded for pages other than ones containing the images like this:
<?php if (is_front_page()) { ?>
<!-- Preload Top 3 Images On Home -->
<link rel="preload" as="image" href="/wp-content/uploads/2022/04/i1.webp" async>
<link rel="preload" as="image" href="/wp-content/uploads/2022/04/i2.webp" media="(min-width: 600px)" async>
<link rel="preload" as="image" href="/wp-content/uploads/2022/04/i3.webp" media="(min-width: 782px)" async>
<!-- Preload image which is not shown on smaller screen sizes) -->
<link rel="preload" as="image" href="/wp-content/uploads/2022/04/home-banner-transparent-1116x488-1.webp" media="(min-width: 669px)" async>
<?php } ?>