Improve performance of website is big story. Today, I'll share with you 5 tips to speed up your website.
First step, you should check speed of website by some tools such as:
+ GTmetrix
+ PageSpeed Insights
+ WebPageTest
Each of tools will show elements, components which should change to improve performace your website and almost them focus on 5 things:
1. Make Fewer HTTP Requests
80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.
These techniques include using:
-
CSS Sprites
-
Combined scripts
-
Combined stylesheets.
CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.
Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times.
2. Add an Expires Header
When the first time user visit to your page may have to make several HTTP requests, but by using the Expires header you make those components cacheable. This avoids unnecessary HTTP requests on subsequent page views.
Browsers use a cache to reduce the number of HTTP requests and decrease the size of HTTP responses, thus making web pages load faster. A web server uses the Expires header to tell the web client that it can use the current copy of a component until the specified time.
Example: expires:Thu, 31 Dec 2037 23:55:55 GMT.
It's telling the browser that this response won’t be stale until Dec 31, 2037.
*How to configurate in Nginx:
http{
...
server{
...
location ~* ^.+.(jpg|jpeg|gif|css|png|js|ico|xml|mp4|woff2|ttf|woff)$ {
add_header Pragma public;
add_header Cache-Control "public, must-revalidate, proxy-revalidate";
log_not_found off;
expires max;
etag on;
}
}
}
*You can see the result in browsers:
3. Gzip Components
This is the easiest technique for reducing page weight and it also has the biggest impact.
Compression reduces response times by reducing the size of the HTTP response. If an HTTP request results in a smaller response, the transfer time decreases because fewer packets must travel from the server to the client.
Starting with HTTP/1.1, web clients indicate support for compression with the Accept-Encoding header in the HTTP request.
Accept-Encoding: gzip, deflate, sdch
If the web server sees this header in the request, it may compress the response using one of the methods listed by the client. The web server notifies the web client of this via the Content-Encoding header in the response.
Content-Encoding: gzip
Gzip is currently the most popular and effective compression method.The only other compression format you’re likely to see is deflate, but it’s slightly less effective and much less popular.
*How to configurate on Nginx:
http{
...
gzip on;
gzip_min_length 1024;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml image/gif image/jpeg image/png image/jpg i$
gzip_disable "MSIE [1-6]\.";
server{
...
}
}
*You can see the result in browsers:
*Notes: Image and PDF files should not be gzipped because they are already compressed. Trying to gzip them not only wastes CPU but can potentially increase file sizes.
4. Put Stylesheets at the Top and Scripts at the Bottom
-
Put Stylesheets at the Top
Put stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively.
Put your stylesheets in the document HEAD using the LINK tag.
-
Put Scripts at the Bottom
The problem with Scripts caused by scripts is that they block parallel downloads. That mean any components below a script aren't downloaded until after the script is loaded, regardless of hostname.
Example:
The best place to put scripts is at the bottom of the page.The page contents aren’t blocked from rendering, and the viewable components in the page are downloaded as early as possible
5. Optimize Images
a. Optimize CSS Sprites.
b. Avoid Empty Image src.
c. Specific dimentions of images
Why? Why we have to specific dimentions (height and width) of images. Because if the image without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).
Example:
<img src="luanotes.png" alt="Luanotes" height="100" width="50">
d. Lossless vs lossy image compression
- Image is processed with a “lossy” filter that eliminates some pixel data.
- Image is processed with a “lossless” filter that compresses the pixel data.
We can manually compress image by tools as:
+ optipng: lossless PNG optimization
+ pngquant: lossy PNG optimization
Or auto compress by some gems (in Rails app):
+ paperclip-compression
+ paperclip-optimizer
+ image_optim
I hope that this article is useful for you. If you have other good solutions, please comment in below to discuss.