jQuery user interface framework
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.
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.
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.
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.
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.
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.
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.
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.
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.
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>
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>
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.
Loading images in larger size than you actually needs, is waste of bandwidth and CPU that results in slower page rendering.
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.
Often more than 50% of the page size are due to images.
Using tools for lossless compression like Compressor.io helps to drastically reduce the size of your images.
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!
Join our mailing list and stay tuned! Never miss out news about Zino UI, new releases, or even blog post.