Can you load your website in a blink of an eye? In 2010, Google announced to the world that website speed is now a SEO ranking factor in its algorithms. Research from Google indicates that significantly less engagement is seen when Google.com slows down to a blink of an eye.
The ramifications are huge whether you operate a small business website or handle SEO consulting for an enterprise. Imagine if the Apple website took longer than a couple of blinks to load.
Would that help their user experience or improve their fanatical user base? Probably not. The same goes for your website regardless of whether it is small or large.
A website with blazing fast speeds is a solid investment in the future of your company and it will help you for many years to come. However, the journey will not be cheap nor easy.
Today, I am going share the fundamentals of how to improve your website loading speed. My research and insights are taken from Yahoo Developer Network and Stoyan Stefanov’s blog.
Minimize HTTP Requests
Use combined files to reduce the number HTTP requests by combining all scripts into a single script. This includes combining all CSS into a single stylesheet.
CSS sprites are the easiest methods for reducing the number of image requests to the server. Combine your background images into a single image and use the CSS background-image and background-position properties to show the right image segment.
Use image maps in the navigation elements to combine multiple images into one image. The overall size will be the same but you will reduce the number of HTTP requests.
Use a Content Delivery Network (CDN)
A user’s proximity to your web server impacts your website download speeds for them. If your web servers are located around the world and your servers are located in one spot, let’s just say that your company will be out of business soon.
A CDN is a collection of web servers that are spread out evenly around the world to help efficiently deliver your content users who may be geographically diverse. A CDN is not necessary for a small website but as you grow into the size of an enterprise like Kimberly-Clark, you will definitely need one.
Add an Expires or a Cache-Control Header
For static components: implement “never expire” policy by setting far future Expires header. For dynamic components: use an appropriate Cache-Control header to help the browser with conditional requests
Gzip Components
Gzipping generally reduces your response rates by 70 to 80 percent. Make your you gzip your HTML, scripts and JSON. Do not gzip your images or PDF documents because these are already compressed.
Put Stylesheets at the Top
This should be self explanatory but if its not, remember Maister’s Law of Service: Service = Perception – Expectation. If your website is perceived to be fast because it’s visually loading for the consumer then you are already ahead of the game.
Put Scripts at the Bottom
If you put scripts at the top of your page, they will block parallel downloads. This is bad because if a user is visiting your website, nothing will show up for them on their screen while the scripts for your website download ahead of everything.
People may think that your website is broken or is taking too long to load and may just leave your site.
Avoid CSS Expressions
The problem with CSS expressions is that they are evaluated by the web server multiple times. If people scroll down the page or moves the mouse around, the expression gets evaluated and sends requests to your web server, which in turn slows down your website.
The quickest way to reduce CSS expressions are to use one-time expressions and set the CSS style property to an explicit value. If the style has to be set dynamically then use event handlers instead of CSS expressions.
Make JavaScript & CSS External
The only place where you would keep your JavaScript and CSS inline is your home page because it probably has the fewest components as opposed to other pages on your website.
If users have multiple page views per session then make your JavaScript and CSS external versus inlining them because this technique reduces the number of HTTP requests that are made.
However, if your home page has many average page views per session, then you may want to consider inlining the JavaScript and CSS but dynamically downloading the external files after the page has finished loading so if the person clicks around to other pages of the site then these file components would already be in the browser’s cache.
Reduce DNS Lookups
When people type your website.com into the browser bar, there is a brief moment when the Domain Name System (DNS) maps the typed name to the correct IP address. It usually takes 20 to 120 milliseconds for the average DNS lookup to occur.
If you take the hostnames for your components and split it across at least two but no more than four hostnames, you will reduce your DNS lookups and allow a fair number of parallel downloads which result in lower website speeds.
This technique is particularly important if you have a large enterprise website because a large number of people know your brand very well and will usually type brand.com into the browser address bar.
Minify JavaScript & CSS
Minification removes unnecessary code bloat from your website by removing all HTML comments as well as unneeded white space. Minification will help achieve a 20% file size reduction on average.
Avoid Redirects
Most SEOs generally know that redirects are bad for search engines and users but not why. It is bad because when you create a redirect between a person and the website, one essentially creates a gatekeeper that does not let people view the website until the HTML document arrives and this is why we see a blank screen during a redirect.
Remove Duplicate Scripts
Duplicate scripts are bad because as your website loads, it creates multiple HTTP requests which increases your site speed. The easiest way to deal with duplicate scripts in your content management system (CMS) is to utilize a script management module through a SCRIPT tag.
The SCRIPT tag prevents the same script from being utilized multiple times while the page is getting requested.
Configure your Entity Tags
Entity tags mechanisms used by the browser and the web server to see if the component in the browser matches the component held on the web server.
On small websites with a single server, you don’t have to worry about these but if you operate or consult for a company who uses a server farm then you’ll want to set these up instead of using the default configuration because a component from one server will not be identical to the same component on a different web server in the farm.
If the entity tag is configured correctly then a small 304 status code will be returned versus a 200 status code which will download all of your data (and increase your page load times).
Flush the Buffer Early
Flush the HTML document’s buffer immediately after the HEAD downloads in the document because it allows the browser to start fetching files in parallel while the server is still processing backend requests.
Use GET for AJAX Requests
POST is a two step process, if you utilize GET then you remove one step of the process and it takes only one TCP packet to complete your AJAX requests. The maximum URL length in IE is 2k so make sure you are mindful of your GET request size.
Post-Load Components
Look at a page on your website like the home page and ask yourself what your users’ will be happy with viewing before scrolling down the page. Make a list of all those components.
Then take those components and load them after the page loads but before the user goes further down your page. This technique will help speed your website downloading the important components first and saving the less important components for later.
Preload Components
Just like you can load website components after your page downloads, you can also preload your components before your visitor goes to the NEXT page.
There are three ways to utilize preloading:
- Unconditional – fetches components for the next page automatically because the next page is 100% known
- Conditional – based on user actions, you make an educated guess where they will go next and fetch those components
- Anticipated – preload before you launch a redesign so people who had the old website cached don’t complain that the new website is slower
Reduce the Number of DOM Elements
If you have a complex page, it probably needs more network bytes to download it. Look at the best websites in your space and see how many they have and reduce the number on your website.
If you have firebug installed on FireFox, you can also use the following command to test how many elements exist on your page: document.getElementsByTagName(‘*’).length
Split Components Across Domains
If you have static components and dynamic components, you may want to consider hosting them on two to four subdomains. This technique helps maximize parallel component downloads and helps you avoid the DNS lookup penalty.
Minimize the Number of iFrames
iFrames are bad because they create another component within your website which generates more HTTP requests. Additionally, content contained with the iFrame are not considered semantically relevant to the page which is bad for SEO.
No 404s
Every time your website breaks and results in a 404 page, that is an unnecessary set of HTTP requests to the server. If you have two or 3 broken pages, then not a big deal but if you have thousands of pages all the way to millions of pages then significant page speed reductions are achievable.
Did you enjoy my post? If yes, please consider subscribing so I can teach you one new topic per day on SEO and Internet Marketing.