It is very important for the website to load as quickly as possible; users want to quickly view the page they want to see, and if you can't satisfy them, they will look for it elsewhere. In this article, you will see a discussion of five simple and effective techniques to speed up your web pages.
Knowing the loading time of the website is the first step before deciding what goes wrong. It also lets you know if you need to make changes for your website speedup.
Before we start, if you haven't installed yslow yet, please install it. It is an extension of mozilla firefox, you can find it from the link below:
First, let's browse the six revisions website, we all use the same example to test it (only need to open in a new tab or browser window).
In the browser, there is a column of the odometer (as shown in Figure 1). Next to it, when the web page has finished loading, you will see yslow and numbers. The number represents the time (in seconds) it takes for the browser to load a website. We want this number to be as low as possible.
Figure 1: yslow icon and odometer showing web page loading time
In most cases, one or a group of reasons that cause a long loading time of web pages are as follows:
We'll discuss these later.
In order to make sure the loading time of your own website is displayed, browse some websites. Check out Google, Facebook, and some blogs and websites you like. You will notice that the more images the website uses, the longer the response time the js page will be.
In addition to measuring how fast it loads, yslow provides you with some in-depth insights like what you can do to improve your website performance, as well as the lack of load performance of your website.
The picture below is the 'Performance' tab (as shown in Figure 2). But if you click on it, it will show the details of each area that affects loading time and overall performance.
Figure 2: Performance tags
In this field, the most subjective choice is to use cdn (content distribution network).cdn is very effective for large websites. What they do is spread website content across servers across various regions. The closer the physical server is to the user loading a website, the faster a page is. So essentially, using cdn is to distribute content from the server to the closest accessed page user.
Figure 3: Performance tags use letters (a, b, c, d, f) to represent grades and current grades (1-100).
aside from using a cdn (which can be costly) - everything else is doable.
Let's run through each level factor, here's a brief second speed for each level field and how to solve these problems to achieve optimal performance.
Reduce http requests : When a web page obtains files from the server, an http request will be generated. The scope includes scripts, css files, pictures, and asynchroneous client/server requests (ajax and other changing technologies). This is the key point when talking about performance, but it can be easily solved with just a little effort. For example, it is often helpful to merge scripts, css, and images as much as possible, cache files on the user's machine.
Add term header : 80% of the page loading time is related to download scripts, pictures and css. In most cases, these elements will not change in the user's machine. You can cache the code in the .htaccess in the user's local machine (we will discuss how to operate later in the article).
gzip component : gziping or compressed js files, pictures, html documents, css documents, etc. Users can download smaller file versions to increase the loading speed of web pages. This can reduce server consumption, but decompression components can also cause page response to slower, depending on the user's browser.
Put css at the top : Put the css file at the top of the website, which can load other parts such as images and text as possible at the same time.
Put js at the bottom : Put css at the head of the document, you only need to insert js before closing <boby>. While these scripts are loaded in the background, the user first gets the seemingly complete page.
Avoid css expressions : I have never used css expressions (called dynamic features), which are just a css feature that adds programming concepts (such as control/conditional structures), as of ie8, the Trident layout engine (used in ie) is no longer supported. Anyway, they don't have a good idea to use. To some extent, I would use php scripts to load different css style rules based on different conditions, such as a random number, time of day, or browser.
External calls to js and css : Put js and css files in external files, and the browser caches them with faster page loading speed than each call.
Reduce dns search : As long as the user types a domain name in the browser's address bar, the browser will always perform dns searching for IP addresses. The more entry locations the website has, the more necessary dns searching will be. Keep the level as low as possible, and perform a dns query on average 60-100 milliseconds.
Zoom in js : Unlike general gzip compression, Zoom in js documents is to remove unnecessary spaces, tabs, and other selection characters of Zhonghe Yang, reduce the total size of the file, and smaller pages can get faster loading speed. You can use jsmin to zoom in javascript.
Avoid redirection : Whether it is server header redirection, js redirection, or html element redirection. Your website will load the header of a blank page and then a new page. Users spend more and more time to get the page they need, so they should avoid this at all costs.
Remove duplicate scripts : The browser loading the same script will increase the load time of the page, which is a very simple math problem, more files equal more load time. Double-check your website to make sure you don't call jquery twice or three times or other scripts.when… that was a lot, let's move on to the next tab of yslow just before we get into some other techniques to increase the performance of your website.
Figure 4: Parts label.
Part tags (as shown in Figure 4) can provide insight into the effects of increasing website loading speed. Here you can see how long the current document needs to load, if these files are compressed, the response time, and if they are cached in the user's machine and when the cache expires. This is a good assessment of the website, measuring its performance and speed optimization. Finally, the Statistics tag (as shown in Figure 4), which shows us all http requests, the documents downloaded at the same time, and the files cached. empty cache displays the file that the browser needs to download the rendering page. primed cache, on the other hand, displays a list of files that already exists in the user's browser cache, thus saving the browser's request to not have to download the file again.
Figure 5: stats tab.