Speed is everything. Ok, maybe not everything, but with Google assigning a higher level of importance to mobile page speed in their recent algorithm update, how quickly your website loads has become an increasingly important factor in conversion rate optimization (CRO) and your overall website performance.
To give your site the boost it needs, we’ve outlined three easy ways to improve the speed of your website.
Choose Your Web Host Carefully
When selecting a web host, you want to make sure it has a built-in infrastructure that focuses on speed. If that foundation isn’t chosen accordingly, it could jeopardize any optimizations you attempt to make on top of it.
For instance, shared hosting is affordable, but another website’s traffic spike will likely affect your site. Virtual private servers may work to resolve this concern, but few website owners have the time and expertise needed to maintain them.
Thankfully, for a marketing website built with WordPress, there are options for laying the right foundation with a fast, reliable web host. With a managed web host, such as WP Engine or Kinsta, the web hosting provider builds and manages the server infrastructure in a way that caches static (unchangeable) and dynamic (changeable or personalized) content so your site loads quickly.
Beyond caching, features like WP Engine’s GeoTargeting, which uses cloud infrastructure to load your website based on where you are geographically, and Kinsta’s ability to rapidly scale based on the amount of traffic you’re getting, ensure that your website is delivered to your visitors quickly. Best of all, managed hosting means less required updating and maintenance.
Related Post: Guide to Choosing the Right WordPress Host
Minimize HTTP Requests
Consider the combination of files that make up a website as an asset. Every asset must be downloaded to your browser so you can you view it. This particular download requires something called an HTTP request. When assets are requested, such as images or scripts, your browser goes back to your web host to get it and bring it back to the browser to be rendered.
This is like flying round trip from New York to Los Angeles just to get a retrieve a single image. You’ll do it again for the next image. Then again for a JavaScript or CSS file. You’ll keep repeating the flight until all of the assets of your website are ready to be viewed.
But what if you could pack more than one asset into your carry-on for these round trip flights, reducing the number of unnecessary trips? Luckily, that is exactly what minimizing HTTP requests does. It combines files so there are fewer files to retrieve, and fewer files mean fewer round trips. Here’s how this can be done for two assets that are used to build websites: code and images.
By using a task runner like Gulp or a module bundler like Webpack, multiple JavaScript or CSS files can be combined together. Bonus points if you minify the code so it’s parsed (read) more quickly by the browser!
For images, something called an image “sprite” can be created by combining several images into a single image. Some good examples of sprites are icons or images that have manipulations required outside of what CSS is capable of doing.
Of course, there are limitations. Not all images can be combined, while other images may be poor choices due to their need for regular updates. Just remember, the goal here is to reduce where you can.
Ultimately, fewer files require fewer HTTP requests, and fewer HTTP requests increase your website speed.
Compress & Optimize Images
The “heaviest” part of a website is generally the images, and there are a couple of key steps that can go into optimizing them. As you’ll notice, image optimization is a delicate dance of reducing the file size to contain as few bytes as possible while still preserving image quality.
First and foremost, it’s important to choose the correct image file format based on the content in the image. This is key in ensuring your image is properly optimized. Then, after the image is saved, compressing your images with tools like ImageOptim, WP Smush, or some more advanced compression tools will help to reduce file size.
Next you’ll need to consider which sizes your image will appear on your site and on what devices. We wouldn’t want to display a desktop image on a mobile device because mobile speeds are commonly far less than what we experience in a desktop environment.
Fortunately, this is easy. Simply save the image in the same aspect ratio but in smaller dimensions for mobile users. Thanks to recent developments in HTML, the srcset attribute can be used to tell the browser to display the correct image for the correct device.
Smaller images mean fewer bytes, and fewer bytes mean your website will load more quickly.
Test, Test, Test
Factors like internet traffic and browser caching can make it difficult to determine if a website loads the same for all visitors. Conveniently, there are a number of tools that can help test website speed. Google’s Pagespeed Insights, GTMetrix, Pingdom, and Web Page Test make it possible to run an outside and independent test to see how a website is performing.
While a lot of factors go into speed, having the right host, minimizing file requests, and optimizing your images can help tremendously to speed up your site and a make for a better user experience for your visitors.
Looking for more ways to provide a better user experience and increase conversion rate? Check out our conversion rate optimization services.