Building faster websites
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
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