Last we we kicked off our 5 Quick Tips series discussing some quick and easy ways to improve your Google PageSpeed score. Of course, that doesn’t cover all the ways you can improve your speed and user experience so today we’re going to discuss 5 ways you can improve your real-world site speed.
The five things we’ll be putting on our to-do lists today are:
- Set Image Dimensions
- DNS Prefetching
- Use A CDN
- Take Out The Trash
Of course this isn’t an exhaustive list of everything you can do but it includes areas that virtually everyone should address and can trim seconds off our load times. Combine that with the efforts from last week and we’re way ahead. So let’s begin …
A website loads many resources for each page. Our homepage for example is made up of 57 individual items that need to be passed to the browser. Each time there is a request for a file the server and browser must interact. The browser sends the request and the server replies with a “here” each time and then proceeds to send the file after which the connection is closed. Knowing this you can probably gather already what KeepAlive does. KeepAlive keeps the connection between the browser and the server open so this exchange need only include the sending of the file itself and not a constant opening and closing of the connection.
In the current web environment many servers have KeepAlive turned on by default but many shared hosting environments do not as it takes more RAM. This can also be taken as a warning by anyone thinking of implementing KeepAlive, it reduces CPU usage and increases RAM usage so make sure you have enough RAM available to handle that.
Assuming you do and you’re interested in implementing KeepAlive it’s quite simple. First, test and make sure your server doesn’t already have it turned on by default. You can do so using this free tool. If it doesn’t simply add the following to your .htaccess file:
Header set Connection keep-alive
If you’re on an IIS server you’ll find instructions here though like everything, it’s a bit more involved with Windows.
Set Image Dimensions
As we covered last week, ensuring your images are the same size they will display on the page is critical to improving your PageSpeed and equally important when we’re talking about real world page speed. Further to that, taking the simple added step of defining the image size in the HTML or CSS files can dramatically speed up the loading of your web page.
When a page is rendering in a browser the resources load one-by-one. When you don’t define an image size the browser isn’t sure how much space it’ll take and so it has to recreate the page around the image after it loads. And then the next image. And the next. I think you see where I’m going with this.
If you define the size of the image in the code the browser knows immediately what space it will take and keeps that space available as the rest of the page loads. This results in far less work being done by the browser and a far faster loading of your web page (and in many cases a page that looks better while it’s rendering).
Most of us have resources loading on our sites that are not from our site. This can include anything from Google Analytics scripts to images loading from third part sites. When such a script or image or other resource is called into your web page the first thing the browser needs to do is find out where that resource is and if it’s available. The start of this process is to figure out where the server is which begins with a DNS check. Basically this is where your browser simply calls out to the world, “Where is this domain?” and waits for the world to answer back.
And this takes time. Not a ton of time, generally only a fraction of a second, but it’s a fraction of a second on top of all the other fractions of seconds. This is where prefetching comes in. With DNS prefetching we are simply ordering our browser to run the DNS check prior to needing the resource. With just a bit of code in the header of our site we can get the browser hunting down the DNS for the resources it will be calling on later. This will trim out these fractions of seconds.
To figure out which resources need to be prefetched I generally use WebPageTest.org. There are a few views you can use but I prefer to head over to the waterfall view and simply scrolling down the list for any external domains and add them to the list of domains to be prefetched. The code to do this is:
<link rel=“dns-prefetch“ href=“//bluewidgets.com“>
Replace bluewidgets.com with the domain you want prefetched. Now, when the script, image or other resource is called upon the DNS lookup is already completed. This can be used to speed up links to third party sites. When a user clicks a link to an external site the DNS lookup must take place. If you’d like to help your users on their way out you can prefetch the domains you link to and send them on their way faster.
Use A CDN (Content Delivery Network)
I can’t speak highly enough about CDNs and the speed improvements they can generate. Our own site speed improved by over a second on the homepage with this simple change. There are two main reasons why a CDN can provide significant speed improvements. They are:
1 – Your files are distributed across an array of servers around the world and are delivered from the most efficient one. If your site is hosted in Boston and you have a visitor from Tokyo all your files will be served from the east coast and have to travel around the world. With a CDN they will be served from the server closest to the visitor with only the base site files served from Boston, and
2 – Serving files is what CDN servers are built for. Imagine racing a Formula 1 race car against a Hummer. The Formula 1 would clearly win right? Now what if the race was through a field? CDN’s are faster because it’s what they do. They don’t process equations and they don’t hold databases. They sit waiting for files to be requested and have everything built into them to get that file to it’s destination as quickly as possible.
How a CDN gets implemented will depend a lot on your hosting environment and build. For example, we are hosted with WPengine on WordPress. The process of implementing a CDN in that environment is quite simple and is included with some of their packages. Click a check box in the control panel and you’re done. For others on WordPress or most other content management systems you can still easily go with the same CDN I’m with and that Yoast recommends MaxCDN which integrates with everything from WordPress and Joomla to xCart and Drupal. For those not on a CMS or with a custom one they also have customized solutions.
There’s a solid benchmarking of some of the top CDN services over on Goldfire Studios. I also recommend checking with your developer and/or hosting provider for their recommendations but if you’re one of the majority on a common CMS it’s likely one of the fastest things you can do to yield significant speed improvements.
Take Out The Trash
And last but definitely not least … clean up your site. Just in the process of writing this piece I was pulling some new waterfalls off of Web Page Test and looking through the list of resources being called. It had obviously been a while since I’d done any housekeeping as there were scripts being called that weren’t needed. Because our site is in WordPress I started with looking through all our plugins and deactivating or deleting those that aren’t currently necessary. I also pulled up the site files and found the references to additional scripts I’d manually added that were no longer needed such as a very bulky call to Facebook to operate a sharing button that we no longer use.
At the beginning of that process our site had the following stats:
Load – 4.79s
Size – 1.06MB
Resource calls – 64
The stats became:
Load – 3.84s
Size – 0.929MB
Resource calls – 56
With some additional tweaks discussed above our final speed is currently 2.80s. There is still room for improvement but I’ll save that for a future post though likely not part of the 5 Quick Tips series. Performing all the actions above took about an hour and that included turning off and on our CDN and documenting some of the results for reference. 1 hour … about a 2 second improvement in page load times and a significant improvement for our visitors.
Amazon found that for every 100ms delay they lost 1% in sales. This site is 20x that with just an hour of effort. If we were an ecommerce site and because the improvements compound on each other it would yield a 22% increase in sales … for one hour of effort. So what are you waiting for … stop reading and get to work.