Shulou(Shulou.com)06/03 Report--

This article will give you a detailed explanation on how to improve the performance of Web. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

1. Clean up HTML documents

HTML, the hypertext markup language, is the backbone of almost all websites. HTML provides formatting of titles, subheadings, lists, and other document structures for web pages. In the recently updated HTML5, you can even create charts.

HTML is easily recognized by web crawlers, so search engines can update in real time according to the content of the site. When writing HTML, you should try to make it simple and effective. In addition, there are some practices to follow when referencing external resources in HTML documents.

Proper placement of CSS

Web designers like to create stylesheets after the main HTML skeleton is built on a web page. As a result, stylesheets in web pages tend to be placed behind the HTML, near the end of the document. However, the recommended practice is to place the CSS in the upper part of the HTML, within the head of the document, which ensures normal rendering.

This strategy does not improve the loading speed of the site, but it does not make visitors look at a blank screen or wait for unformatted text (FOUT) for a long time. If most of the visible elements of the page have been loaded, visitors are more likely to wait for the entire page to load, resulting in an optimization effect on the front end. This is perceptual performance.

Correctly place Javascript

On the other hand, if you place the JavaScript inside the head tag or at the top of the HTML document, this blocks the loading process of the HTML and CSS elements. This error will lead to an increase in page loading time, an increase in user waiting time, and it is easy to get impatient and give up visiting the site. However, you can avoid this problem by placing the JavaScript attribute at the bottom of the HTML.

In addition, when using JavaScript, people usually prefer to load with asynchronous scripts. This prevents the rendering of tags in HTML, such as in the middle of a document.

Although HTML is one of the most worthwhile tools for web designers, it is usually used with CSS and JavaScript, which can slow down web browsing. Although CSS and JavaScript are good for web page optimization, you should also pay attention to some problems when using them. Avoid embedding code when using CSS and JavaScript. Because when you embed code, you place the CSS in the style tag and use JavaScript in the script tag, which increases the amount of HTML code that must be loaded each time the page is refreshed.

Bind file? Never mind

In the past, you may have frequently bound CSS scripts to a single file to reference external files in HTML code. This is a reasonable practice when using the HTTP1.1 protocol, but it is no longer necessary.

Thanks to HTTP/2, you can now send and receive HTTP requests and responses asynchronously to a single TCP connection by using multiplex technology.

Photo Source: qnimate.com

This means that you no longer need to bind multiple scripts to a single file frequently.

two。 Optimize CSS performanc

CSS, or cascading stylesheets, can generate professional and clean files from the content described by HTML. A lot of CSS needs to be introduced through HTTP requests (unless inline CSS is used), so you should try to remove cumbersome CSS files, but be careful to retain their important features.

If your Banner, plug-ins, and layout styles are saved in different files using CSS, visitors' browsers will load a lot of files each time they visit. Although the existence of HTTP/2 reduces the occurrence of this problem, it still takes a long time when external resources are loaded. To learn how to reduce HTTP requests to significantly reduce load time, read WordPress performance.

In addition, many webmasters mistakenly use the @ import directive to introduce external stylesheets in their pages. This is an outdated method that prevents browsing and downloading in parallel. Link tag is the choice of *, it can also improve the front-end performance of the website. By the way, external stylesheets that are requested to load through the link tag do not prevent parallel downloads.

3. Reduce external HTTP requests

In many cases, most of the loading time of a Web site comes from external Http requests. The loading speed of external resources varies depending on the server architecture, location, and so on of the host provider. The step to reduce the number of external requests is to check the site briefly. Study every part of your site and eliminate anything that affects the visitor's experience. These ingredients may be:

Unnecessary pictures

Useless JavaScript code

Too much css

Redundant plug-in

After you remove these redundant components, then sort out the rest of the content, such as compression tools, CDN services, and pre-fetching (prefetching), which are all options for managing HTTP requests. In addition, the reduce DNS routing lookup tutorial will teach you how to reduce external HTTP requests step by step.

4. Compress CSS, JS and HTML

Compression technology can remove extra characters from the file. When you write code in the editor, you use indentation and comments. These methods will undoubtedly make your code concise and easy to read, but they will also add extra bytes to the document.

For example, this is a piece of code before compression.

