Front End Optimization and Web Performance

Reducing HTTP Requests

A browser opens separate TCP connections for each HTTP request made when loading a page, equal to the amount of page elements it’s required to download.

The problem occurs due to the limit on the number of concurrent connections a browser can open to a single webhost. This limit exists to protect a server from being overloaded with a high number of HTTP requests. However, it also serves as a bottleneck, often forcing the browser to start queuing connection requests.

As the maximum connection threshold is quickly reached, various FEO techniques are employed to minimize the number of individual page elements or by multiplexing requests.

Content Delivery Networks

CDNs further reduce server response time by pre-pooling connections and making certain they remain open throughout a session, improving erformance by eliminating delay times associated with closing and reopening TCP connections.

File Compression

Every web application screen/view is built from a collection of HTML, JavaScript, CSS and image files. The more complex the page, the larger the files and the longer the load time.

With optimum file compression, these files can be shrunk to a fraction of their original size to improve site responsiveness. Preferred for its wide adoption, quick encoding/decoding times and high compression rates, GZIP is the most popular file compression choice.

CDNs are commonly used to streamline many optimization tasks, offering auto-file compression and auto-minification features, freeing origin individual web application resources and resolving problematic caching settings on the fly.

Cache Optimization

HTTP cache headers play an important role in the way browsers parse a web application, for they determine which content items are cached and for how long.

Caching allows storage of the web app's largest static files off the server — either on visitors’ local drives or a nearby CDN endpoint. This vastly improves web application load speeds.

Code Minification

Minification recognizes the difference between how developers write code and how machines read it.

Developers write code for easy reading comprehension, with spaces, line breaks and comments — while machines can read it without any of these elements, making them nonessential characters and wasted bandwidth.

Minification during the build process trims code to its barest essentials, often reducing it by half before compression.

Most CDNs also have the capacity to automate code minification of JavaScript, HTML and CSS files on-the-fly, as they’re being sent to visitors’ browsers.

/ * 


I’m a Code Comment on Minification Example

*/

Var minifyExampIe = function ( ) {

fill(0, 0, 0);

text( "Minification makes code smaller without changing its behavior”, 100, 100);

};

Var minifyExampIe = function ( ) { fill(0, 0, 0); text( "Minification makes code smaller without changing its behavior”, 100, 100);};minifyExample();