Summary of front end optimization skills to improve Web performance
- 2021-07-24 09:30:58
- OfStack
This article describes the technologies that can help improve the optimization front end, which is very useful. The main contents are cleaning up code, compressing pictures, compressing external resources, using CDN, and 1 other methods. These methods will bring significant speed improvement and overall performance improvement to your website.
1. Clean up the HTML document
HTML, or Hypertext Markup Language, is the backbone of almost all websites. HTML brings titles, subtitles, lists, and other document-structured formats to web pages. In the recently updated HTML5, you can even create charts.
HTML is easily recognized by web crawlers, so search engines can update the content of a website in real time to a certain extent. When writing HTML, you should try to make it concise and effective. In addition, there are some best practices to follow when referring to external resources in the HTML documentation.
1. Proper placement of CSS
<head> <link href='http://www.itxm.net/css/style.css' rel='stylesheet' type='text/css'> </head>
Web designers like to create style sheets after the main HTML skeleton has been established on the web page. In this way, the style sheet in the web page tends to be placed after HTML, near the end of the document. However, it is recommended to place CSS in the top part of HTML, in the document header, which ensures a normal rendering process.
This strategy does not speed up Web site loading, but it does not keep visitors waiting for long periods of time looking at blank screens or unformatted text (FOUT). If most of the visible elements of the page have already been loaded, visitors are more likely to wait for the entire page to load, thus bringing about an optimization effect on the front end. This is perceptual performance.
2. Position Javascript correctly
On the other hand, if you place JavaScript inside the head tag or on top of the HTML document, this blocks the loading of HTML and CSS elements. This error will lead to an increase in page load time, increase the waiting time of users, and easily make people feel impatient and give up visiting the website. However, you can avoid this problem by placing the JavaScript property at the bottom of the HTML.
In addition, when using JavaScript, people usually like to load with asynchronous scripts. This will prevent < script > The rendering process of tags in HTML, for example, in the middle of documents.
Although HTML is one of the most worthwhile tools for web designers, it is usually used with CSS and JavaScript 1, which may slow down web browsing. Although CSS and JavaScript are beneficial to web page optimization, we should pay attention to 1 problems when using them. When using CSS and JavaScript, avoid embedding code. Because when you embed the code, you place 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.
3. Bind files, don't worry
In the past, you may frequently bind CSS scripts to individual files to reference external files in HTML code. This is a reasonable practice when using the HTTP 1.1 protocol, which is no longer required.
Thanks to HTTP/2, you can now send and receive HTTP requests and responses asynchronously using a single TCP connection using multiplexing techniques.
This means that you no longer need to bind multiple scripts to a single file frequently.
2. Optimize CSS performance
CSS, or cascading style sheets, generates professional and neat files from what HTML describes. Many CSSs need to be imported via HTTP requests (unless you use inline CSS), so you should try to remove the burdensome CSS files, but pay attention to preserving their important features.
If your Banner, plug-ins, and layout styles are saved in different files using CSS, the visitor's browser will load many files every time it accesses. Although the existence of HTTP/2 now reduces the occurrence of this problem, it will still take a long time when external resources are loaded. To learn how to reduce HTTP requests to dramatically reduce load time, read WordPress Performance.
In addition, many webmasters mistakenly use the @ import directive to introduce external style sheets in web pages. This is an outdated method, which will prevent browsing parallel downloads. The link tag is the best choice, and it can also improve the front-end performance of the website. By the way, external style sheets that are requested to be loaded through the link tag do not prevent parallel downloads.
3. Reduce external HTTP requests
In many cases, most of the site load time 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 first step to reduce external requests is to briefly check the website. Study every component of your website and eliminate any components that affect visitors' bad experience. These ingredients may be:
1. Unnecessary pictures
2. Useless JavaScript code
3. Excessive css
4. Redundant plug-ins
After you remove these redundant elements, organize the remaining contents, such as compression tools, CDN services and pre-fetch (prefetching), which are the best choices for managing HTTP requests. In addition, the Reducing 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 redundant characters from files. 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 1 piece of code before compression.
.entry-content p {
font-size: 14px !important;
}
.entry-content ul li {
font-size: 14px !important;
}
.product_item p a {
color: #000;
padding: 10px 0px 0px 0;
margin-bottom: 5px;
border-bottom: none;
}This is what happens when you compress this code.
.entry-content p,.entry-content ul li{font-size:14px!important}.product_item p a{color:#000;padding:10px 0 0;margin-bottom:5px;border-bottom:none}The compression tool makes it very easy to prune useless bytes from your CSS, JS, and HTML files. For information about compression, see How to Compress CSS, JS, and HTML.
STEP 5 Use Pre-Acquisition
Pre-acquisition can improve the browsing experience of visitors by obtaining necessary resources and related data before they really need it. There are mainly three types of pre-acquisition:
1. Links are obtained in advance
2. DNS pre-acquisition
3. Pre-render
Before you leave the current web page, pre-fetch the URL address, CSS, images, and scripts corresponding to each link. This ensures that visitors can use links to switch between pictures in the shortest time.
Fortunately, pre-acquisition is easy to implement. Depending on the prefetch form you want to use, you simply add the rel= "prefetch", rel= "dns-prefetch", or rel= "prerender" tags to the link attributes in the website HTML.
6. Speed up with CDN and caching
Content distribution network can significantly improve the speed and performance of websites. With CDN, you can link the static content of your Web site to an extended network of servers around the world. If your website has a global audience, this feature is useful for 10 points. CDN allows your site visitors to load data from the nearest server. If you use CDN, files within your site are automatically compressed for quick worldwide distribution.
CDN is a caching method that can greatly improve the distribution time of resources. At the same time, it can also implement a number of other caching technologies, such as using browser caching.
Reasonable setting of browser cache can make browser automatically store some files, so as to speed up the transmission. 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 Definition.
7. Zip files
Although many CDN services can compress files, if you don't use CDN, you can also consider using file compression on the source server to improve front-end optimization. File compression can make the content of website lightweight and easier to manage. One of the most commonly used file compression methods is Gzip. This is a great 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 been shown to work better than other existing compression methods. At present, the support of this algorithm is relatively small, but it is just around the corner as a rising star.
8. Optimize your pictures
For those who don't know how to optimize the front end, pictures may be a "website killer". A large number of photo albums and huge high-definition pictures will block the rendering speed of web pages. HD pictures without optimization may have several megabytes (mb). Therefore, optimizing them properly can improve the front-end performance of web pages.
Each image file contains 1 piece of information unrelated to pure photos or pictures. For example, the JPEG image contains date, place, camera model and other irrelevant information. You can use some optimization tools such as Optimus to remove these redundant image data to simplify the lengthy loading process of images. Because Optimus is a lossless image compression tool, it will not affect the image quality, just compress the image volume.
In addition, if you want to optimize a picture one step further, you can use lossy compression, which will delete the data in a picture, so the quality will be damaged.
To 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 your website, you can try to use a good front-end framework to avoid many unnecessary front-end optimization errors. While there are 1 larger, better known framework that offers more functionality and options, they may not be suitable for your Web project.
So it's important not only to identify the functionality required for the project, but also to choose the right framework--it needs to be lightweight while providing the required functionality. Recently, many frameworks use concise HTML, CSS, and JavaScript code.
Here are a few lightweight frameworks that can speed up reading:
1.Pure
2.Skeleton
3.Milligram
Frameworks are no substitute for web design, programming, and maintenance. To give 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 the responsibility to ensure that the house does not become messy. Likewise, when you use a framework, it is your responsibility to ensure that it is not corrupted by redundant code, large images, and too many HTTP requests.
10. Summary of front-end optimization
It seems that it takes a lot of energy to optimize the front end. I believe one of the tips in this application guide can help you greatly improve the loading speed of your website. The faster the website loads, the better the user experience. Therefore, optimizing the front end can bring benefits to you and your users. If you have any other good optimization methods, please leave your valuable suggestions in the comments area.