Optimize Page Load Times

17 Tips to Optimize Page Load Times

In 2010, Google announced that it would begin to use page load and site performance as a ranking factor. In the years since, it’s become unclear to what extent Google is incorporating page load speeds into their ranking algorithm. Several studies have been conducted, suggesting that page load times have little to no correlation to increasing search rankings. It is clear, however, that Google is keeping an eye on page load times, as Google Analytics and Google Webmaster tools allow you to track page load speeds over time.

Still, smart marketers are concerning themselves with optimizing their clients websites, because it’s the right thing to do. Slow page load times can cause potential customers to try one of your competitors, or cause leads to abandon your site altogether. You only have a second or two to capture your readers interest, and if they are staring at a white screen, your bounce rates will soar.

In order to fend off slow page load times, here are a few pro tips to optimize your page for response time and load speed.

Who’s the Boss Fan Fiction

All Websites

1. Upgrade Your Hosting

When it comes to choosing a hosting providing for your business’ website, the cheapest option is usually the front runner – especially on small budgets. There is nothing wrong with choosing GoDaddy, Network Solutions, BlueHost, HostGator, or other cheap shared hosting providers – there is a reason they are successful. They offer hosting with good up-time for a very reasonable price, sometimes as low as a few dollars a month.

The problem with choosing one of the cheap hosting providers is that you are most likely on a shared host, and the server itself isn’t the greatest piece of machinery either. The cheap hosting companies are great options for small sites, but when you get into larger sites, or apps that require a lot of server-side processing, you’ll run into some slow response times.

Large WordPress sites (and other CMS’ for that matter) are known to be resource drains on servers, and can require a ton of processing to render a page. If you run a WordPress site, we recommend looking at WP Engine or Pagely, as they are well known for having great server response times and WordPress page load speeds.

By upgrading your hosting provider (or upgrading your server), you’ll be able to greatly improve server response times, and potentially even page load speeds.

2. Optimize Images

Media assets will often make up most of your pages file size. Fortunately for us, they are the easiest thing to optimize. It’s not uncommon for a web designer to export high resolution versions of the media assets for a site, and not realize the page load burden they are placing on site visitors. When you as a business owner, or your designer, are looking at the site – you often have the media assets cached in your browser, so your page load speeds are artificially fast. A good way to test your browser speed from a brand new visitors perspective is to clear your browser cache and load the page, or try a different browser.

It’s not uncommon for images to be saved or exported with a lot of unnecessary information that is artificially bloating the file size. Unused colors, meta data, and much more are common causes of this. TinyPNG is a tool that strips out unwanted colors and exports the image back at its original quality and resolution. The file size savings are amazing, and you’re not sacrificing any quality.

Image Optimization

Some tools for image optimization:

3. Use a Content Delivery Network (CDN)

A CDN is a high-performance network of servers located at various locations across the globe that replicate the static assets of your website and serve them to visitors in the most efficient way. The CDN will figure out on the fly how to quickly and efficiently server up images and other assets to visitors based on their location and current bandwidth usage of the server in their network.

The best part? You as the business owner don’t have to worry about how any of this works, you can just reap the benefits.

A CDN is a great addition to any page load optimization strategy, but if used alone you won’t notice significant page speed improvements. CDNs should be used as an important piece in a larger sped optimization plan.

Here are a few well known CDNs you can take a look at.

4. Use Sprites

It’s not uncommon for sites to have different variations of logos, or tons of icons in a navigation or on a sidebar. The fact of the matter is that each time you load a page, you are pulling down each asset individually, and likely making more server requests than you need to be.

By combining images into one image file, you’ll have created a sprite. You can then use CSS to position these images so the only part of the image that displays is the portion that you want. It can get a bit tricky if you’ve never worked with sprites before, but good web designers and developers use them all the time.

In fact, you might not even realize that we use a sprite on our homepage.

Speaking of reducing server requests…

5. Reduce HTTP Requests

While we’re on the subject of reducing HTTP requests, it’s time you optimized your Javascript and CSS files. If you were to view the source of the average website, you would most likely fine multiple Javascript files and CSS files. Is it really necessary to make a server request for each one?

By combining your Javascript files into one script, you’ll be able to save space on the combine file size of the space, and reduce your requests down to just 1. The same goes for CSS files. Does the average visitor to your site care that your scripts are coming from six different files? Unless you have web developers visiting your site with great frequency, we highly doubt that anyone will even know the difference.

