Techniques to optimize website download speed
Select Server In Reasonable Location
Server is an important component in speeding up website downloads. If you use a slow and cheap server to host the site, no matter how fast you use the website's optimization techniques, the website is still slow. So the first thing to do is to choose a server that is located in a reasonable location. Note, the server with a reasonable location does not have to be a server located near your home but near people who visit the website. If you are in Hanoi while users of the site you created are mostly in Ho Chi Minh City, you should set up a server in Ho Chi Minh City.
Using the Content Delivery Network
The Content Delivery Network (CDN for short) is a collection of servers used to share open source libraries (these libraries are commonly used on many websites around the world). The characteristics of CDN servers are that they are located in many different locations and when using libraries hosted on CDNs, the library will be downloaded from the server closest to the location of the client. For example, when you are in Vietnam and open a browser to access the Facebook page, the Facebook page returns an HTML code page that contains references to a jQuery library and the source of this library using an address provided by Google's CDN as follows:
1 | <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script> |
Your computer will then download this library from the nearest Google CDN server, which is a server located in Singapore.
Minify Files CSS and Javascript
Minify code is a technique used to minimize the capacity of files to help them download to the client faster. For example, you have a Javascript file like this:
1 2 3 4 | // Current year var nam_nay_la_nam = 2016; // Next year var nam_tiep_theo_la_nam = nam_nay_la_nam + 1; |
Then after minify the above code will have the following content:
1 | var a = 2016; var b = a + 1; |
Here variable names are changed to shorter names, annotations are also removed and unnecessary spaces are removed to reduce the file size.
Image Compression
Compressing (or compressing) images is a technique used to reduce image sizes, which makes downloading images faster. Images that are normally compressed include images with high resolution images (such as PNG) on lower resolution images (such as JPEGs), large-sized images that convert to smaller-sized images with the same aspect ratio length x width … You can compress images using image editing tools like Photoshop. Also, for websites where content created by users (such as social networks like Facebook or 9Gag), image compression is particularly important. With these websites, programmers need to write code so that images are compressed automatically when users upload photos. However, almost all programming languages provide libraries to help you do this compression.
Include Javascript Files, CSS … Referenced On The Same Page
One factor that causes the website to run is that the HTML page of the website after being downloaded by the browser has too many references to other Javscript or CSS files that the browser must continue to download these files before end the process of showing the page to users. Therefore when the site has many files, it is necessary to include the contents of these files into a single file to minimize the browser having to send many different requests to the server.
Caching
This is also an important technique especially useful when your site has large traffic. Caching techniques are not as complicated as many people think. First of all, you should note that this technique is applied on dynamic websites with content provided by such a database (MySQL) instead of pure HTML pages. Its operating principle is simple: save the content of HTML pages (created after calling the query to the database) with little changed content but much access. For example, a page on hoclaptrinh.org includes a list of courses as follows:
1 | http://hoclaptrinh.org/khoa-hoc |
When the first user accesses the above address, the server will query the database to find a list of created courses. Then based on the result of the data returned from the database, the server will generate the corresponding HTML page to return to the user. However, because the list of these courses is little changed, it would be more reasonable to We save the result for the first user to use for the next user. Doing so avoids having to query the database multiple times, just return the cached HTML page immediately.