article

Fast enough? 9 tips for web page optimization

The world is large, and the internet isn't fast everywhere. Web optimization needs to ride along with user needs. Don't waste your time with performance if it will not enhance user experience. Instead, try to study how users interact with your application. Ask yourself: what is the first thing a user needs to see on my page? Does (s)he see it? If it doesn't match, it is time to make some improvements.

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. Browsers can't cache inline JS/CSS. So every time users access your page, the content will be downloaded.

2. Avoid Unnecessary Plugins:

Do you need this plugin? jQuery is crucial on this project? Analyze your plugins and try to remove what is not necessary. If you use a 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 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

Merge the files:

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

Use concatenation tools to merge files and minification to reduce 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 on your page should start executing.

The HTML file is rendered right 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 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 tend to 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 uploading 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

Web optimization tools for reference:

  • 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 like to join the discussion? Please, leave your comments below.

Felipe Farias

Founder and Frontend Deveveloper