Page Speed Optimization

Page Speed Optimization: Tips, Tools, and Techniques

A.J. Kmetz Web Design Leave a Comment

People are obsessed with speed. If you’re a car nut, you probably know the top speed of your favorite new supercars. Those into fantasy football can pinpoint the fastest player on their roster. MarioKart players know speed is the name of the game, at least until they hear the sound of a blue shell bearing down on them. When we’re not being entertained by speedy things, we’re looking for ways to speed up our tasks so we can get back to what we enjoy. So when it comes to digital marketing, why is page speed optimization so often overlooked?

Why Page Speed Optimization Matters

The hard truth is that people want to use fast websites. They might want your site to be fast even more than they want the fancy bells and whistles you implement on it. In fact, most users want websites to load in under two seconds. And because users are looking for fast websites, Google is too. Better speed is part of an effective SEO strategy and can improve your rankings. Don’t let slow web pages give your competition a free leg up!

But page speed optimization isn’t just about loading your site quickly. Visitors are more likely to interact with a site (potentially making purchases!) if they have a faster, better user experience. Speed can make or break a mobile website, too: varying wireless connection speeds can take longer to load a mobile site. That means you should be as fast as possible to offset slow connections and make loading easier on your mobile users.

Your Site Speed Toolbox

So how can you optimize your site for speed? Pop the hood of your website  – here are some tips, techniques, and tools for page speed optimization. We’ve included useful WordPress plugins, measurement tools, and links to more in-depth articles to help you better understand each of these tips.

Tip: Optimize images.

Images are one of the biggest drags on your site speed. But you can fix that. You can also leverage them to improve your search engine rankings.

Technique: Choose the right file size. File size and display size are two different things: a website might be displaying an image at 100×100, but if the image itself is actually 3000×3000, your website is loading a huge file just to waste all of that work for a tiny picture. Determine the size at which you would like to display your image. Then change the size of the image itself to match. You can use complex tools like Adobe Lightroom or basic ones like Microsoft Paint to do this.

Check out our guide to optimizing images for SEO here!

Tool: TinyPNG. This tool compresses the size of the image. It reduces useless background information without compromising the quality of the image itself. There’s really no downside to using it! Some other image compression tools include JPEGmini and Kraken.io.

Tip: Upgrade your hosting platform.

In the short run, a cheaper web hosting service may seem to give you the best bang for your buck. In the long run, it could be costing you in the form of poor page speed optimization.

Technique: Along with images, your site’s server can have a huge impact on your speed. Cheap hosting sites tend to save money by jamming a lot of websites into as few servers as possible – which is bad news for those looking for a speedy site. When deciding on a new web host, speed should be among your top factors.

Tool: aThemes ran in-depth tests on some popular WordPress hosts to find the fastest and most budget-friendly options. Check out their run-down here and find a speedy one at a price point you can afford.

Tip: Cache in on a CDN

If your site contains certain elements that are reused, it should only load them once rather than each time they appear, right? That’s exactly what caching and Content Delivery Networks are for.

Technique: Enable caching on your site through the .htaccess file… or ask your hosting service to do it for you. This file is complex and can be tricky to edit. WinningWP has a guide to help you edit this file if you’re brave enough to do so!

Tool: Find a good Content Delivery Network (CDN) to go with your hosting service. A CDN doesn’t replace a host platform, but rather creates a secure and fast means of transferring the data from the host to the user. Think of it as replacing a dirt driveway to your house with a concrete one. Here’s a list of the top CDNs of 2020 from TechRadar.

Tip: Preconnect, prefetch, and preload.

These are called browser hints or pre-browsing techniques. While they don’t improve the initial loading speed of your site, they do help internal pages load more quickly, improving navigation within your site.

Technique: The [preload] tag tells a browser that it should begin loading some of a page’s assets before its link is clicked. Preconnecting, on the other hand, helps prepare assets from another domain – which might include your CDN. Prefetching stores a page in the user’s local cache in anticipation of loading it.  This Geekflare article dives into the nitty-gritty of these browser hints.

Tool: Flying Pages is a WordPress plugin that uses a tiny JavaScript function to preload pages which are linked on a user’s screen, improving their load speed. It’s an intelligent tool, working within the detected confines of a user’s connection and server load. Pre* Party Resource Hints is another free plugin that can help you configure prefetch settings.

Tip: Streamline your site.

There are lots of ways to cut down on things your site needs to load before a user can interact with it.

Technique: Reduce HTTP calls. This gets a little bit complicated, but a site will run faster when it has to ask for fewer things in order to load. Start by merging your JavaScript files into a single file, and do the same with your CSS files. If any of your plugins load their own JavaScript or CSS files, either use their options to disable them from loading those files or determine whether you even need the plugins in the first place.

Tools: WP Super Cache is a free plugin that helps minimize the resources used in each file, thus speeding up the loading process. Use a tool like Font Awesome so your site will only need to load a single file for any icons.

Tip: Use HTTP/2

This new data transport protocol speeds up your website by improving the way a server sends files. The older protocol, HTTP1.1, creates a bottleneck of sorts in the page loading process.

Technique: Check with your hosting provider for options to implement HTTP/2. The CDN you choose matters here, too. Some offer HTTP/2 solutions, so keep this factor in mind as you select one.

The SEO experts at Yoast wrote up an in-depth explanation of this protocol, so if you want to really dive into the details, start there.

Tool: HTTP2.Pro allows you to test your site’s HTTP/2 capabilities. It’s free and easy to use – simply copy+paste your URL and it will tell you if your server supports HTTP/2.

Tip: Include the trailing slash in links

It may seem like an insignificant detail, but every millisecond adds up! Here’s what a site without a trailing slash looks like:

https://www.punchbugmarketing.com/digital-marketing-blog

Here’s the same link with the trailing slash:

https://www.punchbugmarketing.com/digital-marketing-blog/

Technique: A URL without a trailing slash causes a web server to make an unnecessary redirect, which takes just a little bit more time. By including the slash in any internal links in your site and external links pointing to your site, you’ll help servers load it a bit faster.

Tip: Test your speed!

We’re big believers in constant testing. By continually measuring your performance, you can determine where you’re doing well and where you need to improve.

Tool: Google’s Lighthouse tool is designed to help you improve the quality of your web page. It’s easy to use and understand, but still gives you thorough measurements of your website. You can run it easily through Chrome DevTools.

The Takeaway

Both users and search engine crawlers want to see fast web pages. That makes page speed optimization essential for any website looking to grow and attract new users. Speed may be overlooked all too often, but it’s a great way to improve SEO, UX, and conversion rates. To put it plainly, a faster site is a site that generates more traffic and revenue. So don’t camp in the slow lane. Use these tips to give your site a boost and outpace the competition!

Share on social:

Leave a Reply

Your email address will not be published. Required fields are marked *