Categories
High Performance Websites
15 Rules for High Performance Web Sites
The page loading time is a key factor for the overall performance of a website. The speed helps to retain visitors longer. But how to make your web page faster? Applying the next simple rules ensures a quick page load and resource optimization.
- Reduce HTTP requests
Every HTTP request adds average 200+ ms to a page load time. To reduce the HTTP requests, concatenate your scripts into a single file, made the same for your styles. Using an image sprite instead of separate images is also a good practice.
Figure 1. Requests by content type - Minify resources
Small sized files load faster, so get rid of white space characters, new line characters and comments. To minify resources use tools like YUI Compressor or UglifyJS.
- Compress components
Compressing text-based documents and resources will reduce the size of transferred data between server and browser. GZip compression is the most reliable and widely supported by modern browsers. Note that images are already compressed so you don't need to do it again.
- Reduce DOM elements
More elements means slow access of javascript to the DOM tree. Reflow and repaint, as expensive operations especially for mobile devices, are slow with large DOM tree, can hurt user experience. So, you should always consider to use minimal number of DOM elements.
- Prefetch resources
Link prefetching is a technique to utilize browser idle time to load a page or resource for future navigation. Using a page prefetching, DNS prefetch and page prerendering have a great impact on user experience.
- Avoid using inline styles & scripts
In addition to other shortcomings an inline CSS and Javascript can not be cached. To benefit the advantages of caching always use external scripts and styles.
- Use CDN
Using of CDN for serving of static content will speed up resource load time due the advantage of geographic location, and will reduce your network bandwidth. Notable content delivery service providers are: MaxCDN, BootstrapCDN, CloudFlare and KeyCDN.
- Use SSD hosting
SSD beat up the traditional HDD technology providing a faster site speed through faster processing of HTTP requests. I would recommend DigitalOcean as one of the best SSD hosting providers.
Figure 2. Cloud computing by DigitalOcean - Styles on the top
Putting your styles in the
<head>
part of your web page aims to eliminate the latency in the network request and to keep the styles off the critical path by downloading the CSS as quick as possible.<!doctype html> <html> <head> <title>Document</title> <link href="css/main.css" rel="stylesheet"> </head>
- Scripts at the bottom
Script elements blocks html rendering until they are loaded completely. To avoid blocking put your scripts at the bottom of the web page, just before the closing
</body>
tag.<script src="js/jquery.min.js"></script> </body> </html>
- Use HTTP GET for AJAX
HTTP POST request is much expensive than the GET method, because send additional headers who increase the size of request. So if you do not explicity need of POST, you should always use the HTTP GET method for AJAX requests.
- Do not scale images in HTML
Loading images in larger size than you actually needs, is waste of bandwidth and CPU that results in slower page rendering.
- Reduce DNS lookups
DNS lookup is the process of translation the domain name to IP address. DNS lookups are cached for better performance, but when clients cache is empty. It typically takes 20-120 milliseconds. If you load libraries from external hostname, for example jQuery from the Microsoft CDN, and jQuery UI from the Google CDN - that are two DNS lookups. It's better to use single CDN provider.
- Optimize images
Often more than 50% of the page size are due to images.
Figure 3. Content size by content type Using tools for lossless compression like Compressor.io helps to drastically reduce the size of your images.
Figure 4. Up to 90% file size reduction
If you have questions about high performance rules, please leave a comment below. And do not be shy to share this article. Thanks so much for reading!
Subscribe to our newsletter
Join our mailing list and stay tuned! Never miss out news about Zino UI, new releases, or even blog post.
0 Comments
Comments are closed