Blog

Ideas and insights from our team

Fast enough? 9 tips for web page optimization


Our world is large, internet isn’t fast everywhere. Web optimization needs to ride along user needs. So don't waste your time with performance if it will not improve user experience. Instead, try to learn about how users are interacting with your page. Ask yourself: what is the first thing a user need to see in my page? Does (s)he see it? If it doesn't match, it is time to make some improvements.

Table of Contents:

  1. Avoid Inline JS/CSS Files

  2. Avoid Unnecessary Plugins

  3. Avoid HTTP Requests concatenating files

  4. JavaScript Only at the End

  5. async vs defer attributes

  6. Appropriate images for each device

  7. CSS3 Instead of images

  8. Image Sprites

  9. Testing Performance

So here are some optimizations to keep in mind:

1. Avoid Inline JS/CSS Files:

<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

It's a bad practice to write inline code. Not only because code is more difficult to read and maintain, but also because of performance. Inline JS/CSS can't be cached by browsers. So every time users access your page, this content will be downloaded again.

2. Avoid Unnecessary Plugins:

You really need this plugin? jQuery is really crucial on this project? Analyse your plugins and try to remove what is not necessary. If you use responsive front-end framework like Bootstrap or Foundation keep in mind that it has a lot of stuff. Download a customized version only with the main components you need.

3. Avoid HTTP Requests concatenating files:

Always try to avoid unnecessary requests. See the example below:

http://www.vinta.com.br/js/requests.js
http://www.vinta.com.br/js/github.js
http://www.vinta.com.br/js/slider.js

You can merge the files into one:

http://www.vinta.com.br/js/custom-scripts.js

You can use concatenation tools to join all files into only one and minification to remove unused characters reducing file sizes.

A good way to integrate concatenation and minification in your projects is Grunt. It is a JavaScript task runner with literally hundreds of plugins to choose from. Specifically for concatenation and minification it has grunt-contrib-concat (concatenation) and grunt-contrib-uglify (minification).

4. JavaScript Only at the End:

JavaScript blocks additional resources from being downloaded. Putting it at the bottom of the document will let all other elements (like images and CSS) load giving the perception of improved performance.

5. async vs defer attributes

The HTML <script> element allows you to define when the JavaScript code in your page should start executing.

HTML file will be rendered only after it has finished the download.

<script src="sample.js"></script>

web-opt-script1.png

async scripts will be executed asynchronously as soon as it is available. It will pause the HTML parser to execute it when it has finished downloading.

<script async src="sample.js"></script>

web-opt-script2.png

defer downloads the file during HTML parsing and will only execute it when the page has finished rendering.

<script defer src="sample.js"></script>

web-opt-script3.png

If you need to support IE9 don't use defer in your project and include your scripts with no attribute if the execution order is a concern.

6. Appropriate images for each device:

//Lower-resolution images
@media (max-width:440px) {
.image {
background-image: url(image-lower.jpg);
}
}

//Hi-resolution images
@media (min-width:441px) {
.image {
background-image: url(image-hi.jpg);
}
}

The idea is to have users downloading only those images that are best suited for their devices. In the case of mobile devices, this would be lower-resolution images that can be quickly rendered.

7. CSS3 Instead of images:

Programmers still use more images than necessary.

buttons-example

A lot of elements like: buttons, rounded corners, shadows, gradient, etc, can be rendered by CSS3 reducing the number of HTTP requests and speeding up loading time.

8. Image Sprites

The idea behind sprites is to combine images into a single image file, reducing the number of HTTP requests.

sprites

The image is displayed by using the CSS background-position property.

<ul>
<li class="img-amazon"></li>
<li class="img-meteor"></li>
<li class="img-angular"></li>
</ul>
//Defining image size.
.ul .li {
background-image: url("http://www.vinta.com.br/images/sprites.png");
width: 150px;
height: 150px;
}

//Optional class.
.img-amazon {
background-position: 0; 
}

.img-meteor {
background-position: 150px 0;
}

.img-angular {
background-position: 300px 0;
}

For more information about background-position access MDN.

9. Testing Performance

Here are some useful web services and tools that will give you good information about web optimization.

  • PageSpeed: PageSpeed tools analyze and optimize your site following web best practices.
  • Yahoo! YSlow: YSlow analyzes web pages and why they're slow based on Yahoo!'s rules for high performance web sites

Do you have anything to add? Leave your comments down bellow.

About Felipe Farias

50% designer, 50% developer, with a salt of product development. Will judge every interface he sees and will steal good design ideas (as Master Jobs recommends).

Comments