A Beginner’s Guide to Website Speed Optimization

A Beginner’s Guide to Website Speed Optimization
Crakrevenue-website-speed

Webmaster

Written by

Mike

PUBLISHED ON

October 26, 2018

Category

Webmaster

Before diving into the adult affiliate space, I worked as a web developer for big corporations. While these companies had different objectives, they all had cause to care deeply about how quickly their websites were loading for customers. With our sites, adultcamreview.com and pornexplosion.com, we’re trying to bring modern web engineering to the adult affiliate world. In this article I’ll explain the basics of how to make any website run faster so you can better serve your customers and supercharge your conversion.

Why should you care about website speed optimization?

The most important reason is customer experience. When your pages take a long time to load, your customers are going to bounce. About half of all web users expect a site to load in two seconds or less, and 40% will bounce before three seconds are up. What’s more, the same study by Akami found that 79% of users are unwilling to come back to a site after a bad experience. If this all seems a little aggressive, try to notice your own behavior as you browse - especially when you’re hunting for something to buy. These statistics have been confirmed many times over, and the results are clear: speed is critical to user satisfaction and conversion.

If you’re targeting SEO traffic, then speed is important to your search rankings as well. This year google began punishing sites with long load speeds - especially for mobile users who will have a slower connection on average. Experts expect google will continue to encourage faster load speed in the future. Google also cares about your PageSpeed test scores, which tell google about your code optimization - more on that later.

What’s my website load speed now?

To figure out how you’re currently doing on your raw speed, you can use Google’s developer tools to get a snapshot of how everything is loading. In google chrome, open up the dev tools then click on the network tab. Now right click the refresh button and select “hard reload”. You’ll see an interactive timeline of which web elements are loading when. At the bottom of the timeline you’ll get a summary. The critical element, called “Load” is highlighted in red. This is really the one you care most about. This is the time it takes between a customer clicking on your site and getting what they want to see.

The Network tab in Chrome’s dev tools can tell you extremely detailed information about how many files you’re loading, how long they’re taking, and what order they’re loading in. All this information is important when determining how to increase load speed.

Google PageSpeed Vs. Load Speed

There are a couple common misconceptions about the Google PageSpeed test. The first is that it measures load speed - it doesn’t! The PageSpeed test looks for general best-practices in the order and size of your resources. It tells you if your assets are loading in the optimal order for speed, and if they’re the optimal size. This means that, hypothetically, you could have a very sluggish page that loads in 12 seconds that still scores very well. This page would be annoying and terrible for your customers (and your bottom line) but google would still give it a good score. In a case like this, a page might be loading way too many resources - actually a very common occurrence in older websites that have accumulated unnecessary files.

The second common misconception about the PageSpeed test is that you need to get a perfect 100. This is going to be impossible, and even undesirable, for most websites. All you want to do is make sure the test passes you in the “green” zone - between 80 and 100. Getting a perfect 100 often means creating an FOUT, which is when the unstyled text of a page loads first, and then becomes styled, creating a strange flashing or stuttering - way more off-putting to a customer than taking an extra couple tenths of a second to load.

How do I go faster?

Even for a web developer like me it’s easy to get lost in the weeds with load speed. When you dig into the details it can feel like a complicated and overly-technical mess. Here’s are the basic points you should remember:

  • Serve up only the resources your page needs - Do you really need that javascript file on every page, or just on the few that are using it? Are you using every image, CSS file, and script that’s taking your customer’s time to download? If not, take out those calls!
  • Use a fast, responsive web host to serve them - Even if you do everything right with your website, the customer is going to have to download all the info they need to render your page from the host server. If you’ve got a good host, this process should take less than 200 ms. Use this test to see how long it takes customers in different parts of the world to contact your host server.
  • Make sure they come in the fewest number of files possible - If you’re loading 5 separate javascript files for a single page, maybe you can use include statements to consolidate them into a single file. The same goes for your CSS style sheets.
  • Local is better - instead of referencing your jQuery through an external script like this: <script type='text/javascript'

    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>. Download the file, save it within your site’s local file structure, then reference it like this: <script type='text/javascript' src='../my/javascript/location/jquery.min.js'></script>.

  • Make sure those files are as small as possible - Notice that in the example above, we’re using “jquery.min.js” - a minimized file. When you minimize a file you remove all excess whitespace and compress the file. This makes it impossible for a human to read, but much faster to serve on your website. You can minimize JS files, HTML files, images, and more.

Every time a customer loads one of your pages, they’re asking your host server for all the resources their computer needs to render your beautiful website. Your goal is to make this process as lightweight as possible. This translates to speed, which means conversions!

The exact methods to implement all these points is going to be a little different depending on your tech. If you’re not sure about the details - contact your programmer and let them know the speed target you’d like to hit. You want to do everything in your power to load each page in under 2 seconds.

What about Wordpress?

A lot of very successful affiliates run sites on WordPress. Not all of us are code wizards, and luckily WordPress has a bunch of free plugins that can help you get good scores in google pagespeed. That said, WordPress tends to be a little cumbersome. It’s got to support so much web functionality that sometimes it can drag. If you really want to get your WordPress site loading beneath that two second threshold, you may need some custom programming. But even without that we can make significant improvements.

Here’s the basics you should know to get a good pagespeed score and increase your overall

load time with Wordpress:

  • Optimize images - use the Optimus plugin to optimize the size of all your images quickly. With a single click inside the plugin you can compress all your image files.
  • Cache your files - site caching saves a version of your page resources that’s condensed and faster for clients to download. The KeyCDN cache enabler makes this

    easy!

  • Minimize file sizes - the Autoptimize plugin will minimize the size of your html and script files. It probably won’t shave a ton of time off your total speed, but google will be happy. That should be enough to get you started and get your PageSpeed scores up to a more acceptable level. But if you want to push things to the limit, check out this very thorough exploration of how to get a perfect Google PageSpeed score with Wordpress.

That should be enough to get you started and get your PageSpeed scores up to a more acceptable level. But if you want to push things to the limit, check out this very thorough exploration of how to get a perfect Google PageSpeed score with Wordpress.

Unanswered Questions

One of the tricky things about speed optimization is that the exact implementation is going to be a little different depending on your web tech and the needs of your website. For a site that serves a lot of images, you would prioritize getting a CDN (content delivery network) for image caching.

A site running on Ruby has different methods for referencing local files, and will have different web hosting options. If you’re not sure about how to proceed, feel free to drop me a line using the contact link on my websites. Even if I’m not an expert in your particular technology, I’d be happy to connect with other webmasters and point you in the right direction.

Thanks for reading, and may your sites be speedy!

From the blog

Discover more blog post about media buy, adult traffic and more.

VIEW ALL