In Parts 1 and 2, we covered the basic and finer aspects of choosing the right web hosting and selecting server software to maximize browsing speed for visitors. Today, we are going to explore the last puzzle piece, website code and on-page optimization.
A typical web page is made of a few different components: HTML code, an attached Cascading Style Sheet (CSS), images and usually at least one piece of Javascript. Unless your page is extremely lean and devoid of interactivity, the overall weight is likely at least 50 – 100 kilobytes. To give a point of reference, our image-heavy home page clocks in at about 600kb (measured with YSlow.)
Load Speed Breakdown
In order to understand the best way to speed up your site, you need to know how web pages actually deliver information to a browser. Technically speaking, the HTML code directs your browser to perform HTTP requests on the components it needs to assemble and render the page.
In simpler terms, the raw HTML code of your website is like a map, and every time you add an image or link a piece of a Javascript to it, you’re giving your browser more places to look before it can build what your page is supposed to look like. If these items are scattered across the web, that means it will take progressively longer to gather all the page’s elements, ultimately slowing down loading time.
A good rule of thumb for web design and development is to use as few outside codes and images to build your pages as possible; certain ones are a modern necessity, such as Google Analytics, but the kitschy Javascript or Flash effects many sites use are not. Keep in mind that if you use any Google AdSense advertising blocks on your site, they count as an outside element that can slow down your browsing.
Tips and Tricks for Maximizing Speed
Aside from stripping out unnecessary images, removing excess white space and HTML comments etc. from your web pages, there are a number of tricks that can accomplish speed gains without sacrificing functionality.
Use CSS, Not Text Images
Did you know that most modern browsers (IE8, Chrome, Firefox, Safari) can render text in advanced ways that mimic and perform on-par with many image creation tools? There is some variance between browsers on supported standards, but high-end text effects and even recreating logos can be achieved through a combination of HTML and CSS, eliminating the need for additional images on your web page.
1st Web Designer has a great list of CSS text effects you can use on your site to avoid including more images.
CSS Sprites
A sprite is a mash-up of two or more images to save downloading time in your browser. Essentially, you can use an image editing application like Adobe Photoshop to stack the images horizontally or vertically and use a bit of CSS code to center the browser appropriately on the needed part of the sprite. Skyje.com has a great list of CSS sprite tutorials to get you started, and there is even an online generator at Project Fondue.
Pro Tip: Saving CSS sprites horizontally instead of vertically-stacked will result is a slightly smaller file size. (Smaller is better.)
Minify CSS and Javascript
Minification of code relates to stripping out unneeded white space and converting overly complex functions or lines of code to simpler ones, reducing file size and potentially easing the processing burden of your visitor’s browser. CSS in particular is very easy to minify, as manipulating white space in this type of file will not cause any detrimental effects to the code itself. Javascript (JS) is much more complex, and testing is necessary to ensure that a minified version of the file will operate properly.
CSS Minifier – http://www.minifycss.com/css-compressor/
Javascript Compressor / Minifier – http://jscompress.com/
If you want to go a step further, concatenating (combining) like CSS or Javascript files will also result in a speed bonus. As with minifying, this usually works fine for CSS files, but Javascript files usually need additional performance testing.
Caching
One quick way to speed up your website is to use a caching solution to pre-build your pages and deliver them with far fewer HTTP requests. If you are using a Content Management System (CMS) to house your content, chances are there is a caching module or plug-in available for your use. Brafton.com uses the W3 Total Cache system to accelerate our content.
Caching is also possible on the browser level by setting special headers and tags for the elements of your pages, such as images, scripts, etc. If your server runs Apache, check out this tutorial for more information. For friends using NGINX, a code snippet like this will do the trick in your site’s configuration file:
location ~* .(js|css|png|jpg|jpeg|gif|ico)$ {
expires 30d;
log_not_found off;
}
Use a CDN
Thanks to the advent of cheaper Content Distribution Networks (CDN) such as Amazon’s Cloudfront service, these services are now economical enough for even small or personal websites to use – often at a cost of as little as a dollar or two a month. Note that to use Cloudfront, you will need to have an Amazon Simple Storage Service (S3) account to store the content first.
A CDN works by hosting all of your website’s “static” content in the cloud and maintaining a network of “edge” servers that are strategically located around the world. “Static” content refers to files including images, themeing assets like CSS and Javascript and any other file on your website that is not routinely updated.
In practice, delivering these static web assets from a server geographically closer to the visitor will speed up their browsing experience.
Well, I hope you enjoyed our guide to getting maximum speed performance out of the hardware, software and content of your website. As a final tip (and it’s an important one), never trade usability for speed. It is my personal opinion that usability should always come first because if your website isn’t easy to use and navigate, the speed won’t really matter because visitors won’t want to stay on it.
Thanks for reading and I look forward to sharing more insights and tricks in the future.
