1. Merge Js files and CSS.
Merging JS code and CSS styles into one file can not only simplify the code, but also make multiple "Get" requests when executing JS files, thus prolonging the loading speed. After merging JS files, the number of Get requests will naturally decrease and the loading speed will also increase.
2. Elf picture technology
Spriting is a web page picture application processing method, which includes all scattered pictures involved in a page into a big picture and then displays it through CSS technology. In this way, when visiting the page, the loaded pictures will not be displayed one by one as before, which can reduce the picture size of the whole page, and CSSSprites can well reduce the http requests of the page, thus greatly improving the performance of the page. Many people in China call it cssSprites, which has existed for a long time and is used by many large websites, especially some icons that exist on all pages, which greatly improves the loading speed.
Step 3 compress text and pictures
Compression technologies such as gzip can effectively reduce the page loading time. Including HTML, XML, JSON(JavaScript object symbol), JavaScript and CSS. The compression rate can be around 70%. Text compression is widely used, generally just open it directly in space, image compression is more casual, and many of them are uploaded directly, but the compression space is still very large.
4. Delay the display of content outside the visual area.
In order to ensure that users can see web pages in the visible area faster, delay loading or displaying content outside the visible area, and avoid page deformation, you can use placeholder labels to set the correct height and width. For example, the jQueryImage LazyLoad plug-in of WP can't load any picture information above and below the fold when the user stays above the fold. Only when the user scrolls down the mouse will these pictures start to load. This obviously improves the loading speed of the visual area and improves the user experience.
5. Make sure to load the function picture first.
The website mainly considers the importance of usability. To load a function button in advance, the user enters the download page. A download only takes 8s, and it takes 5s to wait. Find the download button picture. Who can stand it?
6. Rearrange the call-to-action buttons
In fact, this is similar to the above one, starting from the user experience speed, skipping the overall loading speed of the webpage. The speed hasn't changed, but some action buttons have been advanced. Call to action buttons are usually designed at the bottom of the page, which is not always good for users. Buyers need to wait until the bottom is loaded before clicking next. You can adjust the position of the CTA button or use the slide picture button. Many large shopping websites add shopping carts to this type.
7. Image format optimization
Improper image format is a common cause of slow loading speed. The correct picture format can make the picture shrink several times, if it is saved in the best format. It can save a lot of bandwidth, reduce processing time and greatly speed up page loading, which is a very common practice.
8. Use progressive JPEGs
ProgressiveJPEGs pictures are a special variant of JPEG format, named "Advanced JPEG". When creating advanced JPEG files, the data is arranged as follows: when loading images, only blurred images are displayed at first, and with the loading of data, the images gradually become clear. It is equivalent to an interlaced graph in GIF format. Advanced JPEG is mainly designed for slow networks using modems, and users of fast networks usually don't realize the difference between it and ordinary JPEG images. For users with slow network speed, this undoubtedly has a good experience.
9. Simplify the code
This can be said to be the most direct method, but also used a lot. We should slim down the web page code and delete unnecessary duplicate codes, such as unnecessary spaces, line breaks, comments, etc. , including the useless code in JS code. Some of them may misunderstand the removal of comment code, and some even pile up keywords in it.
10, delaying loading and executing unnecessary scripts.
There are many scripts in a web page that don't need to be executed until the page is fully loaded, so you can delay loading and executing unnecessary scripts. These scripts can be executed after the onload event to avoid affecting the display of important content on the web page. These scripts may be toluene from their own web pages, and are often more third-party scripts. There are many such scripts, such as comments, advertisements, smart recommendations, Baidu cloud pictures, sharing and so on. These scripts can be executed after the main content is loaded.
1 1, using AJAX.
AJAX, namely "asynchronous Javascript +XML", refers to a web development technology for creating interactive web applications. AJAX can make web pages update asynchronously by exchanging a small amount of data with the server in the background. This means that you can update a part of a webpage without reloading the whole webpage. If the content needs to be updated, the traditional web page (without AJAX) must reload the whole web page.
12, automatic page performance optimization
Automated page performance optimization means using tools. There are many tools to speed up the website. Here Radware recommended his own RadwareFastView, which is an advertisement for himself. Not much to say here.