Front End Performance Optimization is the modification of HTML, CSS, and JavaScript (and sometimes, server configuration) for the purpose of improving page load times.
When your website’s performance is optimal, Google Search Engine is happy, Browser is happy, your bandwidth is happy, and site visitors are happy.
HTTP requests are made when loading CSS, Scripts, Images, and HTML. The smaller the number of HTTP requests is, the better performance becomes.
HTTP Limitations
A browser downloads as many assets as it can from a single domain in parallel. The main limitation is HTTP only allows for a maximum of 6 to 8 parallel connections to any one domain. As soon as it reaches the maximum allowed on one host, the browser issues a request just for that number of resources and cues the rest.
Head-of-Line Blocking & CDNs
This limiting issue known as head-of-line blocking is a common web performance issue where a request may be stuck waiting for another request to be completed before it can begin. But we can get around this quite easily by serving resources from multiple host names. The more domains it can pull from the more assets can be downloaded in parallel. Maximize parallel downloading utilizing CDN’s.
Solutions to HTTP Limitations
We need to decrease the number of HTTP requests and the size of requested files.
- Use CSS image sprites
For SVG vector images as well as raster images such as JPG’s and PNG’s - Keep @imports to minimum
Reduce number of linkings to CSS, JS, and other files inside HTML documents. - Minify text-based resources (JS, CSS, HTML)
Using task runners (e.g. Gulp, Grunt, etc.) - Combine CSS and JS Resources
Better than reducing number of file linkings is combining all CSS files or JS files into one file, using task runners (e.g. Gulp, Grunt, etc.) - Maximize parallel downloading utilizing CDN’s.
Using too many of these connections can cause increased CPU usage, so Google recommends using between 2 and 5 hosts
at the most.
Use CDN
Serving all your fonts and images from a single host can lead to performance issues. Content Delivery Networks(CDN) have become an industry standard and a must-have for highly performant web apps. A CDN is basically a series of proxy servers that contain your site’s content all around the globe.
CDN’s are great for images, but they can be used for other files as well.
When accessing content for a site, for performance, it’s best if the resources are as close to you as possible on a CDN proxy server.
HTTP/2
Instead of decreasing the number of HTTP requests, another solution would be to increase the number of allowed HTTP requests parallel to one domain.
With the help of multiplexing, HTTP/2 resolves this HTTP limitation. HTTP/2 It is an official next generation Transfer Protocol, based on SPDY created by Google.
Multiplexing
A method in HTTP/2 by which multiple HTTP requests can be sent, and responses can be received asynchronously via a single TCP connection.
This, in turn, allows a client to use just one connection per origin to load a page.
Further Reading:
Performance optimization in a HTTP/2 world
https://yoast.com/performance-optimization-http2/
HTTP/2 test
https://tools.keycdn.com/http2-test