Summary of front-end optimization skills for improving Web performance, and front-end skills for web Performance
This article describes how to improve and optimize the front-end technology, which is very useful. The main content includes code cleanup, image compression, compression of external resources, use of CDN, and some other methods. These methods will significantly speed up your website and improve overall performance.
I. Clear HTML documents
HTML, or hypertext markup language, is the backbone of almost all websites. HTML provides the title, subtitle, list, and other document structure formats for the webpage. In the recently updated HTML5, you can even create charts.
HTML is easily recognized by web crawlers. Therefore, 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, some best practices should be followed when referencing external resources in HTML documents.
1. Properly place CSS
<Head> <link href = 'HTTP: // www.itxm.net/css/style.css' rel = 'stylesheet 'Type = 'text/css '> Web designers like to create a style sheet after creating a major HTML skeleton on a webpage. In this way, style sheets on webpages are often placed behind HTML, close to the end of the document. However, it is recommended that CSS be placed in the top part of the HTML document header, which ensures the normal rendering process.
This policy does not speed up website loading, but does not allow visitors to wait for a long time with blank screen or unformatted text (FOUT. If most of the visible elements of a webpage have been loaded, visitors are more likely to wait for the whole page to be loaded, resulting in optimization effects on the front-end. This is the perceptual performance.
2. Place Javascript correctly
On the other hand, if JavaScript is placed in the head label or the top part of the HTML document, the loading process of HTML and CSS elements will be blocked. This error will increase the page loading time and increase the user waiting time. It is easy to get impatient and give up access to the website. However, you can avoid this problem by placing the JavaScript attribute at the bottom of the HTML.
In addition, when using JavaScript, people usually like to load it using asynchronous scripts. This prevents the presentation of <script> tags in HTML, for example, in the middle of the document.
Although HTML is one of the most useful tools for web designers, it usually needs to be used with CSS and JavaScript, which may lead to slow web browsing. Although CSS and JavaScript are conducive to web page optimization, you must pay attention to some issues when using them. Avoid embedding code when using CSS and JavaScript. When you embed code, you need to place css in the style tag and use JavaScript in the script tag. This increases the amount of HTML code that must be loaded each time you refresh the page.
3. Bind a file. Don't worry.
In the past, you may frequently bind 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, now you can use multiple methods to asynchronously send and receive HTTP requests and responses to a single TCP connection.
This means that you do not need to bind multiple scripts to a single file frequently.
Ii. Optimize CSS Performance
CSS, A Cascading Style Sheet, can generate professional and clean files from HTML descriptions. A lot of CSS needs to be introduced through HTTP requests (unless inline CSS is used), so you need to try to remove cumbersome CSS files, but pay attention to keep their important features.
If your Banner, plug-in, and layout style are stored in different files using CSS, the visitor's browser loads a lot of files each time they access them. Although the existence of HTTP/2 reduces this problem, it will take a long time to load external resources. To learn how to reduce HTTP requests by significantly reducing the loading time, read the WordPress performance.
In addition, many website administrators mistakenly use the @ import command on the webpage to introduce external style sheets. This is an out-of-date method that prevents browsing for parallel downloads. The link tag is the best choice, and it can also improve the front-end performance of the website. To put it more specifically, external style sheets requested to be loaded using the link label will not prevent parallel downloads.
3. reduce external HTTP requests
In many cases, most of the website loading time comes from external Http requests. The loading speed of external resources varies with the server architecture and location of the host provider. The first step to reduce external requests is to simply check the website. Study every component of your website to eliminate any components that affect your visitor experience. These components may be:
1. Unnecessary Images
2. Useless JavaScript code
3. Excessive css
4. Redundant plug-ins
After removing these redundant components, sort the remaining content, such as compression tools, CDN services, and prefetching, these are the best options for managing HTTP requests. In addition, the tutorial on reducing DNS route search will teach you how to reduce external HTTP requests step by step.
Iv. compressing CSS, JS, and HTML
Compression Technology removes extra characters from files. When writing code in the editor, you will 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 p {
Color: #000;
Padding: 10px 0px 0px 0;
Margin-bottom: 5px;
Border-bottom: none;
}
Compress this code and it becomes like this.
. Entry-content p,. entry-content ul li {font-size: 14px! Important}. product_item p a {color: #000; padding: 10px 0 0 0; margin-bottom: 5px; border-bottom: none}
The compression tool can easily trim useless bytes from your CSS, JS, and HTML files. For more information about compression, see how to compress CSS, JS, and HTML.
5. Use pre-acquisition
Pre-acquisition can improve the user's browsing experience by obtaining the necessary resources and related data before the real needs. There are three types of pre-acquisition:
1. Pre-obtain links
2. DNS pre-acquisition
3. Pre-rendering
Before you exit the current web page, use the pre-acquisition method. The URL address, CSS, image, and script of each link are pre-obtained. This ensures that the visitor can use the link to switch between frames in the shortest time.
Fortunately, pre-acquisition is easy to implement. You only need to add rel = "prefetch", rel = "dns-prefetch ", or rel = "prerender.
6. Use CDN and cache to increase the speed
The content delivery network can significantly improve the speed and performance of websites. When using CDN, you can link the static content of the website to servers around the world to expand the network. This feature is useful if your website has a global audience. CDN allows visitors to load data from the nearest server. If you use CDN, files on your website will be automatically compressed for fast distribution worldwide.
CDN is a caching method that can greatly improve the resource delivery time. At the same time, it can also implement other caching technologies, such as using browser cache.
The browser cache can be reasonably set so that the browser can automatically store certain files to speed up transmission. The configuration of this method can be completed directly in the configuration file of the source server.
For more information about caching and different types of caching methods, see cache definition.
VII. File compression
Although many CDN services can compress files, if you do not use CDN, you can also consider using the File compression method on the source server to improve front-end optimization. File compression makes the website content lightweight and easier to manage. One of the most common File compression methods is Gzip. This is an excellent way to narrow down documents, audio files, PNG images, and other large files.
Brotli is a new file compression algorithm and is becoming increasingly popular. This open source code algorithm is regularly updated by software engineers from Google and other organizations and has been proven to be easier to use than other existing compression methods. Currently, this algorithm is not supported much, but it is just around the corner.
8. Optimize Your Images
For those who do not know how to optimize the front-end, the image may be a "website Killer ". A large number of photo albums and a large number of high-definition images will block the rendering speed of webpages. Unoptimized HD images may contain several megabytes (mb ). Therefore, proper optimization can improve the front-end performance of webpages.
Each image file contains information unrelated to a pure photo or image. For example, a JPEG image contains date, location, camera model, and other irrelevant information. You can use optimization tools such as Optimus to delete the excess image data to streamline the lengthy loading process of the image. Because Optimus is a lossless image compression tool, it does not affect the image quality, but only compresses the image size.
In addition, if you want to further optimize an image, you can use lossy compression, which will delete some data in the image, so the quality will be impaired.
For more information about the differences between lossy and lossless compression, please read our complete tutorial.
9. Use a Lightweight Framework
Unless you only use 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 and more well-known frameworks that provide more functions and options, they are not necessarily suitable for your Web project.
Therefore, it is important not only to determine the functions required by the project, but also to select the appropriate framework-it must be lightweight while providing the required functions. Recently, many frameworks use concise HTML, CSS, and JavaScript code.
Below are several lightweight frameworks that can accelerate reading:
1. Pure
2. Skeleton
3. Milligram
Frameworks cannot replace web design, programming, and maintenance. For a simple example, we assume that the framework is a new house. The house is clean and tidy, but it is empty. When you add furniture, household appliances, and ornaments, you have the responsibility to ensure that the House will not become messy. Similarly, when you use a framework, you have the responsibility to ensure that it is not damaged by redundant code, large images, and excessive HTTP requests.
10. frontend Optimization-Summary
It seems that it takes a lot of effort to optimize the front-end. I believe some tips in this application guide can greatly improve the website loading speed. The faster the website is loaded, 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 comment area.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
