What is page speed?
Page speed is one of my favorite topics to explore when optimizing a website. Simply put it’s the measure of how fast a website goes from being requested to being fully rendered in a browser. File size, distance from server, the amount of traffic, server environment and other factors influence page speed. In this part of my series on starting a new campaign, I’ll show you how to tap into the power that is “the cloud”.
It’s challenging, Google loves it and it just makes sense from a user experience standpoint. Improving page speed may involve the following:
- Avoid CSS @import
- Avoid a character set in the meta tag
- Avoid bad requests
- Avoid landing page redirects
- Enable Keep-Alive
- Enable compression
- Inline Small CSS
- Prefer asynchronous resources
- Put CSS in the document head
- Serve resources from a consistent URL
- Serve scaled images
- Specify a cache validator
- Specify a character set
- Minimize redirects
- Combine images into CSS sprites
- Defer parsing of JavaScript
- Leverage browser caching
- Optimize the order of styles
- Inline Small JavaScript
- Minify CSS
- Minify JavaScript
- Minimize request size
- Optimize images
- Minify HTML
- Specify image dimensions
- Remove query strings from static resources
Some of these items are more important than others. Visit the Google Developers section on Page Speed and download the Chrome or Firefox plugin (requires the Firebug plugin, which I also recommend) to familiarize yourself with the important or high priority speed issues.
Check out this awesome post on page speed by Ian Lurie: How we made Portent.com really freaking fast.
Seriously check it out, I’ll wait. OK, back?
A year ago I would have recommended a plugin, W3 Total Cache, as the solution to improve page speed for my WordPress site. But more recently I’ve started using a reliable content delivery network (CDN), CloudFlare.
How do I set up CloudFlare?
If there is a plugin that can handle page speed, why bother using an external service? First, let’s look at what a CDN is:
A content delivery network (CDN) is a large distributed system of servers deployed in multiple data centers in the Internet. The goal of a CDN is to serve content to end-users with high availability and high performance. CDNs serve a large fraction of the Internet content today, including web objects (text, graphics, URLs and scripts), downloadable objects (media files, software, documents), applications (e-commerce, portals), live streaming media, on-demand streaming media, and social networks.
Source: http://en.wikipedia.org/wiki/Content_delivery_network
CloudFlare is a free CDN that is well-worth taking the time to set up for your website.
In addition to being a CDN, the graphs below show traffic data, potential threats to your website and how much bandwidth is saved by using their service.
What do I need to set up CloudFlare?
- Access to your DNS (domain name servers)
- A CloudFlare account
Create a CloudFlare account and add your website. Below you can see what nameservers I’ll need to use. It seems very technical, but remember that the internet is just a large network of connected computers, each with a unique IP address. The nameserver points an alphanumeric web address to a numeric IP address. It’s easier to remember words than it is to remember a series of numbers and dots.
In most cases your website files are stored on one computer, a server, in a static location. The farther away someone is from that server, the longer it takes to send your files over the network. A CDN combats this by distributing your files to hubs all around the world with the closet hub to the end user delivering the data. Browser caching helps to eliminate the number of files that need to be send while both text and image compression reduce the sizes of files that need to be transferred.
I need to change the DNS for my website from Network Solutions servers to the CloudFlare servers I’ve been given. Like all websites, mine has a unique IP address. You can get some basic hosting information about a website from services like whoishostingthis.com.
As you can see in the image above, the IP for my website is listed and my CloudFlare settings have already taken effect. But how did I make that change?
How to Change Your DNS
Network Solutions is my website host, but most hosts should have a similar way of modifying DNS settings. Navigate to the DNS settings page and replace the nameservers with what CloudFlare gives you. In my case, I replaced the existing DNS with ray.ns.cloudflare.com and vera.ns.cloudflare.com.
Once propagated CloudFlare will “interrupt” requests to my website as shown in the graphic below.
Now that CloudFlare is integrated, we can apply some additional page speed optimizations.
What CloudFlare settings should I use?
There is no one size fits all approach to optimizing CloudFlare or other performance plugins. Factors such as how your website is programmed, limitations of your host and plugin conflicts may determine which settings you can use. Some performance settings, such as JavaScript minification may “break” your website’s design or functionality.
Such was the case with this site. The Website Preloader caused CSS conflicts which caused the background image to not display. I recommend that you test each setting independently and purge the cache after each test to ensure that your website loads normally.
In the case of this website JavaScript and CSS minification didn’t cause a problem, but HTML minification did, which is not something I see often. Be sure to test your settings thoroughly to make sure you’re not sacrificing user experience for speed.
How fast is my website?
Hopefully this page loaded quickly for you, but I’m not one to assume anything. I want to see some data that supports that what I’ve done actually had a positive impact in load time.
WebPageTest.org is a good resource for checking the performance of your website.
Overall it looks like my website is doing pretty well in the speed department after setting up CloudFlare. It’s important to remember that Web Page Test is a simulation and should be used a reference. Actual speed for users may not be exact.
| Document Complete | Fully Loaded | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Load Time | First Byte | Start Render | Time | Requests | Bytes In | Time | Requests | Bytes In | |
| First View | 4.323s | 2.569s | 3.130s | 4.323s | 65 | 413 KB | 8.247s | 72 | 760 KB |
| Repeat View | 4.758s | 1.740s | 2.124s | 4.758s | 13 | 28 KB | 4.770s | 13 | 28 KB |
Another test I should run is Google Page Speed. The page SEO and Social Media Consulting by Ch… got an overall PageSpeed Score of 86 (out of 100).
My goal is to make the site as lightweight (less code the better) and as fast as possible without spending too much time manually optimizing components, so for being on a shared server, I think this is overall a success. The biggest issue with the speed of this site is the “first time to byte” metric, which I don’t have much control over because of the hosting environment. CloudFlare, however has reduced my DNS lookup to almost nil.
If you are running your own Apache HTTP server, consider installing mod_pagespeed from Google. It’s an open source Apache server module that applies some of the same things you’ll see when using CloudFlare, such as JS libraries and image optimization.
Please feel to ask any questions in the comments or on Twitter @chriscountey.