If you choose to go this route, we also suggest that you keep a staging environment where you have the scripts and stylesheets separate. This will make it easier to read and update in the future.

6. Minify Javascript, CSS and HTML

So now you have all your scripts in one file, and all your styles in another. It looks kind of messy, and the files are massive. What can we do about this situation? Minification, of course!

If you’ve ever seen a minified version of a Javscript file, you know that it’s incredibly hard to read. In fact, if you’re not a Javascript expert, you would be pressed to understand much of what is going on. Your average visitor won’t know the difference, and the browser will process the file the same either way – so you really have no excuse to not minify your files.

Here are some tools to minify your files.

It is extremely important, however, to keep the original versions of your scripts and stylesheets. If you need to update a script or modify some CSS, you’ll want to do it in the original version. It’s easier to read, and you can put comments so you can keep track of where you are, what you’re doing, and when you’re doing it. When you minify a script or stylesheet, it essentially transforms into the bare-minimum the browser needs to process the markup and serve it to the visitor. For a staging or development environment, you’ll want to use the unminified versions of the files.

7. Place CSS at the Top of the Page

We never want visitors to see unstyled portions of your website, even if it is just for a split second. By loading the stylesheets first thing by placing them in the head section of your web page, we make sure that your visitors always see the web page are we intended them to.

8. Place Javascript at the Bottom of the Page

Javascript, on the other hand, is usually used for functionality and validation. Because of this, it’s often not required to be loaded before the text and assets on the page – so we can load it in the footer.

It’s also very common for Javascript to require the rest of the page be loaded before it’s processed, so there is even more incentive to load the script in the footer.

There are certain situations that would require a script to be loaded at the top of the page (such as some third party tracking scripts), so this isn’t necessarily the case for all Javascript, but in general it’s a good idea to load scripts last.

9. Take Advantage of Browser Caching

The word “caching” scares some people who aren’t familiar with it, but essentially all it means is that the browser will store a local copy of your files and assets so it can grab the files from a local directory rather than making a server request for them. It makes return visits to sites quicker and more efficient for the visitor, and reduces bandwidth usage for our servers.

You can leave it up to the browser to handle the caching for you, or you can modify your .htaccess file and tell the browsers what to do.

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/html A3600
    ExpiresByType text/css A3600
    ExpiresByType text/plain A3600
    ExpiresByType application/x-javascript A3600
    ExpiresByType application/pdf A3600
    ExpiresByType image/bmp A3600
    ExpiresByType image/png A3600
    ExpiresByType image/gif A3600
    ExpiresByType image/jpeg A3600
    ExpiresByType image/x-icon A3600
</IfModule>

This above code goes directly into your htaccess file, does a check to see if the mod_expires module is activated, and if so – sets the cache to 1 hour (3600 seconds).

10. Avoid Redirects

