Front end performance can be a great experience or a horrifying nightmare that could highly impact the end user experience, and lead to users leaving your website.
In reality most web pages spend 10-20% of the end user response time spent on getting the content from the web server top the browser. The rest, 80-90% will be spent on rendering the web page, loading components etc.
Parallel Requests
HTTP requests can happen in parallel. This could be due to multiple hostnames being used or as a result of using HTTP/1.0 or HTTP/1.1. Parallel requests don't happen with script downloads, because browser blocks HTTP requests when downloading scripts.
Optimizing Web Performance
Let's examine the rules for web performance optimization.
- Make fewer HTTP Requests
- Use a Content Delivery Network (CDN)
- Add an Expires Header
- Gzip Components
- Put Stylesheets at the Top
- Put Scripts at the Bottom
- Avoid CSS Expressions
- Make JavaScript & CSS External
- Reduce DNS Lookups
- Minify JavaScipt
- Avoid Redirects
- Remove Duplicate Scripts
- Configure Etags
Make fewer HTTP Requests
When your web page loads in a browser, the browser sends an HTTP request to the web server for the page in the URL. Then, as the HTML is delivered, the browser parses it and looks for additional requests for images, scripts, CSS, and so on. Every time it sees a request for a new element, it sends another HTTP request to the server.
How to Reduce HTTP Requests Without Effecting Your Design?
Luckily, there are several ways you can reduce the number of HTTP requests, while maintaining high-quality, rich web designs.
Combined files- Using external style sheets and scripts is important to keep them from bogging down your page load times, but don’t have more than one CSS and one script file.CSS Sprites- When you combine most or all of your images into a sprite, you turn multiple images requests into just one. Then you just use the background-image CSS property to display the section of the image you need.Image Maps- Image maps are not as popular as they once were, but when you have contiguous images they can reduce multiple HTTP image requests down to just one.
Advantage of Caching
By utilizing CSS sprites and combined CSS and scripts, you can likewise enhance load times for internal pages. For instance, in the event that you have a sprite picture that contains components of inside pages and in addition your presentation page, then when your readers go to those inward pages, the image is now downloaded and exists in the cache.
Use a Content Delivery Network (CDN)
A content delivery network (CDN) is a gathering of web servers circulated over different areas to convey content all the more effectively to clients.
Add an Expires Header
Express headers as stated, instructs the browser to requests a file from either the cache or the server. This will dramatically decrease the amount of repeated HTTP requests and hence increase the load time.
Adding an Expires header to your components with a date in the future makes them cacheable, reducing the load time of your pages. Certainly this should be done with images, but that's fairly typical. Go a step further and add it to scripts and stylesheets, too. This won't affect performance the first time users hit your page, but on subsequent page views it could reduce response times by 50% or more. - Steve Souders
Gzip Components
Compressed components allow your server to provide smaller file sizes that load faster for your clients.
It said to be 50%-70% of file size saving for HTML and CSS when it is compressed and your pages will load much faster, and saves bandwidth.
Next to eliminating unnecessary resource downloads, the best thing we can do to improve page load speed is to minimize our overall download size by optimizing and compressing the remaining resources. - Google
Put Stylesheets at the Top
Placing your CSS at the top in the <head> section avoid users seeing a blank page at the load time and content will be styled before the blocking JavaScript files are being downloaded.
The HTML specification clearly states that stylesheets are to be included in the HEAD of the page: ~Unlike A, [LINK] may only appear in the HEAD section of a document, although it may appear any number of times.~ Neither of the alternatives, the blank white screen or flash of unstyled content, are worth the risk. The optimal solution is to follow the HTML specification and load your stylesheets in the document HEAD. - Steve Souders
Put Scripts at the Bottom
In order to prevent resources being blocked by the scripts at the download stage, it is the best practice to put the scripts at the bottom.
JavaScript scripts block parallel downloads; that is, when a script is downloading, the browser will not start any other downloads. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames. - Yahoo!
Avoid CSS Expressions
CSS expressions are a feature of IE5-IE7. They are a dangerous way of setting CSS properties dynamically.
background-color: expression( (new Date()).getHours()%2 ? "#FF0000" : "#00FF00" );
These expressions would affect the browser performance, as they are evaluated more frequently.
One way to reduce the number of times your CSS expression is evaluated is to use one-time expressions, where the first time the expression is evaluated it sets the style property to an explicit value, which replaces the CSS expression. If the style property must be set dynamically throughout the life of the page, using event handlers instead of CSS expressions is an alternative approach. If you must use CSS expressions, remember that they may be evaluated thousands of times and could affect the performance of your page. - Yahoo!
Make JavaScript & CSS External
Because the browser will cache the external files, making CSS and JavaScript external will increase the page speed.
Reduce DNS Lookups
A browser must resolve the DNS name of the web server to an IP address, before a browser can establish a network connection to a web server. Since DNS resolutions can be cached by the client's browser and operating system, if a valid record is still available in the client's cache, there is no latency introduced.
High Performance Web Sites: Rule 9 – Reduce DNS Lookups. The Domain Name System (DNS) maps hostnames to IP addresses, just as phonebooks map people's names to their phone numbers. When you type www.yahoo.com into your browser, a DNS resolver contacted by the browser returns that server's IP address. - Yahoo!
Minify JavaScript
Minifying JavaScript will obviously reduce the time it takes to load a web page.
Avoid Redirects
A redirect between the final HTML file and the user, will delay the page from loading as no component can be downloaded until HTML document has arrived.
Redirects trigger an additional HTTP request-response cycle and delay page rendering. In the best case, each redirect will add a single roundtrip (HTTP request-response), and in the worst it may result in multiple additional roundtrips to perform the DNS lookup, TCP handshake, and TLS negotiation in addition to the additional HTTP request-response cycle. As a result, you should minimize use of redirects to improve site performance. - Google
Remove Duplicate Scripts
Including the same JavaScript file twice obviously slow down the performance.
Configure Etags
To prevent 304 responses, we should not run multiple servers with the default Etag settings.
Since ETags are typically constructed using attributes that make them unique to a specific server hosting a site, the tags will not match when a browser gets the original component from one server and later tries to validate that component on a different server. - Yahoo!
Conclusion
These rules we discussed by Yahoo, will significantly increase the speed and the performance of your websites.