12 suggestions to improve website page opening speed_html/css_WEB-ITnose

We know that users like websites with fast browsing speeds and don’t like to spend too much time waiting for web pages to open. Waiting for too long will make users lose patience and even close them directly when they are irritated. Web page, this will lose some potential customers.

Secondly, from an SEO perspective, keyword rankings are also related to the opening speed of web pages. Google’s web search team once announced on the official blog that it will use the speed of the website as the PR (PageRank) algorithm is a factor by which, all factors being equal, faster sites will be ranked ahead of slower sites. At the same time, it is pointed out that many websites do not use the best page optimization technology, and the page loading speed has great flaws. So, how can we remedy this and improve the loading speed of our website pages?

1. Merge JS files and CSS

Merge JS code and CSS styles into a shared file, which not only simplifies the code , and when executing JS files, if there are many JS files, multiple "Get" requests will be required to extend the loading speed. After merging the JS files together, the number of Get requests will naturally be reduced and the loading speed will be improved ( For details, please check the relevant introduction of "6 Website Front-end Optimization Methods to Improve Website Speed" on Ma Haixiang's blog).

When a user opens a web page designed with CSS, the CSS is generally downloaded to the user's local computer. Unlike the HTML element that expresses tags, it must be called once for each web page of the website. With CSS, it only needs to be called once! In addition, css can replace images in some places, which is why div css is now advocated!

2. Sprites image technology

Spriting is a web image application processing method. It includes all the sporadic images involved in a page into one large image. , and then display it using CSS technology. In this way, when the page is accessed, the loaded images will not be displayed slowly one by one as before, which can reduce the image size of the entire web page, and the use of CSSSprites can effectively reduce the size of the web page. http request, thus greatly improving the performance of the page.

CSSSprites are called css sprites by many people in China. They have been around for a long time and are used in many large websites. In particular, some icons that exist on all pages are used more often, which can greatly improve the loading speed.

3. Compress text and images

Compression technology such as gzip can effectively reduce page loading time. Including HTML, XML, JSON (JavaScript Object Notation), JavaScript and CSS, etc., the compression rate can be around 70%.

Generally, text compression is used more often, and usually it can be turned on directly in the space. However, image compression is more casual, and many of them are uploaded directly. In fact, there is still a lot of compression space.

4. Delayed display of content outside the visible area

In order to ensure that users can see the visible area of ​​the web page faster, web pages can delay loading or display content outside the visible area. To avoid page distortion, use placeholder tags to specify the correct height and width.

For example: WP's jQueryImage LazyLoad plug-in can not load any image information below the first screen when the user stays on the first screen. These images will only be loaded when the user scrolls down. Start loading. This will obviously increase the loading speed of the visible area and improve the user experience.

5. Ensure that functional images are loaded first

The website mainly considers the importance of usability. A functional button should be loaded in advance, and it only takes 8 seconds for the user to enter the download page. Who can endure the downloading process that takes 5 seconds of waiting and looking for the download button image? (For the solution, you can learn more about it through the introduction of "3 Technical Methods to Achieve Web Page Image Preloading Effects" on Ma Haixiang's blog)?

There is another problem that needs attention: some people often forget to write the length and width of the image. These marks tell the browser the size before opening the image. If the height and width of the image can be set in advance, When the browser loads a web page, it will reserve an area to speed up the display of the entire web page.

6. Rearrange the Call-to-Action button

Actually, this is similar to the one above. They all start from the user experience speed and skip the web page. Overall loading speed. The speed has not changed, but some action buttons have been advanced. Call-to-Action buttons are generally designed at the bottom of the page. This habit is not always good for users. Buying users need to wait until the bottom is loaded before clicking next. operate.

You can adjust the position of the CTA button or use a sliding picture button, which is the type of add to cart on many large shopping websites.

7. Image format optimization

Inappropriate image format is an extremely common culprit that slows down loading speeds. The correct image format can make the image smaller several times. If saved in the best format, it can save a lot of bandwidth, reduce processing time, and greatly speed up page loading. This is a very common practice.

8. Use Progressive JPEGs

Progressive JPEGs pictures are a special variant of the JPEG format called "Advanced JPEG". When creating an Advanced JPEG file, the data is arranged in such a way that when the image is loaded, only a blurry image is initially displayed. As the data is loaded, the image gradually becomes clearer, which is equivalent to an interlaced GIF format picture.

Advanced JPEG is mainly designed with slow networks using modems in mind. Users on fast networks usually won't notice the difference between it and normal JPEG format images. This is undoubtedly a good experience for users with slower Internet speeds.

9. Streamline the code

This can be said to be the most direct method, and it is also used more often. It slims down the web page code and deletes unnecessary redundancies. Redundant code, such as unnecessary spaces, newlines, comments, etc., including useless code in JS code also needs to be removed.

Under the same network environment, the smaller the page, the faster the download time will be. Therefore, reducing the page size within a reasonable range can optimize the download speed. The page size is mainly determined by the amount of HTML code (of course it may also include some css or js code, but the main body is still HTML code). If you want to reduce the size of the page, you must optimize the HTML code according to W3C standards. Structure, remove some junk and meaningless code.

Some people may have misunderstandings about the cleaning of comment code, and some may even pile keywords in it.

10. Delay loading and execution of non-essential scripts

There are many scripts in the web page that do not need to be executed before the page is fully loaded, and can be delayed in loading and execution. Non-essential script. These scripts can be executed after the onload event to avoid affecting the rendering of important content on the web page. These scripts may be toluene of your own web page, and are often more third-party scripts. There are many such scripts, such as: comments, advertisements, intelligent recommendations, Baidu Cloud Atlas, sharing and click count statistics, etc. (For details, please check Ma Haixiang’s blog The solutions provided in "How to Solve the Problem of Click Count Affecting Web Page Loading Speed") can be executed after the main content is loaded.

11. Using AJAX

Opening a web page is actually a very complicated process. From the application opening of the web page, to the web server's response, compilation and other actions, and then sent back to the browser, the text, pictures, multimedia files, etc. in front of us are displayed. So I want to reduce the number of responses as much as possible, and now ajax is used well in this regard. Of course, a static page is an exception. For static pages, just pay more attention to the image size and web design.

AJAX stands for "Asynchronous Javascript XML", which refers to a web development technology for creating interactive web applications. AJAX allows web pages to be updated asynchronously by exchanging a small amount of data with the server in the background.

This means that parts of the page can be updated without reloading the entire page. If traditional web pages (not using AJAX) need to update content, the entire web page must be reloaded.

12. Automated page performance optimization

Automated page performance optimization also relies on tools. There are many website speed-up tools, and I believe you have seen many of them online. , the specific effect is difficult to determine, so I won’t say more here.