On-Page SEO: Website and Page Speed
On-Page SEO: Website and Page Speed
Before we get started here is an audio introduction to this portion of the guide, hope you enjoy!
Please be advised: many of the topics we talk about below should only be performed by a professional web developer. Even experienced users have irreversibly damaged websites by making even small changes. Always backup your website and database before making any changes, regardless of how small you think it might be.
This is another aspect of on-page SEO that Google has gone on record saying it is an official ranking factor. Most users become annoyed if a site takes 2 or more seconds to load. Not only will a slow page frustrate your visitors, it might deter Googlebot from crawling your website as well. If Googlebot has to wait and wait for a page to load, it might just leave and try again later. With that said, it is imperative that your pages load in 2 seconds or less. This is no easy task, with modern day plugins, frameworks, and widgets it is easy to bog down your website with all sorts of add-ons. Add in high definition video and images and its easy to add lots of size to a page. And when there is a large page, there is usually a slow page.
Also note that this is really a beginners guide to website and page speed optimization. There are many other guides out there that focus on beginner aspects or advanced / expert guides. Our hope is to fall somewhere in the middle with this chapter in our on-page SEO course.
The goal here is to reduce the amount of load time by any means possible.Since there are so many different types of web frameworks these days, we aren’t going to get too specific in this guide. For example if you are a Magento user you would optimize your website much differently than you would a WordPress or Drupal website.
If you are a WordPress user we wrote a comprehensive guide on website speed for WordPress.
How to properly analyze your website for site speed?
How to properly analyze your website for site speed?
When thinking about website speed optimization there are really 2 main aspects: your overall site speed (e.g. hosting, CDN, dns, SSL) and your page speed (images, scripts, plugins, etc). If you truly want to up your on-page game, you need to run a speed test on every page on your site. While this might not be possible for large eCom sites, you can do 1 page or product per category perhaps.
Our personal favorite way of analyzing page speed is using Pingdom. Pingdom has been around forever now, and does a really good job at testing the site and displaying a report that is easy to understand. Page speed is broken down into a few different parts:
- dns speed
- server speed
- page size
- number of requests
- external resources
My preferred method is to break each part down and optimize them one by one, then go back and do things like add in gzip compression, caching, etc.
Gzip Compression
Gzip Compression
This is a very simple tip that is oftentimes overlooked by most SEO’s. Note that the below implementation can only works for Apache servers. This can also be done for other webservers including nginix, IIS, and more.
On most websites this is as simple as adding a few lines of code to your .htaccess file:
If you get errors with that, or want to try something different you can try this method instead, but don’t use both:
If you are running nginx try this for gzip compression:
As you can see in this custom script, certain MIME types are excluded such as images, being that you don’t want your server to be the one handling image compression. Don’t worry, we’ll get to images a little later within this section.
Reduce HTTP requests
Reduce HTTP requests
The less your browser has to ask a server for something, the faster its going to be. Let’s consider this scenario:
Think about a waiter at a restaurant. If you put in an order for a glass of water, most likely they will come right back for it. But what if you put in an order for a grilled chicken breast, french fries, and an scotch on the rocks. That order is goign to take much longer not only because it takes longer to cook but because they have to carry more items back to your table.
If you do a speed test on any website, one of the first things you’ll see is “number of requests.” A request can be almost anything:
-
- an image
- a CSS file
- an HTML file
-
-
- a font
- an external resources
- etc
-
A few quick ways to reduce requests is to eliminate any extra fluff in your website such as unnecessary plugins, combining images into sprites, and getting rid of external resources you don’t need.
Remember, one tiny line of code referencing an external site or script could be the death of your website. On my personal website patrickcoombe.com, I’m currently seeing some extremely high load times. The reason why? I’ve got a 4Mb+ video loading on my homepage!
While its on a fast server, low number of requests and has a high performance grade that large video is murdering the overall load time. In this case, I’m probably going to kill off the video in favor of the load time.
Premium DNS
Premium DNS
Quite often when doing a website speed test, we find that the slowest part is the DNS lookup aspect. This can account for as little as a few milliseconds (best case) or several seconds, worst case. Many hosting providers use excellent DNS servers optimized for the modern web, while others are nothing short of shoddy.
Checkout these 2 websites, one has premium DNS and waits 0 seconds to lookup, the other one standard DNS and takes 120ms to lookup.
In the grand scheme of things a few milliseconds might not sound like a huge deal, but it is. Page speed optimization is the art of optimizing multiple different parts of the website. It would be nice if you could just buy better hosting and have your website speed up. In some cases just getting a better hosting plan will speed your site up, but there are so many different factors at play.
If you want a sure fire way of improving the load time of your overall website, you might want to look into premium DNS. In addition to the speed benefits, often times you’ll also get added redundancy and additional security.
If you are looking for a “premium DNS” provider, here are a few suggestions that we’ve used in the past:
-
-
- Cloudflare
- Amazon’s Route 53
- Namecheap Premium DNS
-
There are droves of more options, but again these are the ones that we’ve had experience with and can attest will give you a nice bump in speed
Faster Hosting
Faster Hosting
At the very least, if you aren’t sure what you are doing you can just pay for a better hosting plan and that will most likely speed things up. Look for plans that puts your website on an SSD, with more RAM and more processing power. Stay away from shared hosting plans where you might be sharing a network with 100’s of other websites. Here is one website that I know is on shared hosting that has over 300 “neighbors.”
Image illustrating an example website on a shared web server, and all of its neighboring domains.
That means there are 367 websites sharing 1 server. In all actuality there maybe more. Sometimes there are multiple IP’s per server so in this case this number might be multiplied by 2 or more.
At the very least upgrade your website to a VPS where you have a large chunk of a server instead of a tiny piece.
If you are looking for recommendations of hosting providers, here are the hosting providers we recommend the most:
Optimize your images
If you aren’t great with Photoshop, don’t worry there are some options. At the very least, run all of your images through Tinypng before uploading from your server. You can see in this example how an image that was over 21kb was shrunk by 65% to 17kb. Imagine if everyone did this how much faster the web would be.
-
-
- Google Cloud
- Amazon Cloud
- Liquid Web
-
-
-
- Rackspace
- Digital Ocean
-
There are some people that hypothesize that using Google Cloud can give you an additional boost. It isn’t one of those “if I use AdWords I’ll get an SEO boost” theory that is unfounded, this theory has more of a leg to stand on. The fact is, Google Cloud has servers that are ridiculously fast, with an enormous reach, tons of “edge nodes” in their CDN, new equipment, and some of the best engineers on the planet. Either way, I wouldn’t put all of your eggs in that basket but I definitely see more and more SEO’s looking to Google Cloud for their hosting provider.
If you are looking for a fully managed solution, you can check out WPEngine. I haven’t used them personally but know a lot of people who have. If you are going to venture into the world of cloud hosting by using Google or Amazon, be prepared for a huge learning curve. While they do have nice web front ends, there is no cPanel installed by default.
If every site took a few extra steps to optimize and compress their images, the world wide web in general would be a much faster entity.
Size your images correctly
It isn’t uncommon to find websites that use horrible practices when using images. In addition to compressing your images, make sure you are using the right size. Don’t use an image that is 3000×3000 pixels when a thumbnail size will do. We see this a lot in WordPress websites. We’ll find background images that could be tiled at 25px square, but instead are 1000px. Or a photograph in a small div that should be
In addition to Tinypng there are many server side plugins that you can use to do this work for you. The way these plugins work is they basically serve an optimized version of he image instead of the original.
If you have a WordPress site, there are a number of plugins to do this for you. EWWW is one of our personal favorites, but many folks prefer Imagify as well. Both do a great job of compressing and optimizing images.
One word of caution: be careful if you have a website with high end photos, such as a wedding photographer or someone with high quality gallery images. I wouldn’t auto-compress or optimize those images. Most of the time you can’t tell the difference with certain illustrations, but with high end photos they can reduce quality in a noticeable way.
SVG and WebP
If you can, start thinking about implementing your images as SVG and WebP wehenever possible. WebP is a new image format developed in part by the folks at Google. That should be a hint you should use it. From their website they claim that lossy WebP images are on average 26% smaller than PNG.
CDN’s
CDN’s
A CDN is an extra service you can add on on top of your existing hosting. We talk about CDN’s a little bit more within our server optimization portion of our guide. In short, a CDN provides a shorter path between your website visitors and the files on your server. Essentially a CDN is a copy of your server cloned in multiple locations throughout the world.
There are many CDN providers out there. Our website for instance uses MaxCDN while many other websites use Amazon or other providers.
My advice to people about CDN’s is this: if you are at he point where you have enough visitors where most of the time there are more than one visitor on your website at any time, it is time to start thinking about a CDN. If however, you only get 3-4 visits every hour a CDN really won’t help that much.
Leverage Browser Caching
Leverage Browser Caching
When you visit a website for the first time, you need to load all of that content from the server. When you go back and visit a second time chances are your browser will have a lot of those images and content cached on your website. By leveraging browser caching, you are essentially instructing Google on how you want it to cache the files on your server. Here is an example code snippet that you can add to a Linux / Apache server to enable caching. These values can be changed depending on your needs:
If you have a website that never changes, the values really should be as long as possible. If your website updates frequently, for instance if the images on your blog changes often then perhaps that section should read “1 week” or even “2 days’ depending on your situation.
Like most aspects of website speed, there is a “premium addon” for caching as well. Amazon ElastiCache, Cloudflare, and Akamai all offer premium addons for website caching. Deeper down the rabbit whole we go.
Database Optimization
Database Optimization
If your website uses a database, chances are its got some extra “fluff” in it. If you’ve got some experience with your database, get in there and start deleting / optimizing. If you don’t find someone that does. If you are a WordPress user there are a number of plugins, my personal favorite is “WP Optimize” you basically run it and it gets rid of anything extra that you don’t need, and optimizes the rest.
As with most aspects of website speed, the bigger the size of the entity, the slower it will load. Regardless of the database, content such as:
-
-
- spam comments
- post revisions
- trashed content
- uninstalled plugin garbage
-
Could and should be optimized i.e. deleted. There are many ways of optimizing your database, but it all comes down to what CMS or eCommerce framework you are using.
Like other aspects of on-page SEO, there is a premium or paid way to optimize your database. For larger sites or sites that get a lot of traffic, you might want to look into hosting your database off-site. Premium database hosting options include:
-
-
- Google Cloud SQL
- Amazon RDS
- Rackspace
-
These services have servers that are optimized for high traffic and have OS images made just for databases, so you know you are getting the best of the best.
Combine Resources
Combine Resources
Many site speed guides recommend combining CSS or JavaScript files, but there are many other things you can combine as well such as images (sprites) and much more. By combining resources you load much less content and minimize your HTTP requests.
This is normally a very arduous process but in the end you will be rewarded when you see your site loading zippidy split.
DNS Prefetching
DNS Prefetching
Another small snippet you can add to your site is the rel=”dns-prefetch” addon. Basically what this does is takes care of the dns lookup before the page loads, which can help speed up the page that is currently loading.
This really only makes sense if your site loads resources from multiple hosts / domains. For instance when my personal site loads, it fetches our analytics from another domain, fonts, css, javascript. All of that can be pre-fetched to help move things along.
This is yet another method you can implement to help speed up your site and hopefully increase your on-page SEO game.
HTTPS / SSL
HTTPS / SSL
Just want to start out by saying that HTTPS isn’t in and of itself a performance improvement. We can cite countless blogs that argue this case from professional web developers.
This is kind of a touchy subject, as many people believe that implementing HTTPS on a website can actually cause load issues. Our experience is that properly served, an HTTPS enabled website can load even faster than a normal website with HTTP2 / SPDY enabled. Again this is under the right circumstances.
The fact is, it could just as easily slow down your site as it can speed it up, so know that.
Be Smart About Things
Be Smart About Things
Don’t go wrecking your site with insane plugins that load 5 styles heets. Always weigh the pro’s and cons of new addons. Always ask the question, “do I really need this” or “can this be done with a few lines of code instead of a plugin?”
As time goes on you’ll learn more about website speed and your site will thank you for it!
Get Social!