Website Response Times: why to fine tune you site’s speed
Just about everything in the world can be fine tuned to reach its full potential. You can fine tune settings in your computer BIOS to make it run faster, fine tune car engines to make it run more efficiently and gain extra horsepower, fine tune your tv for the best quality and lowest power usage, and you can fine tune the bone alignment in your body to let your body work the way it’s supposed to.
Your website is no exception! There are many factors in having a successful website including great content, readable color schemes, awesome design, search engine optimization and load time. First impressions are very important on a website and most visitors will leave within the first 3-5 seconds if they do not see anything interesting. If a user spends those 3-5 seconds waiting for your website to load, chances are they will leave before they even get to see anything. We know based on THIS study that a 10 second wait for anything on your site will result in a lost visitor.
Fine tuning is the act of improving or optimizing an existing feature or component. For a website there are many areas that can typically be optimized. These include the database, the website code, the images and the physical server.
The Problem
When you a visit a website, your browser does a lot of work behind the scenes to be able to display the page to you. The first step is to download all of the HTML files, images, Javascript and CSS files and other assets that the website might be using in that page. This can be as little as 1 file or over 100 files. Every browser has a limit on how many connections it can make to each server at one time (typically between 4 through 6). This means that if a webpage calls for 100+ files, your browser can only download 4-6 at once. Not only that, but the web server also has a max concurrent connection by browser and the hosting account will also have a max bandwidth speed and connections per account. The physical distance between the web server and visitors computer also plays a role in how fast a browser can display the website content. All of these components will affect how fast your website is.
The CDN
A Content Delivery Network is a network (or set of servers) designed specifically to house your asset files. By offloading the Javascript, CSS and other static pages to your CDN, you will greatly improve the speed of your website. Your browser might only allow 6 connections per website at one time, but by serving your asset files from 3 CDN sources you now allow up to 18 connections at once. There are additional benefits as well! By using a CDN it will lessen the load of the webserver because the static files will be called from the CDN which will free up your server bandwidth and other resources which can save a lot of money with hosting costs. Another benefit is that the network of CDN servers reside in multiple locations around the country and world. For example when a visitor in Los Angeles views your site hosted in Texas, they will be served content from the CDN server located in San Francisco, and another visitor in Florida will be served files from the CDN located in even Georgia. This makes for an even faster connection and download time than would be possible from your webserver.
The Database
It can be argued that one of the most important parts of a database driven website is the database. There are many types of databases one can use depending on the language, server and needs. They can all can be optimized and tuned. Most of the database tuning and planning should be done from the beginning and includes proper column structures, indexing and keys. Once the database is up and running the next step would be to set up database caching.
Minification
Minification is the process of removing all unnecessary characters from the source code without changing its functionality. Browsers do not read extra spaces, tabs, line breaks or comments in the code. In web development we can minify Javascript, CSS and HTML files to strip out the extra “junk”. This can save typically 20-40% of a file size. Lower file sizes equate to a faster download time. When minifying files we will also combine multiple files into 1 larger file. For example if we start with 20 Javascript files that equal 1.2MB of code, we will minify each file down to a total 360KB of code. Then we combine the 20 files into one 360KB file. When the browser displays a website, it will be a lot faster because it will only need to download one 360KB file vs 20 files totaling 1.2MB.
Sprites
Sprites are the minification solution to image files. With sprites we combine multiple images into one single image. This works great with smaller images such as icons. Typically sprite images are a little larger than the total size of the smaller images, but it is still faster because the browser only needs to make one connection instead of multiple connections. The browser will then use CSS to display the correct part of the image in the page so the user will never know they are actually looking at a small portion of a larger image.
Caching
Caching is the act of storing data for later use. In web development we can cache anything that is dynamic or an object that is used lot. Typically this would be a database query such as total members in a membership based website, total posts in a blog based website or products and categories in an eCommerce store. The goal is to cache that information so we do not need to make new database queries with the same results every page load. This is taxing on the server and makes a website load faster. With caching we can use 30-70% less on server RAM and CPU on every page load and load each page significantly faster.
HTACCESS
The .htaccess file is a directory-level configuration file supported by several web servers, that allows for decentralized management of web server configuration. It has many benefits and settings, some of those include making your website load a lot faster. Every server has different configuration so not all of the options might be available in yours. There are several options that can be set including mod_expires, mod_deflate, ETags, and gzip. Without getting too technical with each setting, these options will make the files on the site load faster and cache on the browser better.
Putting it all Together
Every step mentioned above has it’s own individual benefit and can make your site load faster and more efficiently in their own way. Combining them all makes each page load even faster and will make a HUGE impact on the load time of your website which will improve the users experience and will make the search engines happier.
Share: