The year was 1997. We listened to cassette tapes all day long, watched Seinfeld religiously, hoarded Beanie Babies as if they were gold, and my family’s desktop computer took 15 minutes to download a single image. But did we care? Heck, no! Most of us were thrilled with the off-white monstrosity that had been invited into our home and screeched the other worldly sounds of our beloved dial up. Fast-forward to the present, and you will be hard-pressed to find an individual who will wait 15 minutes for an image to load. In fact, most studies show that the average user will not wait more than 4-5 seconds for an entire page to load. What an impatient society we have become! Thus, the need for speed optimization is higher than ever. In this article, I will explain a few ways to use free tools to test and optimize the speed of your website.
The Tools
Although there are dozens of tools available to help you speed up your site, I will be focusing on two main tools: Google PageSpeed Insights (https://developers.google.com/speed/pagespeed/insights)
and GTmetrix Website Speed and Performance tool (http://gtmetrix.com/).
Both tools function in basically the same way. Simply type in your URL, hit enter and watch your site get analyzed right before your very eyes. Within a few moments, each tool will generate a full report grading your site speed and providing suggestions on how to improve it. In addition, each tool divides the suggestions into different priority categories. This is helpful for the designer/developer juggling a million tasks at once. This aspect allows you to make changes that will make the biggest impact first, and work on lower priority changes later.
Leverage Browser Caching
Most websites include several elements that change infrequently, including CSS files, images, JavaScript, etc. By setting a cache, the files can be saved by a browser. Google and GTmetrix both recommend setting the cache for at least one week. The next question here becomes: “which files should I cache?” Not to worry, both tools will provide you with a list of individual file names to edit. Below is an example of how to edit the .htaccess file in the root of your site.
You can modify the above code as you feel necessary by specifying files and length of time. However, by doing nothing but using a simple code like this, I was able to improve a site’s GTmetrix Page Speed Grade by 11%. That’s a pretty big leap for such a small amount of time invested.
Optimizing Images
Designers and developers have begun to take today’s technological developments for granted and sometimes fail to optimize images properly. We’re all guilty of it at one time or another, your truly included. However, with these tools, you can design and test your site to load as quickly as possible without sacrificing aesthetics.
Firstly, it is important to understand which file formats to use in which situations. (For all of the seasoned designers and developers out there, feel free to skip over the guidelines below. When I write, I try to make all aspects of my articles as easy to follow as possible- and I think this is worth mentioning here.) Below are some very simple guidelines. Keep in mind that there are always exceptions to the rule, of course, but this can be used as a good rule of thumb.
- PNG (Portable Network Graphics): PNGs are used when transparency is necessary, and for most graphics.
- GIF (Graphics Interchange Format): GIFs are used for very small graphics, usually less than 10×10 pixels and with a color palette of less than 3 colors. Icons, for example, make for good GIFs. GIFs can also be used for animations.
- JPG/JPEG (Joint Photographic Experts Group): JPGs are used for most photographs.
- BMP (Bitmap) and TIFF (Tagged Image File Format): Don’t use these for web. These file formats are often uncompressed, and take up more data than any other image type. If you are still having trouble understanding which file formats to use, don’t give up just yet! Both tools present you with a complete list of images on your site to optimize. Google PageSpeed gives you an analysis of how much to reduce the image size by, and GTMetrix even provides you with a “see optimized version” link for each image.
Combining Images Into CSS Sprites
CSS sprites are an excellent way to reduce load time. The basic concept is to load as many small graphics as possible in one image file, rather than several smaller image files. While this may seem counterproductive at first, you have to realize that each one of those small image files is a separate HTTP-Request. So, the less HTTP-Requests you use, the better.
Sprites are most often used for hover effects or icons. Both tools will, once again, suggest which images to combine into sprites. I won’t go into too much detail on how to create CSS sprites because we’ve already posted an article on the subject. For more information on how to easily create CSS sprites, see CSS Sprites; Making Them Easy.
Defer Parsing of JavaScript
In order to load a page, your browser needs to analyze all script tags in the document. This takes time. By deferring the parsing of JavaScript, you are telling the browser to not analyze the script until necessary. This allows other files to be loaded in parallel, thus speeding up your load time.
In order to do this, Google PageSpeed suggests you identify all JavaScript functions that are not used by the document before the “onload” event. Files that have 25 or more uncalled functions move the functions to a separate, external file. Next, insert a JavaScript event listener in the document head that forces the newly external files to be loaded only after the “onload” event. Google has even provided a simple scripted DOM element. Please note that “deferredfunctions.js” would contain those 25 uncalled functions mentioned above.
Inline Small JavaScript
By including small amounts of JavaScript to you page, you are preventing the site from loading an unnecessary external page. For example, on our site, we are using a jQuery accordion. The code for this entire file is less than 31 lines. So, instead of using a code that looks like this:
We can use code that looks like this:
After you are finished adding the small JavaScript to the necessary pages, take a backup for safe keeping and delete the old JavaScript files from the site. An extra tip: be sure to add comments in the html so you (and others who may work on your site in the future) will know which script controls what.
Inline Small CSS
This is the same concept as stated above, but with CSS stylesheets. Both tools will provide you with suggestions of which CSS stylesheets you should add into the main document. Similar to the example above, your code will go from this:
to this:
Serve Scaled Images
Sometimes, we use the same images repeatedly on a site in various sizes. Instead of adding 3 separate images of 3 different sizes, we add 1 image, and simply tell the html how big or small the image should be displayed on the page. This does make sense if the actual image size matches at least one of the instances on the page. However, if you have uploaded an image that is 250×250 pixels, but you only need to display it at 100×100 pixels, 50×50 pixels, and 30×30 pixels, you are wasting precious bandwidth. You only need to add images to your site that are as large as they will be displayed on the page.
Minify CSS, JavaScript, and HTML
In layman’s terms, clean up your JavaScript, CSS, and HTML files. Remove extra spaces, indents, line breaks, etc. In addition, delete any rules that are no longer necessary. This will speed up your load time because smaller files can obviously be loaded faster than larger ones.
Optimize The Order of Styles and Scripts, and Put Them In The Document Head
Since JavaScript can alter the way a page looks, browsers often delay the loading of content following script tags until they have been fully loaded, analyzed, and executed. This means that if you have a CSS stylesheet listed after a JavaScript file in the head of your document, that stylesheet won’t be loaded until after the JavaScript file, even though the stylesheet is likely to take less time to load. To prevent this delay, group all of the CSS in the head of the document first, then the JavaScript. You code will look something like this:
Avoid CSS @import
Using CSS @import uses stylesheets to load other stylesheets. CSS @import prevents the parallel download of the stylesheets, thus slowing down your load time. Similar to the situation above, the browser is forced to load, analyze and execute one stylesheet before it can do the same for the next. Solution? Use link tags instead. Rather than using this on stylesheet1.css:
Use this in the main document:
Do It Right The First Time
While the tools I’ve mentioned here are great for fixes, remember that the easiest way to optimize your load time is to do it right the first time. Make these tools part of your web design building process. In web design and development, milliseconds matter. The longer it takes for your site to load, the more likely it is you are going to loose that user. What a waste it would be for a visitor to miss out on your beautifully designed site simply because it takes 7 seconds to load rather than 4! Remember that although your site may be full of brilliant functionality and visually delightful elements, all your hard work can be lost if it simply isn’t fast enough.
Contact us today let us optimize the speed of your site.
