15 tips: quickly reduce page loading time

Perhaps because more and more people are using large water pipes, front-end programmers almost leave the optimization work of the web pages behind. As more and more widgets and javascript code are added to the webpage, the webpage slows down. The instantaneous loading speed makes you feel like taking a breath of fresh air. Programmers sometimes ignore some very simple rules, which reduces the user experience.The loading speed of pages determines users' emotions., Especially for e-commerce websites. The following are some of the reasons why it is so important.

Quick loading can improve user experience.The user pays attention to the loading speed of the page, or consciously or unconsciously. It is like a player in a team who is concerned only when he is not performing well.
Loading quickly makes people feel refreshed.The loading speed of web pages may affect your search engine ranking. Google has clearly stated that they are very concerned about the loading speed of web pages and will affect the indexing of Adword web pages, so they will not occupy a large proportion of the ranking.
If the loading speed is too slow, you will lose money.It is estimated that every year, e-commerce websites will lose 1.1 billion to 1.3 billion of their revenue due to slow loading.

Loading speeds even the best web design will be buried. There are some good methods and tools to help you build a fast and smooth website.

 

1. A basic web Analyzer

There are many optional tools, but I always use "Web Page Analyzer" to check General errors and determine the health of the Website Based on the loading speed. This analysis tool can display massive data, such as the number of script codes and files, which may affect the loading speed. (This tool is very stingy, so the K image warning-Translator's note)

2. Pingdom

Pingdom can help you check damaged image links or links to test the loading speed of your images and scripts.Bad links and images are the main cause of slow loading.For example, after I analyzed my blog LifeDev, I found an error script and two invalid images. After these errors are fixed,The loading speed of the website is doubled.

It also has another function, that is, you can see the time spent in each phase of the load. Pingdom uses different colors to represent each stage of the loading process, such as starting the connection and loading the first byte to the last byte. In this way, you can know where the time is wasted.

3. Put the file locally

Although this will consume some bandwidth, replacing the photo management service with local files (such as flickr.com) can save the time for the browser to download images from outside the site. Local files are always faster than external files.

4. Set the image length and width.

This is an example of Correctly Setting the image length and width:

Width = "125" height = "250 ″/>

The length and width of an image are quite different.If the length and width are set, the browser loads other content before the image is downloaded, and reserves the image space on the webpage.Otherwise, the browser will wait until the image download is complete and then load the remaining content.

5. Use widgets with caution

Even if widgets (Small Window plug-ins, small firmware, small devices, and so on, there are all translations, which are reserved here) are very cool and have some extraordinary functions, however, considering the sacrificed loading speed, it is not difficult to forget it. If your website fails due to a widget, delete it.

6. use static Cache

There are many solutions for caching. In essence, cache refers to converting pages written in dynamic languages (such as PHP) into static pages. Servers are incredibly good at processing static pages.Converting dynamic pages into static pages can reduce server load and reduce loading time.There are some cache tutorials for popular languages for your reference:
* PHP
* Rails
* Perl
* Java
* ASP

7. Accelerator

Dynamic languages usually have scripts to help accelerate the operation. If you are using PHP, these scripts may be helpful: APC, Zend cache, Xcache

8. Firebug

Firebug is an extension plug-in of Firefox browser embedded in the browser. A major function of Firebug is to analyze every aspect of the web page, especially the loading speed.

9. Optimize CSS

Reducing JS and CSS code can greatly improve the loading speed of webpages. You can use some online services such as "CSS clean" to optimize your CSS code and delete unnecessary things such:
* Space
* Line Break
* Extra characters
* More code Compression Based on the level

10. Use multiple domain names

If your webpage has many things, we recommend that you bind several domain names, such as server.example.com and server2.example.com. You only have limited connections to the browser at the same time,If you bind multiple domain names (even if you use the same IP address), you can download multiple objects at the same time.

11. Simplified Cookie

Just like our daily diet, we don't need to eat too many cookies if we want to keep healthy (load fast ).Excessive cookies will slow down the loading speed of each web page.Make sure that your cookie has been reduced to a minimum, and the use of the cookie is also optimized.

12. Use an independent domain name for Cookie Resources

To optimize cookie usage, you must use an independent domain name for the resource. This is very helpful for people who use top-level cookies. When you download files from the above, a cookie file will be attached. If you use different domain names, this situation can be avoided. For example, Yahoo! Use yimg.com to store their resources.

13. Optimize Javascript

Like optimizing CSS (#9), JS Code also needs to be optimized. Use "Dean Edward's packer" to streamline the redundant parts of JS Code.

14. Merge JS files

Generally, downloading a bunch of small scripts is much slower than downloading a large script.That is to say, merging JS Code can speed up webpage loading.The simplest way is to open the file and copy and paste the code (very easy ). However, sometimes it can be simpler:
* PHP
* Smarty (PhP template LANGUAGE)
* Rails
* ASP

15. Use the content delivery network

If your website has a large number of international visitors, we recommend that you use the content delivery network (CDN ). The content delivery network can automatically determine the location of the visitor and select the location of the server. For example, if an Australian dairy cow wants to contact its distant relatives in China through the Internet, the Internet will slow her milk. However, if she uses the content delivery network, she will be automatically logged on to the server (or near) in Australia, so she will soon find that her relatives have changed to melamine.

 

Conclusion

Sometimes new features are as easy as spending money, but based on historical experience, less is more.Fewer images, scripts, and widgets mean rapid loading, while rapid loading means a higher user experience.