How to Use Free Tools to Test and Optimize the Speed of Your Site
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.
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
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.
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.
We can use code that looks like this:
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:
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.
Optimize The Order of Styles and Scripts, and Put Them In The Document Head
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.