When we're talking about SEO people often miss one crucial step to improve our rankings, site speed. Or in the case of Google rankings, we're talking about PageSpeed. PageSpeed is a tool developed by Google to help webmasters get the most of their site, and has some helpful insights and recommendations to increase your score.
How does PageSpeed affect your SEO?
There are a lot of details here but in the simplest fashion, Google and other search engines want to bring the best websites to their customers. That mean serving up quality websites, and when you talk about a quality websites, speed is a major factor. Google will raise and lower your rank dramatically depending on the response time of your site. Google would rather server their customers sites that load in milliseconds than sites that load in seconds. When we're talking about PageSpeed, every little bit helps.
What is my site's PageSpeed score?
The first place you're going to want to start is with the PageSpeed Insights tool.
Here you enter in your website's URL and it will analyse it, give it a score, and offer recommendations to increase this score.
Let's start off with a clean install of a Drupal 7.36 site. A little background information. The server I am testing on is located in San Francisco, running Ubuntu 14.04 with a default nginx web server, and default MySQL database. Right after a basic install running the website through PageSpeed gives a mobile score of 69/100 and a desktop score of 79/100. Now that is a reasonable score, but if you want to give your site an extra boost in SEO rankings, you should be looking to achieve a score of 95+ for both desktop and mobile. I's a tough task but I am going to walk you through some quick wins, that can help you boost up that score.
Drupal Core Caching and CSS/JS Aggregation
Drupal a few options here that we can try to increase our PageSpeed score. Go to your sites performance page (admin/config/development/performance) and set the following configurations.
- Cache pages for anonymous users
- Cache blocks
- Minimum cache lifetime - 1 hour
- Expiration of cached pages - 1 day
- Aggregate and compress CSS files.
That is the most aggressive caching that Drupal can offer out of the box. After enabling all those settings, load up the site as an anonymous user to get the pages into Drupal's cache. Now go back to the Google PageSpeed Insights tool and run the test again. In my test, I was able to increase the mobile speed score from 69/100 to 70/100 and the desktop score from 79/100 to 83/100. Great we see an increase, however, it's not nearly enough to boost us up the SEO ranks. Time to take things a step further.
Using Drupal Boost to increase our PageSpeed
There are a lot of different things we are going to need to do to achieve the PageSpeed score of 95/100. For example, using memcache, varnish, gzip, advagg, and APC. This are all great tools to help increase our PageSpeed, however they all require some configuration and also server access to implement them to their full potential. So the first option we will look at is the Drupal module, Boost.
Boost offers Drupal site owners some quick wins with minimal effort, and they can be applied on shared hosting environments or virtual private servers.
- Install and enable the Drupal Boost Module
Check the status report (admin/reports/status) and make sure Boost is operating properly
Two common errors
- Core caching is still enabled. Go back to the performance page, and uncheck the box “Cache pages for anonymous users”
- The cache directory doesn’t have permission to write. Make sure the cache directory in the root of your server is owned by the same user as your nginx server, and has the write permission.
- Two common errors
Configure Boost (admin/config/system/boost)
- All the default settings should be fine for your purposes, but feel free to tweak them as you see fit
- We need to generate some extra .htaccess configuration to allow post to work at maximum potential, go to the .htaccess tab to do this (admin/config/system/boost/htaccess)
- Again the default settings here should be acceptable, save the configuration and then go to the .htaccess generation page (admin/config/system/boost/htaccess/generator)
- Copy the text supplied here and paste it into the correct location in your .htaccess file, following the directions supplied by boost.
- Save the file, and reload your home page as an anonymous user to start using the boost caching system
So we’ve completed the boost configuration, let’s have a look to see what Google PageSpeed thinks of the update.
Running the same site, through Google PageSpeed no results in 79/100 for mobile speed and a whopping 93/100 for Desktop. That is an incredible performance upgrade and it took you only 10 minutes to complete. Increasing your PageSpeed score by 10 points will do wonders for your SEO rankings and help you reach a larger audience.
Now you may not be seeing these results on your run through and I will talk about that now. Two things, one you have to make sure that your web server has gzip enabled.
For nginx, make sure these three lines are in your nginx.conf file and are uncommented:
For Apache, make sure these lines are in your httpd.conf file and mod_deflate is enabled:
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0 no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip
Header append Vary User-Agent env=!dont-vary
This will make sure gzip is properly enabled and your pages are being compressed and cached properly.
Another reason why you may not be seeing these results is that you are well on you way with your site, and your site’s theme and modules are adding extra CSS and JS files which is causing you to have a lower PageSpeed score. These issues will be addressed in part 2 of this blog.