Home >Web Front-end >Front-end Q&A >9 front-end optimization tips worth collecting (improving web performance)
In today’s digital world, there are countless websites that need to deal with visits for various reasons every day. However, a large number of these sites appear clunky and cumbersome to use. A poorly optimized website can suffer from a variety of issues, including loading times, lack of support for mobile devices, browser compatibility issues, and more.
This article describes techniques that can help improve and optimize the front-end, which is very useful. The main contents include cleaning code, compressing images, compressing external resources, using CDN, and some other methods. These methods will bring significant speed improvements and overall performance improvements to your website.
1. Clean the HTML document
HTML, the Hypertext Markup Language, is the backbone of almost all websites. HTML brings the formatting of titles, subtitles, lists, and other document structures to web pages. In the recent update to HTML5, it's even possible to create charts.
HTML is easily recognized by web crawlers, so search engines can update in real time based on the content of the website to a certain extent. When writing HTML, you should try to make it concise yet effective. In addition, there are some best practices that need to be followed when referencing external resources in HTML documents.
Place CSS Properly
Web designers like to create style sheets after the main HTML skeleton of a web page has been established. As a result, style sheets in web pages are often placed after the HTML, near the end of the document. However, the recommended approach is to place the CSS at the top of the HTML, within the document header, to ensure normal rendering.
<head> </head>
This strategy will not improve the loading speed of the website, but it will not make visitors wait for a long time looking at a blank screen or unformatted text (FOUT). If most of the visible elements of the web page have already been loaded, visitors are more likely to wait for the entire page to load, thereby optimizing the front-end. This is perceptual performance.
If you want to learn front-end, you can come to this group. The first is 291, the middle is 851, and the last is 189. You can learn and communicate in it, and there are also a lot of learning materials you can download.
Place Javascript Correctly
On the other hand, if you place JavaScript inside the head tag or in the upper part of the HTML document, this will block the loading process of HTML and CSS elements. This error will cause the page loading time to increase, increase the user's waiting time, and easily make people feel impatient and give up visiting the website. However, you can avoid this problem by placing the JavaScript attributes at the bottom of the HTML.
Also, when using JavaScript, people usually like to use asynchronous script loading. This prevents the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag from being rendered in HTML, for example, in the middle of the document.
While HTML is one of the most valuable tools for web designers to use, it is often used in conjunction with CSS and JavaScript, which can slow down web browsing. Although CSS and JavaScript are beneficial to web page optimization, there are some issues that need to be paid attention to when using them. When using CSS and JavaScript, avoid embed code. Because when you embed code, you place CSS in style tags and use JavaScript in script tags, this increases the amount of HTML code that must be loaded every time the page is refreshed.
Bind files? No worries
In the past, you might 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, however this protocol is no longer required.
Thanks to HTTP/2, you can now send and receive HTTP requests and responses asynchronously over a single TCP connection using multiplexing.
Image source: http://qnimate.com
This means you no longer need Frequently bind multiple scripts to a single file.
2. Optimize CSS performance
CSS, cascading style sheets, can generate professional and neat files from content described in HTML . A lot of CSS needs to be pulled in via HTTP requests (unless you use inline CSS), so you'll want to work hard to remove redundant CSS files, but be careful to retain its important features.
If your banner, plug-in and layout styles are saved in different files using CSS, then the visitor's browser will load many files every time they visit. Although the existence of HTTP/2 now 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 drastically improve load times, read WordPress Performance.
In addition, many webmasters mistakenly use the @import directive in their web pages to introduce external style sheets. This is an outdated method that blocks browsing for parallel downloads. The link tag is the best choice, and it can also improve the front-end performance of the website. As a side note, external stylesheets loaded via link tag requests do not prevent parallel downloads.
3. Reduce external HTTP requests
In many cases, most of the loading time of the website comes from external HTTP requests. The loading speed of external resources varies depending on the hosting provider's server architecture, location, etc. The first step to reducing external requests is to briefly inspect your website. Study every component of your website and eliminate anything that detracts from your visitors’ experience. These ingredients may be:
Unnecessary images
Useless JavaScript code
Excessive css
Superfluous plug-ins
After you remove these redundant components, organize the remaining content, such as compression tools, CDN services, and prefetching (prefetching), etc. These are the best choices for managing HTTP requests. In addition, the Reduce DNS Route Lookup tutorial teaches you step-by-step how to reduce external HTTP requests.
4. Compress CSS, JS and HTML
Compression technology can remove redundant content from files character. When you write code in an editor, you use indentation and comments. These methods undoubtedly make your code concise and readable, but they 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 a {
color: #000;
padding: 10px 0px 0px 0;
margin-bottom: 5px;
border-bottom: none;
}
Compress this code That's how it became.
.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}
Using compression tools makes it very easy to trim useless bytes from your CSS, JS and HTML files. For information on compression, see How to Compress CSS, JS, and HTML.
5. Use prefetching
Prefetching can obtain necessary resources before they are actually needed and related data to improve the browsing experience of visiting users. There are three main types of pre-fetching:
Link pre-fetching
DNS pre-fetching
Pre-rendering
Before you leave the current web page, using the pre-fetch method, the URL address, CSS, images and scripts corresponding to each link will be pre-fetched. This ensures that visitors can use links to switch between screens in the shortest possible time.
Fortunately, prefetching is easy to implement. Depending on the form of prefetching you want to use, you simply add the rel="prefetch", rel="dns-prefetch", or rel="prerender" tag to the link attribute in your website's HTML.
If you want to learn front-end, you can come to this group. The first is 291, the middle is 851, and the last is 189. You can learn and communicate in it, and there are also a lot of learning materials you can download.
6. Use CDN and caching to increase speed
Content delivery networks can significantly improve the speed and performance of your website. When using a CDN, you can link your website's static content to an extended network of servers around the world. This feature is useful if your website has a global audience. A CDN allows your website visitors to load data from the nearest server. If you use a CDN, the files within your website are automatically compressed for fast 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 technologies, such as using browser cache.
Setting the browser cache properly can allow the browser to automatically store certain files to speed up transmission. Configuration of this method can be done directly in the source server's configuration file.
Learn more about caching and the different types of caching methods, see cache definitions.
7. Compressing files
Although many CDN services can compress files, if you do not use a CDN , you may also consider using file compression methods on your origin server to improve front-end optimization. File compression can make website content 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 that is becoming more and more popular. This open source algorithm is regularly updated by software engineers from Google and other organizations and has been proven to work better than other existing compression methods. The support for this algorithm is currently relatively small, but it is just around the corner as a rising star.
For more information, read our full article on Brotli compression.
For those who don’t understand front-end optimization, pictures may be a “website killer”. A large number of photo albums and huge high-definition pictures will clog the rendering speed of the web page. Unoptimized HD images may be several megabytes (mb) in size. So optimizing them appropriately can improve the front-end performance of your web pages.
Each image file contains some information that has nothing to do with a pure photo or picture. For example, a JPEG image contains date, location, camera model, and some other irrelevant information. You can use optimization tools like Optimus to remove this redundant image data and streamline the lengthy image loading process. Because Optimus is a lossless image compression tool, it does not affect the image quality, but only compresses the image volume.
Also, if you want to further optimize an image
slice, you can use lossy compression, which will delete Some images have data inside them, so the quality will be compromised.
To learn more about the differences between lossy and lossless compression, read our complete tutorial.
9. Use a lightweight framework
Unless you are building a website using only your existing coding knowledge, you can try using a A good front-end framework to avoid many unnecessary front-end optimization mistakes. While there are some larger, more well-known frameworks that offer more features and options, they may not necessarily be suitable for your web project.
So, it is not only important to determine the functions required for the project, but also to choose the right framework - it should be lightweight while providing the required functions. Many frameworks these days use concise HTML, CSS, and JavaScript code.
The following are several lightweight frameworks that can speed up reading:
Pure
Skeleton
Milligram
Framework does not replace web design, programming and maintenance. As a simple example, let's assume the frame is a new house. The house was clean and tidy, but it was empty. As you add furniture, appliances, and decorations, it's your responsibility to make sure the house doesn't become cluttered. Likewise, when you use a framework, it's your responsibility to make sure it isn't broken by redundant code, large images, and too many HTTP requests.
Front-end Optimization – Summary
Front-end optimization seems to take a lot of effort, I believe some tips in this application guide can Help you greatly improve website loading speed. The faster your website loads, the better the user experience will be. Therefore, optimizing the front end can benefit both you and your users. If you have any other good optimization methods, please leave your valuable suggestions in the comment area.
This article is reproduced from: https://blog.csdn.net/lin123_00/article/details/106652145
For more related knowledge, please visit: PHP中文网!
The above is the detailed content of 9 front-end optimization tips worth collecting (improving web performance). For more information, please follow other related articles on the PHP Chinese website!