.entry-content p {font-size: 14px! important;} .entry-content ul li {font-size: 14px! important;} .product _ item pa {color: # 000; padding: 10px 0px 0px 0; margin-bottom: 5px; border-bottom: none;}

This is what happens when you compress this code.

.product _ item pa {color:#000;padding:10px item pa {color:#000;padding:10px 00; entry content ul li {Font Musi sizeviso 14pxstores} .product _ content

Using the compression tool, you can easily trim useless bytes from your CSS, JS, and HTML files. For information about compression, see how to compress CSS, JS, and HTML.

5. Use pre-fetching

Pre-acquisition can improve the browsing experience of visiting users by obtaining the necessary resources and related data before it is really needed. There are three main types of pre-acquisition:

Link acquisition in advance

DNS pre-fetching

Pre-rendering

Before you leave the current web page, the URL address, CSS, image and script for each link will be pre-fetched using the prefetch method. This ensures that visitors can use links to switch between screens in the shortest possible time.

Fortunately, pre-acquisition is easy to achieve. Depending on the pre-fetched form you want to use, all you need to do is add rel= "prefetch", rel= "dns-prefetch", or rel= "prerender" tags to the link properties in the site's HTML.

6. Use CDN and caching to increase speed

Content distribution network can significantly improve the speed and performance of the website. When using CDN, you can link the static content of your site to servers around the world to expand your network. This is useful if your site has viewers all over the world. CDN allows your site visitors to load data from the nearest server. If you use CDN, files on your website will be automatically compressed for quick distribution around the world.

CDN is a caching method that can greatly improve the distribution time of resources. At the same time, it can also implement some other caching techniques, such as using browser caching.

Setting the browser cache reasonably allows the browser to automatically store some files in order to speed up the transfer speed. The configuration of this method can be done directly in the configuration file of the source server.

To learn more about caching and different types of caching methods, see Cache Definitions.

7. Compressed file

Although many CDN services can compress files, if you don't use CDN, you can also consider using file compression methods on the source server to improve front-end optimization. File compression can make the content of the website lightweight and easier to manage. One of the most commonly used methods of file compression is Gzip. This is a way to shrink documents, audio files, PNG images, and other large files.

Brotli is a relatively new file compression algorithm, which is becoming more and more popular. This open source algorithm is regularly updated by software engineers from Google and other organizations and has proved to be more useful than other existing compression methods. At present, there is little support for this algorithm, but as a rising star is just around the corner.

For more information, read our complete article on Brotli compression.

8. Optimize your picture

For those who do not understand front-end optimization, the picture may be a "website killer". A large number of photo albums and large high-definition images will hinder the speed of web rendering. An unoptimized HD picture may have several megabytes (mb). Therefore, proper optimization of them can improve the front-end performance of web pages.

Each image file contains information that has nothing to do with pure photos or pictures. JPEG images, for example, contain date, location, camera model and other irrelevant information. You can use some optimization tools such as Optimus to delete the excess image data to simplify the lengthy image loading process. Because Optimus is a lossless image compression tool, it will not affect the image quality, but only compress the image volume.

In addition, if you want to further optimize an image, you can use lossy compression, which will delete some of the data in the image, so the quality will be compromised.

To further learn the difference between lossy and lossless compression, please read our complete tutorial.

9. Use a lightweight framework

Unless you only use your existing coding knowledge to build a website, you can try to use a good front-end framework to avoid many unnecessary front-end optimization errors. Although there are some larger, better-known frameworks that provide more functionality and options, they may not be suitable for your Web project.

So it's important not only to determine the functionality required by the project, but also to choose the right framework-- it's important to provide the required functionality while keeping it lightweight. Many frameworks these days use concise HTML,CSS and JavaScript code.

Here are a few lightweight frameworks that can speed up reads:

Pure

Skeleton

Milligram

Frameworks are not a substitute for web design, programming and maintenance. To take a simple example, let's assume that the frame is a new house. The house is clean and tidy, but it is empty. When you add furniture, appliances and decorations, you have a responsibility to make sure the house doesn't get messy. Similarly, when you use a framework, it is your responsibility to ensure that it is not broken by redundant code, large images, and too many HTTP requests.

This is the end of this article on "how to improve Web performance". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.