Search⌘ K
Home
Courses
Web Development Interview Handbook

Content Optimizations

Explore techniques to optimize browser rendering performance by minifying JavaScript, CSS, and HTML files, compressing images without quality loss, and reducing the number of plugins used. This lesson helps you enhance website speed and efficiency through practical content optimization methods.

We'll cover the following...

Minifying

One way to load pages faster is to reduce the number of requests.

JavaScript, CSS, and HTML files can all be compressed and turned into one file. All unnecessary spaces, line indents, and code are removed as part of the process of minifying. This significantly reduces the size of the files to be transferred, and hence saves bandwidth and speeds up your site. This is a common pre-deployment practice.

Check out this example.

Before minifying

Javascript (babel-node)
    var order = {
      "date": "11/20/2013",
      "customerId": 116,
      "items": [
        {
          "product": "Surface 4 Pro",
          "unitprice": "799",
          "amount": 1
        },
        {
          "product": "Type Cover 4",
          "unitprice": "129",
          "amount": 1
        },
        {
          "product": "Docking station",
          "unitprice": "199",
          "amount": 1
        }
      ]
    }
    console.log("Date: " + order.date);
    for (var i = 0; i < order.items.length; i++) {
      console.log("Product: "
        + order.items[i].product);
      console.log("Unit price: "
        + order.items[i].unitprice);
      console.log("Amount: "
        + order.items[i].amount);
    }

After minifying

Javascript (babel-node)
var order={"date":"11/20/2013","customerId":116,"items":[{"product":"Surface 4 Pro","unitprice":"799","amount":1},{"product":"Type Cover 4","unitprice":"129","amount":1},{"product":"Docking station","unitprice":"199","amount":1}]}
console.log("Date: "+order.date);for(var i=0;i<order.items.length;i++){console.log("Product: "+order.items[i].product);console.log("Unit price: "+order.items[i].unitprice);console.log("Amount: "+order.items[i].amount)}

Run a compression audit

The smaller the size of your files, the fewer HTTP requests made, the ...