Blog

Read About What We Love: Web Development & Technologies

Web Optimization Tools You Can’t Ignore

When developing a website, there’s a tendency to put in all our efforts in to adding features. We get preoccupied with this and keep best practices aside putting off reviewing and organizing the code for later. This is often a mistake that costs us. As the project progresses and we’re out of the time, we often forget our code cleanup processes either because of lots of bugs or we are out of schedule. After we deliver the project, clients might come back with feedback such as lagging website performance. So, we end up working on the same project to improve performance.

Keep some of these Website speed optimization steps in mind:

1. Reduce number of requests: When request is made to any webpage below is the list of stages it passes through

 When your page is first loaded, there is a first request which contains html content. When the browser processes html content, it spawns more requests to load resources like CSS, images, JS. It also executes JavaScript and sends Ajax requests to server as you instruct it to do.  The modern browsers allow only 6-8 requests per domain at the same time. If your webpage has more than these, the browser processes the request in multiple batches and increases the page load time. So, reduce the number of requests as much as possible.

2. Remove render blocking Javascript

Before the browser can render a page it has to build the DOM (document object model) tree by parsing the HTML markup. During this process, whenever the parser encounters a script it has to stop and execute it before it can continue parsing the HTML. In the case of an external script the parser is also forced to wait for the resource to download, which may incur one or more network roundtrips and delay the time to first render the page.

To solve the render blocking Javascript we should separate our JavaScript into two groups. One group is the JavaScript the page needs to load and the other is the JavaScript after the page loads (like looking for click events). The javascripts that can wait until after the page loads should all be put into the one external file eg: defer.js and we can call as below.

<script type="text/JavaScript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

The above code needs to be added before </body> tag. Just moving the JavaScript files below the Html content and adding "Async" or "Defer" attributes will not solve the problem of Render Blocking JavaScript.

Another scenario may be external javascripts, if the external scripts are small, you can inline their contents directly into the HTML document and avoid the network request latency.

3. Remove Render blocking Cascading Style Sheets (CSS)

Similar to Javascript some CSS files also impact page speed. Below are some of the best practices to follow

a. Don't use @Import to call the CSS files

Typically, we include CSS files using the below syntax

<link href="style.css" rel="stylesheet">

Any CSS called in the manner above will always be loaded by the browser prior to rendering anything at all on webpage.

Now let's look at an example of a CSS file that does not have to be loaded before rendering the page, namely the CSS instructions for printing.

<link href="print.css" rel="stylesheet" media="print">

The above code means print.css is for printing.

Let's look at another conditional situation, here we have a CSS file that is used when a page is of a certain width:

<link href="other.css" rel="stylesheet" media="(min-width: 40em)">

Modern browsers can understand that this CSS is used in some situations and not used in others, so the browser can choose not to load this CSS file prior to rendering if  not needed.

b. Label the CSS properly

Reduce the number of CSS files, if possible combine the CSS files or if CSS is small add the CSS as part of the html.

4. Use optimized images

With images, you need to focus on three things: size, format and the SRC attribute.

Image size: Oversized images take longer to load, so keep your images as small as possible. Use image editing tools to:

Crop your images to the correct size. For instance, if your page is 570px wide, resize the image to that width. Don’t just upload a 2000px-wide image and set the width parameter (width=”570”). This slows your page load time and creates a bad user experience.

Reduce colour depth to the lowest acceptable level

Remove image comments

Image format

  • JPEG is your best option.

  • PNG is also good; though older browsers may not fully support it.

  • GIFs should only be used for small or simple graphics (less than 10×10 pixels, or a colour palette of 3 or fewer colours) and for animated images.

  • Do not use BMPs or TIFFs.

SRC attribute

Once you’ve got the size and format right, make sure the code is right too. In particular, avoid empty image SRC codes.

In HTML, the code for an image includes this:

<img src=””>

When there’s no source in the quotation marks, the browser makes a request to the directory of the page or to the actual page itself. This can add unnecessary traffic to your servers and even corrupt user data.

Pro Tip: Take time to re-size your images before uploading them. And always include the SRC attribute with a valid URL.

To ensure your images load quickly, consider adding the WP Smush.it plugin to your website.

5. Use cache for static content

For static files like CSS, Javascript and images add the cache duration, so that those resources are saved in the browser and repetitive requests will be served better. To resolve the issue of using the old file even after making changes to the files in server use the URL fingerprinting concept.

6. Use CDN for static files if possible

  Use CDN for static files like Javascript, CSS and images. CDN stores the static resources in multiple end points. When these static files are requested files are served from the nearest endpoint.

7. Minify JS and CSS

Before moving files to production minifying JS and CSS files will reduce the size of files and improve the load time and performance.

8. Use gzip compression technique

It is possible to compress the files while they are transferred to the browser from the server and all modern browsers understand the gzip format and files are uncompressed at the client side. With this technique file sizes are reduced and files are downloaded quickly.

Following these steps will ensure that the speed of your websites is optimized and it will improve user experience for visitors on your siteIf you do need help in optimizing your website, our experts will be more than happy to help you out. Just drop in a word here and you’ll hear from us shortly.

Elizabeth Raj | Blogger

Manjunath Govindappa ASP.NET Technical Lead

Leave A Comment

Aix-en-Provence – Bangalore – Montreal

We love diversity and we work out of 3 fabulous cities, on 3 continents, and 3 time zones.


Contact us
We’ll get in touch with you ASAP!