Over time, website owners may want to speed up website loading. This will help boost website ranking in the search results. In addition, website visitors will have a better user experience thanks to a faster response to their actions.
Sometimes, looking for a simple and quick solution, website owners install countless plugins, which consume resources and only slow down web resource operation. We are all for optimization plugins, but we believe you need to understand how they function to make the most out of them.
In addition, website owners who have never administered a website, are often observed to have a wrong understanding of optimization. Optimization is perceived as speeding up the script at any cost, while the task of optimization is to ensure the optimal website speed with optimal resource consumption. Therefore, there are no uniform guidelines for all websites.
There are several basic methods used to speed up the website:
- reduce the volume of transmitted data;
- reduce the time needed to forward the request from the client to the server and back;
- speed up the processing of the code on the server;
- make the user feel that the website works faster using visual effects.
Several tools allow increasing the website response rate with minimum costs:
1. html/css/js/im compression using GZIP
GZIP module is included on all our servers by default. However, for the compression to work on your website, enter some setting in the configuration through the .htaccess file. Go to the website’s root folder and open the .htaccess file in edit mode. If this file is missing, create it with a period before the name. Add the following directives to this file:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
It will be enough to include compression. You can check whether the compression works using checkgzipcompression.com.
2. Minimize styles and js scripts
Minimization is removing extra spaces and tabs, replacing variable names in the scripts and other tricks that allow reducing the file size. Developers use several tools for this task. Style files can be automatically compressed using the Yui compressor, CSS Tidy; Javascript scripts can be compressed through JSmin (for simple cases), Yui compressor (the best option when gzip is used). Read the reference materials for these solutions to implement them into your project.
3. Image optimization
Images are usually the main bottleneck that slows down website loading at the stage of data transfer from the server to the browser.
Several years ago, there were disputes around PNG and GIF formats. Today, all views are unequivocal: in most cases, you need to use PNG files on your website. GIF format should be used only for animated images, as PNG animation is not compatible with all browsers. In older IE (6/7) versions, translucency is not supported in PNG. It makes sense to use GIFs for these browsers.
There are dedicated utilities for compressing PNG icons: pngcrush for Linux and tweakpng for Windows. They are not supported on our hosting platform, so optimization should better be tested at the stage of development, on the local server, before moving the website to the hosting platform.
ICO format is used only for favico.ico. This is a website icon displayed in the browser tab. We recommend having this file on the server in any case. If it is missing, the server will return a 404 error, which will take more time than the icon display. The optimal icon size is ~1KB. You can use GZIP compression for favicon.ico files.
Large images are stored in JPEG format. The downside of this format is metadata transmitted along with the image. Metadata is information on the image: the author’s name, creation date, description, and so on. These data can be deleted with the help of the jpegtran utility or its analog.
4. Header optimization
Headers are transmitted with every request to the server and response from the server. This is information on what the data are to be transmitted and how they will be used by the recipient. It is critical to optimize headers for large files. The optimal header size is 500B. Cookie headers are critical (according to the specification, they can be up to 4KB in size). For this reason, some optimization evaluation services recommend using a cookie-free host for static resources. For instance, images can be stored in the designated subdomain or subdirectory where cookies are disallowed using the htaccess file.
5. Caching
To ban caching, specify the current date in the expires header. Or enter 0 in the max-age.
You can remove the cache for the element by replacing its address in the template, yet this is not always convenient. You can set up a redirect from the old address to the new one using htaccess. The third option is to add a unique get parameter to the link to the resource.
Conditional caching is configured via the last-modified header. On the plus side, the client is guaranteed to receive the up-to-date version of the file. Its drawback is an additional request to the server, which increases the overall load time. This should be used when the file size is rather large (e.g., pdf weighing several MB).
ETag is an analog of last-modified for the cluster of the server required for the synchronization of data on the file version between servers. It serves to ensure that files on different servers are identical (text/binary content, date of creation/modification, permissions, etc.).
More on caching headers can be found on resources related to web administration.
6. File merging
Styles can be merged using @media all, @media henheld and @media print directives.
Merging everything in one file can be useful in case of small data volumes. The downside is that the user may be given a code that will not be used.
If style files reach 20 KB in total, it is recommended to upload them as one file, if there are more, it is better to use several CSS files for different templates.
7. Data:URI
In the general sense, this is a technology for recording binary content in the text format. For an average website, this technology may be used to embed the image directly into the HTML code to reduce the number of requests to the server. Thus, the image can be downloaded along with the entire page, and not as a separate file.
Drawbacks:
- not supported in IE7;
- file size on average increases by 30% when being converted in base64;
- caching does not work for images displayed via Data:URI.