In part 1 of our blog post series about site speed (“Why Is My Website So Slow?”), we talked about:
- why site speed matters,
- what can slow down your site, and
- how content gets from point A (its origin) to point B (your screen).
Now that we’ve got plenty of context, let’s get to some very practical steps you can take to help make your site load as fast as it possibly can.
Tip #1: Reduce, Reuse, Recycle. ♻
One of the best strategies for helping your site load as fast as possible is to lighten its load.
And the easiest way to do just that is to employ a tried and true method for a more minimalistic existence: Reduce, Reuse, Recycle.
Reduce
1. Reduce the number of external resources your page uses.
Do you really need all of those trackers (Google, Meta, TikTok, etc.)? Combine site scripts and styles into a single file.
2. Reduce the size of your external resources.
This could involve minimizing CSS and JavaScript, reducing image resolutions, and compressing images to more optimized file types, such as .webp instead of .jpeg. (We dive a little deeper below on image optimization.)
3. Reduce the number of fonts that need to be loaded.
Avoid loading an entire font if all you need is just one or two glyphs. Use variable size/weight fonts when they’re available so as not to load a separate font for each weight.
4. Reduce the number of plugins on your site.
Every plugin adds a certain amount of overhead in code execution and database fetches.
While it’s tempting to immediately reach for a plugin when a new feature is needed on your site, the quality of off-the-shelf plugins varies greatly and can have a tremendous impact on your server performance.
–> Consider having custom code written to provide just what you need without all of the overhead.
Reuse
Reuse styles, scripts, icons, and fonts on multiple pages.
All these resources will be kept in the user’s browser cache and will not have to be reloaded each time they visit your site.
Recycle
Choose a hosting platform that supports HTTP2—and make sure it’s enabled.
Why? Because HTTP2 is much faster and more efficient than HTTP1. And this is due to a recycling of sorts of established priorities.
- Going back to the telephone book analogy from part 1 of this blog post series, HTTP1 requires the user’s browser to hang up after each download, then re-look up and redial the number to get the next item. HTTP2 lets the browser keep the connection open for multiple requests.
- Additionally, HTTP2 allows developers to choose which content gets loaded first. For example, we can prioritize that header images load first before ads, providing a user’s preferred content first.
–> Not only do both of these benefits of HTTP2 improve page load time, they also improve a user’s perceived impression of how fast their desired content is being served to them. A win-win!
Tip #2: Write clean and optimized code.
Performant code on both the frontend (JavaScript) and backend (PHP) will reduce the number of CPU cycles needed to generate and render the content you’re requesting.
This includes avoiding unnecessary loops and optimizing database queries as much as possible.
–> All the caching optimizations will amount to nothing if you are delivering badly written JavaScript code to the browser.
Tip #3: Enable server caching for static pages.
Static pages are those where the content will be the same for all users at any given time, such as your site’s homepage or a blog post.
–> The purpose of the server cache is to reduce load and latency by remembering recent page fetches and serving them again.
As we mentioned in part 1 of this blog post series about server caching, this is so browsers don’t have to go through the effort of rebuilding the page from scratch (or, technically, from the database).
For websites we host on WP Engine, our team reviews the site before it’s launched and makes sure that the server side cache provided by WP Engine is aware of any dynamic pages and doesn’t attempt to cache them.
If your site isn’t hosted with us on WP Engine, then you might be tempted to drop in an optimizer plugin … but use caution.
I’ve seen several times where a client installs one of these silver-bullet plugins and breaks something on the site that they don’t notice until much later, such as:
- user content that should only be available to signed in users
- search widgets that fail to find new content
- pages displaying the wrong data
If you’ve already done the tips above and are still having performance issues, it could be helpful to use one of these optimization plugins—but only if you know what you are doing.
Tip #4: Add a Content Delivery Network (CDN).
Content Delivery Networks (CDNs) are designed to improve server performance by offloading requests and only bothering the server for things it can’t handle itself.
There are lots of CDN providers out there, and choosing the best one for you will come down to what type of site you have and your overall budget.
–> Bonus: CDNs also provide an additional layer of security to help defend against distributed denial of service (DDoS) and other attacks.
Tip #5: Embrace your power as an author.
Images and video contribute the lion’s share to the bandwidth load when opening a webpage.
Fortunately, there are plenty of ways for you to control what happens with these assets so that your site continues to be a speedy loader.
Upload the best-sized image
We totally get it—you want your site to look sharp, and the images are a major part of that.
However, your site can still look beautiful without having to upload full resolution images that you’ve taken with your brand new smartphone.
So, how do you know the best size of image to use on your website?
1. Get to know your basic resolution guidelines.
As a basic guideline, most users on the web are using devices that display 72 pixels per inch. However, there are some devices out there that use technology to increase the resolution by 2-2.5x.
For example, Apple’s technology (called Retina) can display images that are 2x the standard resolution. So, let’s use 200 pixels per inch (px) as our measure.
2. View your website on a large monitor.
Open your site on a really big desktop monitor and take a look at where your image is going to go. (For example, look at other pages or posts on your website.)
3. Determine how big those images are being displayed.
In most cases, you’ll find images are only being displayed at 3-4 inches. Some banner images or background images may be the full width of the monitor, but most images are much, much smaller.
–> Tip: Grab a ruler if it will help you measure.
4. Now you just need to do some math.
Assuming you’re on your largest monitor with your browser in full-screen mode:
If the image appears at 6 inches wide x 4 inches tall, you should upload an image that is 1200px by 800px (using our 200 pixel per inch measure).
6 inches x 200px = 1200px wide
4 inches x 200px = 600px tall
= 1200x600px
Now, here’s the rub: Your phone takes sooooo much better pictures than 1200x800px. Maybe you have a 12MP, 15MP, or higher resolution camera.
It doesn’t matter! The best approach is to avoid uploading images that are excessively large.
–> All those extra pixels add up to wasted bandwidth and slower site load speeds.
Before uploading the image to your site, use an image processing tool (like Photoshop or even the native tool that came with your machine) to reduce the resolution to only what your users will see.
Want a deeper dive into image optimization? Check out our post “How to speak Developer: Image Optimization” for more on image resolution and compression.
Be selective (and considerate) about videos.
Videos require loads of bandwidth, which means slower load times for your site.
- Try to avoid videos that autoplay or don’t contribute to the content on the page (such as background videos, video banners, etc.).
- If you must have a video, keep the resolution to just what you need.
- And if you really, really must have a video, consider being kind to your user by providing an option to stop the video from playing.
–> Pro tip: Don’t load and play videos until your user interacts with the video controls.
Leverage text. (We really mean it!)
Compared to video and images, all other content on your page is pretty insignificant (site speed-wise).
Text content compresses down to almost nothing. In fact, you could probably fit War and Peace into the same packet size as one of your 15MP images.
–> This is your license to go to town on text! Add as much content as you think your page (and your user) needs.
If you’re looking for SEO tips, we recommend Moz’s beginner’s guide to SEO.
Still think your site is too slow?
If you’ve tried everything above yet your site still feels sluggish, perhaps it could use a performance evaluation.
And as you may have guessed, we can help with that!
We’ve got tools that can help us determine what’s making your site lag and the best steps to speed it up. (And while we’re at it, we can also take a look at the overall health of your website).
–> Contact us for a website chitchat, and we’ll be happy to come up with a plan to improve your website’s performance.
This post is part 2 of a two-part series on site speed. Missed part 1? Get caught up with part 1 here!
Got a need for (site) speed?