Categories

Geo Maps Live Editor

High Performance Websites

Posted on: December 30, 2016 by Dimitar Ivanov

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.

  1. 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.

    Requests by content type
    Figure 1. Requests by content type
  2. 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.

  3. 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.

  4. Use cookie-free domain

    Browsers sent cookies with every request, while they are not necessary for resources like styles, scripts, images and fonts. The best practice to reduce the size of the request is to move the static assets on separate domain where cookies are not available, for example: static.domain.com.

  5. 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.

  6. 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.

  7. 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.

  8. 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.

  9. 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.

    SSD Cloud Hosting
    Figure 2. Cloud computing by DigitalOcean
  10. 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>
  11. 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>
  12. 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.

  13. 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.

  14. 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.

  15. Optimize images

    Often more than 50% of the page size are due to images.

    Content size by content type
    Figure 3. Content size by content type

    Using tools for lossless compression like Compressor.io helps to drastically reduce the size of your images.

    Compress and optimize your images
    Figure 4. Up to 90% file size reduction
Keep reading
Share this post

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!


0 Comments

Comments are closed