Plenty is written regularly about how to optimize the front-end of your website for the search engines and usability. That is, of course, the part of your site that users can see, read and interact with, and it plays an undeniably important role in your success online.
But that's only part of the picture.
There is also the whole backend of your website that plays an equally important role in optimizing the user experience, and just because you don't see it as often as the front-end of your website doesn't mean it is OK to forget about it. Taking these behind-the-scenes processes, turning them into streamlined functions and then hiding them from end-users makes for a quicker, more efficient and more easy-to-navigate front-end experience, which will ultimately help drive conversions and increase visitor engagement.
Certain practices have become commonplace for tweaking the back-end to improve the front-end experience, but there are others you may not be familiar with. Check out these 10 back-end modifications that will help you optimize the end-user experience:
gzip Compression
gzip is a software application that compresses (and decompresses) files to ultimately reduce the size of HTTP responses and response times by approximately 70 percent, as well as reducing page weight. You can gzip your files by adding specific code to your .htaccess files, adding PHP code to the top of your HTML/PHP files or adding a gzip plugin to your content management system (CMS).
To use gzip with your .htaccess files, insert this code:
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# Or, compress certain file types by extension:
SetOutputFilter DEFLATE
And to incorporate it into your HTML/PHP files, use this:
Content Delivery Networks
Using a content delivery network (CDN) is one of the most popular methods for speeding up your website from the backend and improving the user experience. CDNs are a collection of Web servers that are distributed among various locations, so they can deliver content to a specific user from the server closest to them. This ultimately speeds up and improves the efficiency of content delivery. Read more about how to use popular CDNs like Windows Azure or Amazon CloudFront, or how to create your own makeshift CDN.
Minimize Redirects
Many webmasters use URL redirects to indicate new URL locations, connect different parts of a site, reserve multiple domains or track clicks, but doing so triggers an extra HTTP request and adds latency. In order to only keep those technically necessary redirects, (1) make sure you don't reference URLs in the pages known to redirect to other URLs, (2) don't require more than a single redirect to any resource and (3) minimize the extra domains you use that issue redirects but don't actually serve any content.
Reduce DNS Lookups
A Domain Name System (DNS) is meant to map hostnames (page URLs, images, stylesheets, etc.) to IP addresses, but often it takes a good 10-20 seconds for a DNS to look up a hostname's address, and browsers can't actually download anything from the hostname until the lookup is completed. While operating systems and browsers will cache DNS lookups, when a user's DNS cache is empty, the number of DNS lookups the system must go through is then equal to the number of unique hostnames on a page, which can take some time. However, if you reduce the number of unique hostnames on your site, you can also reduce the amount of parallel downloading that takes place on a page; in turn, that will lower response times. So try to stay between two and four hostnames per Web page.
Use a Consistent URL to Serve Resources
In the same vein, when you have resources that are shared on multiple pages of your site, make sure that each reference to that resource uses an identical URL, rather than serving it from a different hostname each time. This will decrease the number of unique hostnames on a page that your DNS has to look up and increases the likelihood that the resource was already cached by the user's browser, both of which will help speed up response times.
Minify Codes
By simply reducing or removing HTML comments, whitespaces, CDATA sections and/or empty elements from your Web pages, you'll be able to quickly reduce network latency and accelerate load times. Many easy-to-use online tools will help you do this, such as the Will Peavy minifier.
House CSS and JaveScript Files Externally
A user's browser will cache external resources as soon as it loads your Web page, so if you place your CSS and JavaScript files in external files, you'll greatly improve the rendering time of your pages. In particular, inline CSS files can be a burden on browsers, so by having everything defined in your main CSS file, they will have to do less work in rendering your pages. External JS and CSS files also make site maintenance easier, since they don't appear as various pieces of code on multiple pages.
Load JavaScript Last
If you have scripts on your Web pages, set them up to load at the end, rather than the beginning, if it's possible. JavaScript will block anything else from rendering until it's finished, so if you have it load last, it will make your Web page feel more responsive because everything else will render immediately. To do this, reference your JS code right before the closing tag in your HTML
Don't Resize Images in HTML
One common method for making images smaller or a slightly different size to fit better on a Web page, is to use the width and height HTML attributes to make the image the desired size. Don't do this, because these images will (obviously) still have a larger file size and take longer to load. Instead, resize the image in a photo editing program (e.g. Adobe Photoshop) and then resave it to put on your website.
Don't Display Text in Images
Using an image to display text, as opposed to just including that text in the HTML, is a bad idea for two reasons. The first is that that text, which often includes important information like a company name, headlines or page names, is totally useless for SEO purpose. The other is that images in text unnecessarily increase load times and weigh down your Web pages. A better idea may just be to download a new font to use on your Web page, which will help search engines crawl your text, speed up your page load times and probably even look better, to boot.