Redirects are a great way to point old and outdated content at new content, and there are plenty of situations where they are required. There are, however, a handful of situations where you would want to try to avoid a redirect, as it will add an unnecessary step in your visitors path to your content. Watch out for these situations.

  • Linking internally to a non-www version of your webpage when it requires a www version. (http://example.com vs http://www.example.com)
  • Linking internally to a sub page or sub directory but forgetting the trailing slash. (http://example.com/sub vs http://example.com/sub/)
  • Linking internally to a page that has multiple redirects before reaching it’s final destination.

11. Avoid Inline Javascript and Styles

Lots of designers and developers will use inline styles and script tags to make quick CSS and Javascript fixes, respectively. Doing this every once in a while won’t be so bad, but doing this over and over again can add a lot of unnecessary code to your pages.

Whenever possible, add your styles and Javascript to your existing CSS and Javascript files.

12. Optimize Server Side Processing Scripts

If your site is built with a server-side language such as PHP, there will be some server processing required before a page can be served up. The server will process functions, and sometimes connect to a database to retrieve information before serving the file to the browser. Poorly coded PHP can add additional processing time that can easily be avoided.

If you have a developer build you a site, it’s a good idea to have a second developer take a look at the code to make sure that it’s properly coded, there are no security holes, and that it doesn’t need optimization. Even large platforms build on PHP such as WordPress and Drupal get updated frequently to make sure the code is performing at it’s peak efficiency.

13. Prevent Hotlinking To Your Media Assets

Lazy designers and developers will often link directly to your media assets on their own sites. It’s bad enough they are stealing your content, but they can’t even be bothered to host the asset themselves?

This little bit of code in your htaccess file will prevent your image assets from being served up on any domain other than the ones you specify. We include our own domain, and Google in this case – because Google displays our images in it’s image search. You would also want to include your feed if you use a third party feed like FeedBurner, or any other site that you allow to use your images.

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?inbounderish.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ โ€“ [NC,F,L]

WordPress Sites

14. Use a Caching Plugin

The two most common WordPress caching plugins are W3 Total Cache and WP Super Cache. These plugins do a great job of optimizing your site to reduce page load speeds. Is one better than the other? It’s hard to say. We’ve had great results with both, and it really comes down to which one you’re more comfortable using.

15. Remove Unnecessary Plugins

An often overlooked speed concern is the number of plugins that a WordPress site has installed. Uninformed designers and developers will use as many plugins as they can find to add functionality to their site, but what they don’t realize is that every time you add another plugin, you’re adding more server processing to every single page load.

What some business owners don’t realize is that many plugins are blatantly unnecessary. If you are installing a plugin for a one-off solution, you’re doing it wrong. Many plugins can be recreated in a theme by a talented developer, which eliminates the need for the plugin and reduces server processing. One or two plugins won’t make much of a difference, but once you get into dozens territory, you’re starting to create a significant problem.

We’ll run routine audits of our clients sites to see which plugins we can eliminate and replace with other solutions. Sometimes we end up replacing plugins that we suggested in the first place! There is never just one correct answer, and there is always room for optimization with WordPress.

16. Optimize your WordPress database

Have you ever taken a look at the WordPress database? With spam comments, post revisions, media assets – it can get out of control very quickly. Optimizing the database becomes more and more important the larger the site gets.

We recommend the WP Optimize plugin. Make sure you backup your database before running this plugin – better safe than sorry!

17. Replace PHP with Static HTML Where Possible

WordPress uses a lot of PHP to load navigation, sidebars, and much more. If your navigation menu is static and will never change, is it really necessary to have WordPress loop through a function to auto-generate your menu on every page load? Nope! Hard code that navigation!

We’ll even take this a step further. Not only is it a good idea to replace PHP with static HTML wherever possible, it’s also not a bad idea to replace a WordPress page with a static HTML page. If you have a static landing page that isn’t going to change, you could easily save this page as a static HTML file and bypass WordPress altogether. Eliminating all that server processing will surely cause the file to be served to your visitors much faster.

These are our favorite tips to capture your visitors attention right away by reducing page load time by any means necessary. Do you have any other tips or tricks you use? Let us know in the comments below!

The following two tabs change content below.
Founder at Inbounderish
Brad is a Minnesota based Web Developer and Inbound Marketer. He writes regularly about a wide variety of web technologies including WordPress, Programming, Marketing, and more.

5 comments

  1. Hi Brad,

    Well, this is an excellent post, indeed. So much so that by the time I got to the middle of it I got overwhelmed already, thinking there’s no way on earth I can do this on my own.

    According to what I see on Alexa ranking my sites (blogs) are “very slow.” I didn’t know that your hosting was affecting the speed of your site, however, it does make sense.

    For now I do control what I can, but I’m sure there’s quite some room for improvement. Thanks for those tips.

    I found your post a Viral Buzz by the way ๐Ÿ™‚

    1. Hey Sylviane, thanks for taking the time to look over the article. It can definitely be overwhelming! Most sites won’t need to do everything on this list, so I wouldn’t worry about trying to do all that on your own.

      As far as hosting affecting speed, I just migrated this site and a handful of others to a new host. I can personally attest to the speed improvements, I’m very pleased with the results. Larger sites often require more resources, so upgrading is often the easiest (albeit not the cheapest) way to improve speeds.

      If you ever have any questions, or want some advice, let me know!

  2. Some great tips here. I’m always on the lookout for ways to improve the load time and there are some very interesting ideas that I can implement here. Thanks a lot.

  3. hey! Brad thanks for this very useful tips. I’ve tired them on my wordpress site and some what the overall performance has been improved to measurable extent! Thanks and keep it up!

Leave a Reply

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