Page speed is a critical factor in digital marketing today. It has a significant impact on:
- How long visitors stay on your site.
- How many of them convert into paying customer.
- How much you pay on a CPC basis in paid search.
- Where you rank in organic search.
Unfortunately, most websites perform poorly when it comes to page speed, and that has a direct negative impact on their revenue.
There is an almost infinite number of things we can spend our days doing as digital marketers, and there’s never enough time to do them all. As a result, some things get pushed to the back burner.
One of the things that seem to get pushed back most often is optimizing page speed. This is easy to understand because most people don’t truly comprehend the importance of this often overlooked detail, so they don’t see the value in investing time and money to improve it by a few seconds or less.
What may seem like an inconsequential amount of time to some marketers, including those who focus solely on search engine optimization, has been proven to be monumental by data from industry giants all the way down to our own analytics data.
I’ll assume that you’re like me and you want to maximize your results, and of course, your revenue, right? Then let’s get started in making your website faster than greased snot! (That’s quite a visual, isn’t it?)
1. Ditch the Budget Web Hosting
We’re all trying to save money these days, after all, those subscriptions to Raven, SEMrush, Moz, and all the other tools we use on a daily basis add up quickly. It’s almost like having an extra kid.
One way a lot of people try to save money is by choosing the kind of cheap shared hosting that crams as many websites as they can fit onto a server, much like a bunch of clowns piling into a single car. Performance be damned!
Sure, your website will be available most of the time as it would with most any web host, but it will load so bloody slowly that your visitors will leave frustrated without ever converting into buyers.
“But it’s barely noticeable!” these bargain shoppers insist.
Here’s the thing — it might be barely noticeable to you because it’s your baby and you love it.
But everyone else only wants to get in and get out of your website as quickly as possible.
People want to be on your site for just long enough to do what they came to do, whether that means to get an answer, buy a product, or some other specific objective. If you slow them down even a little bit, they will be likely to hate their experience and leave without converting.
Think about it like this:
Most people love their own kids unconditionally. But someone else’s kid screaming, throwing things, disrupting their night out at a restaurant? They hate that kid. It’s the same with your website.
How Much of a Difference Does It Really Make?
According to a study conducted by Amazon, a difference of just 100ms — a unit of time that a human can’t even perceive, was enough to reduce their sales by 1%. Walmart found similar results.
If that tiny unit of time has that much direct impact on sales, what kind impact do you think an extra second or more will have?
But it doesn’t stop there because how quickly (or slowly) your website loads also has an impact on organic search ranking and pay-per-click costs.
In other words, if your website loads slowly, you should expect your competitors who have invested in this critical area to eat your lunch.
Bottom line: skip the budget web hosting. If they are selling it like a commodity (based mainly on price) then they’ll treat their customers like a commodity too.
There are a lot of web hosts that are optimized for speed, particularly for WordPress websites, and some of them are priced similarly to the budget options.
So ask around, do some testing, and invest in a web host that will give you the performance to satisfy both your visitors and Google.
2. Reduce HTTP Calls
Every file needed for a webpage to render and function, such as HTML, CSS, JavaScript, images, and fonts require a separate HTTP request. The more requests made, the slower that page will load.
Now if you’re anything like most of the people I talk to, you’re probably thinking “Oh, I don’t need to worry about that, Jeremy. I know what I’m doing and I don’t add a bunch of bloated garbage into my website!”
That may be partially true. You may not add a bunch of bloated garbage to your website, but for 90+% of the websites that I encounter — it’s still there anyway.
That bloat isn’t there because the Bloat Fairy snuck it in while you were sleeping. It’s there because a majority of web designers, regardless of skill or experience, don’t make page speed a priority. The sad truth is that most don’t even know how.
Here’s where the problem starts:
Most themes load one or more CSS files and several JavaScript files. Some, such as Jquery or FontAwesome, are usually loaded remotely from another server, which dramatically increases the time it takes a page to load.
This becomes even more problematic when you consider the additional CSS and JavaScript files added by plugins. It’s easy to end up with half a dozen or more HTTP requests just from CSS and JavaScript files alone.
When you factor in all of the images on a page, which each require a separate HTTP request, it quickly gets out of hand.
- Merge JavaScript files into one file.
- Merge CSS files into one file.
- Reduce or eliminate plugins that load their own JavaScript and/or CSS files. In some cases, as with Gravity Forms, you have the option to disable them from being loaded.
- Use sprites for frequently used images.
- Use a font like FontAwesome or Ionic Icons instead of image files wherever possible because then only one file needs to be loaded.
3. Include the Trailing Slash
Omitting the trailing slash on links pointing to your website, whether from external sources (link building efforts) or from within your own website, has an adverse impact on speed.
Here’s how:
When you visit a URL without the trailing slash, the web server will look for a file with that name. If it doesn’t find a file with that name, it will then treat it as a directory and look for the default file in that directory.
In other words, by omitting the trailing slash, you’re forcing the server to execute an unnecessary 301 redirect. While it may seem instantaneous to you, it does take slightly longer, and as we’ve already established, every little bit adds up.
https://example.com (this is bad)
or
https://example.com/services (this is also bad)
vs.
https://example.com/ (this is good)
or
https://example.com/services/ (this is also good)
4. Enable Compression
Enabling GZIP compression can significantly reduce the amount of time it takes to download your HTML, CSS, JavaScript files because they are downloaded as much smaller compressed files, which are then decompressed once they get to the browser.
Don’t worry — your visitors won’t have to do anything extra because all modern browsers support GZIP and automatically process it for all HTTP requests already.
5. Enable Browser Caching
With browser caching enabled, the elements of a webpage are stored in your visitors’ browser so the next time they visit your site, or when they visit another page, their browser can load the page without having to send another HTTP request to the server for any of the cached elements.
Once the first page has been loaded and its elements are stored in the user’s cache, only new elements need to be downloaded on subsequent pages. This can drastically reduce the number of files that need to be downloaded during a typical browsing session.
6. Minify Resources
Minifying your CSS and JavaScript files removes unnecessary white space and comments to reduce the file size, and as a result, the time it takes to download them.
Fortunately, this doesn’t have to be a manual process because there are several tools available online to convert a file into a smaller, minified version of itself.
There are also several plugins available for WordPress that will replace the links in your website head for your regular CSS and JavaScript files with a minified version of them without modifying your original files, including popular caching plugins such as:
- W3 Total Cache
- WP Super Cache
- WP Rocket
It may take a bit of effort to get the settings just right because minification can often break CSS and JavaScript, so once you’ve minified everything, be sure to test your website thoroughly.
7. Prioritize Above-the-Fold Content
Your website can appear to the visitor to load more quickly if it’s coded to prioritize above-the-fold content — in other words, the content that is visible before a visitor scrolls.
This means ensuring that any elements that appear above the fold are also as near the beginning of the HTML code so the browser can download and render them first.
It’s also critical to include any CSS and JavaScript that are required to render that area inline rather than in an external CSS file.
8. Optimize Media Files
Because mobile devices with high-quality cameras are common and modern content management systems such as WordPress makes it convenient to upload images, many people simply shoot a photo and upload it without realizing that, often, the image is at least four times bigger than is necessary.
This slows your website down considerably — especially for mobile users.
Optimizing the media files on your website has the potential to improve your page speed tremendously, and doing so is relatively easy, so it’s a good investment of your time.
Optimizing Images
- Opt for the ideal format. JPG is perfect for photographic images, while GIF or PNG are best for images with large areas of solid color. 8-bit PNG files are for images without an alpha channel (transparent background) and 24-bit files are for images with an alpha channel.
- Ensure images are properly sized. If an image is displayed at 800 pixels wide on your website, there is no benefit to using a 1600 pixels wide image.
- Compress the image file. Aside from being the top image editing program, Adobe Photoshop has awesome image compression capabilities and starts at $9.99/month. You can also use free WordPress plugins – such as WWW Image Optimizer, Imsanity, and TinyJPG – that automatically compress uploaded images.
Optimizing Video
- Choose the ideal format. MP4 is best in most cases because it produces the smallest file size.
- Serve the optimal size (dimensions) based on visitors’ screen size.
- Eliminate the audio track if the video is used in the background as a design element.
- Compress the video file. I use Adobe Premiere most of the time, but Camtasia is a solid choice too.
- Reduce video length.
- Consider uploading videos to YouTube or Vimeo instead of serving them locally and use their iframe embedding code.
You shouldn’t stop there though because that only scratches the surface.
To truly optimize the media on your website, you need to serve the appropriately-sized images based on the screen size rather than simply resizing them.
There are two ways to handle this, based on the implementation of an image.
- Images within the HTML of your website can be served using src set, which enables the browser to select, download, and display the appropriate image based on the screen size of the device a visitor is using.
- Images placed via CSS – typically as background images, can be served using media queries to select the appropriate image based on screen size of the device a visitor is using.
9. Utilize Caching & CDNs
Caching enables your web server to store a static copy of your webpages so they can be delivered more quickly to a visitor’s browser, while a CDN allows those copies to be distributed to servers all over the world so that a visitor’s browser can download them from the server closest to their location. This improves page speed dramatically.
___
by Jeremy Knauff
source: SEJ
