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.

After a prolonged period of time a website will begin to bog down. The frontend files may contain exaggerated blocks of code or locked, hidden bits. This is most commonly seen happening within JavaScript files or images. It may be important to create a pleasing website for the user experience but without an optimized website the design may not even have the chance to fully load on impatient users.

(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.

HTTP Requests

Each time your website loads it sends an HTTP request to a remote server. This type of data transfer is called a network protocol used specifically for distributing and storing plaintext files. These often include your basic frontend code such as HTML, CSS, and JavaScript.

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.

Often the factors holding down a website’s optimized speed reference clunky JavaScript includes or large image files. With the popularization of Verizon FiOS it’s common for Internet speeds to hit 600kbps and keep climbing! Unfortunately this isn’t the norm and even with high-speed connections it’s possible to experience optimization faults.

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.

Speed Techniques

There are some simple tricks which you can apply to your website immediately to speed up performance. The first and easiest way is to separate your CSS and JavaScript files.

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.

On the flip side moving all JavaScript files into your site footer may dramatically solve hangup times. Many browsers block parallel downloads which means before rendering the page a user’s web browser may stop for 4 seconds to fully load external JS includes.

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.

There are plenty of other free services on the web to help with this task as well. Minify CSS has an entire CSS compression interface to make the process simple. The same website also has a custom JavaScript compressor which performs much of the same tasks but keeps the scripting organized.

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.

(bellefoong)