How To Measure Front-end Website Performance
Speaking of optimization process is almost nonexistent among new age web designers. Even many web designers who have been in business a decade or longer do not fully understand the importance of site optimization.
(Image source: Shutterstock)
The tips below are for beginner-intermediate web developers interested in optimizing their pages to the fullest. There are many techniques available and each one will behave differently depending on what issues your website is suffering from. Try skimming a few areas and see if you can apply these techniques into your own marks.
Once the request is sent your browser will parse each page element. Depending on the parsing engine each website will load differently and elements will appear in varying order based on transfer speeds. For example, Internet Explorer will render web pages different than Chrome or Safari, and all of these run slightly different parsing engines than Firefox or Opera.
What has to be considered is how long the request time is for each file takes and if this trend holds consistently. Consider receiving upwards of 100k or 1 million visitors in a month. It is the browser’s job to piece together each page element and load external files into memory.
Remedies to Site Performance
We are not alone in the field of web development and frontend optimization. For proper work to be completed there are certain tools required to handle the job.
Google has released a project titled Page Speed which was built to help developers optimize their websites and check for the best levels of performance. Originally the project started as an open-source Firebug add-on and is now accepted as a 3rd party reference for website testing.
Another option for Firebug users is Yahoo!’s YSlow add-on. The script analyzes each web page request and suggests the most common ways to improve performance. These suggestions are based on the Yahoo! Developers resource for best optimization practices in web design.
The program may be a little abrasive at first since it contains so much information. Just stick to the basics and by following simple documentation the process should be a piece of cake.
Developers are always interested in jumping onto a project to break down code so this should be a no brainer. For a little help you could check out the YSlow help guide.
CSS code belongs in the header of your document. This is useful because CSS properties need to be parsed while the DOM is loading. Once a web browser recognizes your CSS styles in the heading it will wait to fully display the web page until all styles have been loaded. Also any images used for icons or background designs will take time to load and should do so first.
This isn’t always possible nor is it always necessary for every website. If your pages load the same with equal response times regardless of include file placements then don’t bother maneuvering any plays.
Dynamic content is unable to load until the entire DOM is completed, but sometimes this will return errors. Test out CSS/JS includes to see if you can return any optimization benefits.
File Size Compression
Compressing large files has become very popular. It can now even be utilized in web pages to reduce load times and keep file sizes very low. Much of the work has already been done and with tools like YUI Compressor mini-sized files are a no-energy process.
You may also consider compressing the largest images in your web pages. This can be done with any photo editing software such as Adobe Photoshop or GIMP by simply resampling the image at a lower resolution. PNG images will export much smaller on average than jpg or TIFF formats. There are also plenty of online tools such as Image Optimizer to aid in the compression process.
Source Checking and Metrics
This is a routine not often practiced by web developers which can offer amazing results. By analyzing all of the page elements in your website you can see which took the longest to load and the order in which each piece was loaded.
The most popular tool Mozilla Firebug is a plug-in for the Firefox browser. This app installs a small toolbar at the bottom of your browser to check response times, header information, page elements, and scripts for each website. The script has also been ported into Firebug Lite as an extension for Google Chrome.
Apache with mod_pagespeed
Not all setups will be running an Apache web server, so this option isn’t always available. This module is directly related to Google’s Page Speed monitor mentioned earlier. In fact, the code for mod_pagespeed was originally based off many libraries from Google Code’s databases.
Apache allows server administrators to install small packages called modules to enhance the performance of their servers. mod_pagespeed is one of these modules which performs optimization techniques automatically at runtime. There are too many processes to list, although some of the main applications include on-the-fly HTML/CSS/JS compression and image caching.
The project is currently housed at Google and is open to developers. Google has been working with GoDaddy to implement mod_pagespeed into all hosting accounts running Apache HTTP server.
Although many other options are available frontend development work is some of the most intense, especially considering pre-optimization for crucial web pages. Optimizing for site headers and large images can be an extremely tedious yet rewarding task.
Consider some of the techniques introduced in this article and see how these could be applied into your web projects. Often developers do not take enough time to appreciate their work and clean out old bits of code. If you’re still hankering for some tips you should read our ultimate web optimization guide for pointers on frontend maintenance and convenient performance enhancements.
Author: Jake Rocheleau
Jake is a user experience designer for both web and mobile platforms. Having over 4 years of freelance projects under his belt, he frequently writes articles on topics of modern design trends and social media. You can check out some of his work on Dribbble or follow his tweets @jakerocheleau.