Building faster websites

Maurício Linhares / @mauriciojr

Make it fly

It doesn't matter your customer in in a really fast connection, if you don't pay attention to how your data is served, it will still be and look slow.

Use tools to measure your front-end performance

• http://yslow.org/
• https://developers.google.com/speed/pagespeed/

Enable HTTP/2

Check how to do that to your server software

Make fewer HTTP requests

How?

Bundle assets files into a single file

This means merging all JS and CSS files into just one of each

If you're using Rails...

... make sure you're using the assets pipeline to serve JavaScript and CSS files

Use CSS sprites

Code

#navbar .nav-sprite {
  background-image: url("http://g-ecx.images-amazon.com/images-2x-v1.png");
  background-size: 350px;
  background-position: -10px -340px;
  height: 26px;
  width: 46px;
}

Put CSS includes at the top of your page

Put JavaScript includes at the bottom of your page

Use Expires or Cache-Control headers whenever possible

Page or static content that doesn't change often? You must include an Expires or Cache-Control header.

If you're using Nginx

location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
  expires 30d;
  add_header Pragma public;
  add_header Cache-Control "public";
}

Compress/Gzip your assets

gzip  on;
gzip_http_version 1.1;
gzip_vary on;
gzip_comp_level 6;
gzip_proxied any;
gzip_types text/plain text/html text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript text/x-js;
gzip_buffers 16 8k;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";

Use a CDN to distribute your static content

Content delivery networks will have edge locations closer to your users and will provide faster results for your static assets. CloudFlare and Amazon CloudFront are great options.

Optimize images and do not scale them in HTML

Use pngcrush and jpegtran to remove useless stuff from your images.

Avoid redirects

Try to always serve content whenever a user requests a URL

Using AJAX? Make it cacheable

The end! Thanks!

Maurício Linhares / @mauriciojr