10 content-related principles to improve website performance
|
<br />English address: http://developer.yahoo.com/performance/rules.html Yahoo!'s Exceptional Performance team brings best practices to improve Web performance. They conducted a series of experiments, developed various tools, wrote a large number of articles and blogs, and participated in discussions at various conferences. At their core, best practices are designed to improve website performance. The Excetional Performance team has come up with a list of ways to improve your website speed. It can be divided into 7 categories and 34 items. It includes seven parts: content, server, cookie, CSS, JavaScript, pictures, and mobile applications. There are ten suggestions in the content section: 1. Content
1. Minimize the number of HTTP requests. 80% of the end user's response time is spent downloading content. This time includes downloading images, style sheets, scripts, Flash, etc. in the page. By reducing the number of elements on the page, you can reduce the number of HTTP requests. This is a crucial step in improving your web page speed. The way to reduce page components is actually to simplify the page design. So is there a way to maintain the richness of page content while speeding up response time? Here are a few techniques to reduce the number of HTTP requests while keeping your pages rich in content. Merging files is a way to reduce HTTP requests by putting all scripts into one file, such as simply putting all CSS files into one stylesheet. When scripts or style sheets need to be modified differently when used in different pages, this may be relatively troublesome, but even so, this method should be regarded as an important step to improve page performance. CSS Sprites are an effective way to reduce image requests. Put all background images into one image file, and then use the CSS background-image and background-position properties to display different parts of the image. Image maps combine multiple images into one image. Although the overall file size will not change, the number of HTTP requests can be reduced. Image maps can only be used when all components of the image are close together on the page, such as a navigation bar. Determining the coordinates of the image can be tedious and error-prone, and using image maps for navigation is not readable, so this method is not recommended; Inline images use the data: URL scheme to load image data into the page. This may increase the size of the page. Putting inline images in style sheets (which are cacheable) can reduce HTTP requests while avoiding increasing the size of the page file. But inline images are not yet supported by major browsers. Click here to view the content of the web page production tutorial channel. Reducing the number of HTTP requests for the page is the first step you should take. This is the most important way to improve wait times for first-time users. As Tenni Theurer says in his blog Browser Cahe Usage - Exposed!, HTTP requests account for 40% to 60% of response time without caching. Make the experience faster for those who visit your website for the first time! 2. Reduce the number of DNS lookups <br />The Domain Name System (DNS) provides a correspondence between domain names and IP addresses, just like the relationship between people's names and their phone numbers in a phone book. When you enter www.dudo.org in the browser address bar, the DNS resolution server will return the IP address corresponding to this domain name. The DNS resolution process also takes time. It usually takes 20 to 120 milliseconds to return the IP address corresponding to a given domain name. And during this process the browser will not do anything until the DNS lookup is completed. Caching DNS lookups can improve page performance. This type of cache requires a specific cache server, which is usually controlled by the user's ISP provider or local area network, but it will also generate a cache on the computer used by the user. DNS information is retained in the operating system's DNS cache (DNS Client Service in Microsoft Windows). Most browsers have their own cache independent of the operating system. Since the browser has its own cache record, it will not be affected by the operating system in a single request. Click here to view the website creation tutorial channel content By default, Internet Explorer caches DNS lookup records for 30 minutes, and its key value in the registry is DnsCacheTimeout. Firefox caches DNS lookup records for 1 minute, and its option in the configuration file is network.dnsCacheExpiration (Fasterfox changes this option to 1 hour). When the DNS cache in the client is empty (both the browser and the operating system), the number of DNS lookups is equal to the number of hostnames in the page. This includes host names contained in URLs, images, script files, style sheets, Flash objects, etc. in the page. Reducing the number of hostnames can reduce the number of DNS lookups. Reducing the number of hostnames can also reduce the number of parallel downloads for a page. Reducing the number of DNS lookups can improve response time, but reducing parallel downloads can increase response time. My guiding principle is to divide the content on these pages into at least two parts but no more than four. The result is a trade-off between reducing the number of DNS lookups and maintaining a high degree of parallel downloads. Previous Page 1 2 3 Next Page Read More |
<<: Use pure CSS to achieve switch effect
>>: Detailed explanation of the function and usage of DOCTYPE declaration
Recommend
Example of how to use CSS3 to layout elements around a center point
This article introduces an example of how CSS3 ca...
React implements the expansion and collapse function of complex search forms
Give time time and let the past go. In the previo...
How to quickly build a static website on Alibaba Cloud
Preface: As a junior programmer, I dream of build...
Mysql string interception and obtaining data in the specified string
Preface: I encountered a requirement to extract s...
A brief discussion on the implementation of MySQL's limit paging optimization solution
Mysql limit paging statement usage Compared with ...
This article summarizes the specific use of CSS two-column layout and three-column layout
Preface With the development of big front-end, UI...
The simplest MySQL data backup and restore tutorial in history (Part 2) (Part 37)
Data backup and restore part 3, details are as fo...
HTML form tag tutorial (5): text field tag
<br />This tag is used to create a multi-lin...
Robots.txt detailed introduction
Basic introduction to robots.txt Robots.txt is a p...
jQuery plugin to achieve carousel effect
A jQuery plugin every day - jQuery plugin to impl...
CSS3 timeline animation
Achieve results html <h2>CSS3 Timeline</...
Detailed explanation of common MySQL operation commands in Linux terminal
Serve: # chkconfig --list List all system service...
Complete steps to quickly build a vue3.0 project
Table of contents 1. We must ensure that the vue/...
A very detailed explanation of Linux C++ multi-thread synchronization
Table of contents 1. Mutex 1. Initialization of m...
Linux tutorial on replacing strings using sed command
To replace a string, we need to use the following...