Front-end optimization and web Front-end Optimization

Front-end optimization and web Front-end Optimization
Best Web Front-end optimization practices and tools published on | 15423 views | source Googe & Yahoo | 113 comments | author Wang Guo compiled Web optimization Google Yahoo PageSpeedYSlowAbstract:The front-end performance is very important for the user experience of Web applications. Do not think that the performance of your Web application is good enough. In fact, there will be many improvements. This article will introduce Google and Yahoo's best practices and tools for browser optimization. You can test your Web applications one by one.

The front-end performance is very important for a Web application. If a Web application's page loading speed is very fast and can respond to user operations in a timely manner, the user experience of the product will be greatly improved. Displays the effect of page loading speed on user experience.

Is the speed of your Web page fast enough? In fact, there may be many improvements. Google and Yahoo also put forward some front-end optimization suggestions for Web applications and released some tools. You can test your Web applications one by one to achieve higher performance.

These optimizations not only provide a better user experience, but also reduce the number of page requests, the bandwidth occupied by requests, and the waste of resources.

Next let's take a look at the best practices of Web page optimization provided by Google and Yahoo.

I. Google's best Web optimization practices

1. Avoid bad requests

Sometimes the HTML or CSS in the page will request a non-existent resource, such as slice or HTML file to the server, which will cause too many round-trip requests between the browser and the server, similar:

 

• Browser: "I need this image ."
• Server: "I don't have this image ."
• Browser: "Are you sure you want? You have this document ."
• Server: "No ."

 

In this way, the page loading speed is reduced. Therefore, it is necessary to check the bad links on the page. You can use Google's PageSpeed tool to detect the problem. After finding the problem, add the corresponding resource file or modify the link address of the resource.

2. Avoid CSS @ import

Using the @ import method to reference a CSS file can cause some problems that affect the page loading speed. For example, the file is loaded in order (one is loaded only after loading ), but cannot load in parallel.

You can use the CSS delivery tool to check whether the @ import method exists in the page code. For example

 

[Css]View plaincopy

1. @ Import url ("style.css ")

 

We recommend that you use the following code instead.

 

[Html]View plaincopy

1. <Link rel = "style.css" href = "style.css" type = "text/css">

 

3. Avoid using document. write

In JavaScript, you can use document. write displays content on the webpage or calls external resources. In this method, the browser must take some extra steps-download resources, read resources, and run JavaScript to understand what needs to be done, you need to re-execute this process when calling other resources. Because the browser does not know what to display before, it will speed down page loading.

You must know that any resource that can be called by document. write can be called through HTML, which is faster. Check your page code. If there is code similar to the following:

 

[Js]View plaincopy

1. Document. write ('<script src = "another. js"> </script> ');

 

Recommended:

 

[Html]View plaincopy

1. <Script src = "another. js"> </script>

 

4. Merge multiple external CSS files

Every use of a CSS file on a website slows down page loading. If you have more than one CSS file, you should combine them into one file.

You can use the CSS delivery tool to detect CSS files in the page code, and then combine them into one by copying and pasting them. After merging, remember to modify the reference code on the page and delete the old reference code.

5. Merge multiple external JavaScript files

In most cases, websites often contain several JavaScript files, but they do not need to be separated. Some of them can be merged into one file.

You can use the resource check tool to check the number of JavaScript files referenced on the page, and then combine multiple files into one by copying and pasting them.

6. Integrate images with CSS sprites

If there are 6 small images on the page, the browser will download them separately during display. You can combine these images into one by using CSS sprites to reduce the time required for page loading.

CSS sprites requires two steps: Integrating images and locating images. For example, you can use the following code to locate the upper and lower parts of the image.

 

[Css]View plaincopy

1. . Megaphone {width: 50px; height: 50px; background: url (images/sprite.png) 0 0px ;}
2. . Smile {width: 50px; height: 50px; background: url (images/sprite.png) 0-50px ;}

 

7. Delayed loading of JavaScript

When the Browser executes JavaScript code, it stops processing the page. When many JavaScript files or code are to be loaded on the page, it will cause serious latency. Although you can use defer, asynchronous, or place JavaScript code at the bottom of the page to delay JavaScript loading, these are not a good solution.

The following are Google's suggestions.

 

[Js]View plaincopy

1. <Script type = "text/javascript">
2. Function downloadJSAtOnload (){
3. Var element = document. createElement ("script ");
4. Element. src = "defer. js ";
5. Document. body. appendChild (element );
6. }
7. If (window. addEventListener)
8. Window. addEventListener ("load", downloadJSAtOnload, false );
9. Else if (window. attachEvent)
10. Window. attachEvent ("onload", downloadJSAtOnload );
11. Else window. onload = downloadJSAtOnload;
12. </Script>

 

This code is used to wait until the page is loaded and then load the external "defer. js" file. The following is the test result.

8. Enable compression/GZIP

Using gzip to compress HTML and CSS files usually saves about 50% to 70% in size. Therefore, loading a page requires less bandwidth and less time.

You can use this Gzip compression tool to check whether the page has been compressed by Gzip.

9. Enable Keep-Alive

The HTTP protocol adopts the "request-response" mode. When the common mode (non-KeepAlive mode) is used, a new connection is required for each request/response client and server, disconnect immediately after completion (the HTTP protocol is connectionless). When the Keep-Alive mode (also known as persistent connection and connection reuse) is used, the Keep-Alive function keeps the client-to-server connection valid. When a subsequent request is sent to the server, the Keep-Alive function avoids or reestablishes a connection.

In HTTP 1.0, Keep-Alive is disabled by default. You must add "Connection: Keep-Alive" to the HTTP header to enable Keep-Alive; in HTTP1.1, Keep-Alive is enabled by default. You can disable it by adding "Connection: close. Currently, most browsers use the HTTP 1.1 protocol. That is to say, Keep-Alive connection requests are initiated by default. Therefore, whether a complete Keep-Alive connection can be completed depends on the Web server settings.

10. Embed small CSS and JavaScript code into HTML

If your CSS code is small, you can put this part of code into an HTML file instead of an external CSS file. This reduces the number of files required for page loading and speeds up page loading. Similarly, you can embed small JavaScript script code into an HTML file.

 

[Html]View plaincopy

1. <Style type = "text/css">
2. <! -- CSS code -->
3. </Style>
5. <Script type = "text/javascript">
6. <! -- JavaScript code -->
7. </Script>

 

11. Use browser cache

When the page is displayed, the browser needs to load the logo, CSS file, and other resources. The work done by the browser cache is to "remember" The loaded resources, so that the page loading speed is faster.

12. Compress CSS code

No matter how you use CSS on the page, the smaller the CSS file, the better. This will help you increase the page loading speed. You can use the Minify CSS tool to compress your CSS code.

Before compression:

 

[Css]View plaincopy

1. Body
2. {
3. Background-color: # d0e4fe;
4. }
5. H1
6. {
7. Color: orange;
8. Text-align: center;
9. }

 

After compression:

 

[Css]View plaincopy

1. Body {background-color: # d0e4fe ;}
2. H1 {color: orange; text-align: center ;}

 

13. Minimize the number of DNS queries

When the browser establishes a connection with the Web server, it needs DNS resolution to resolve the domain name to an IP address. However, when the client needs to execute DNS lookup, the wait time will depend on the effective response speed of the Domain Name Server.

Although all isp dns servers can cache the domain name and IP address ing table, if the cached DNS records expire and need to be updated, you may need to traverse multiple DNS nodes, sometimes you need to find a trusted domain name server on a global scale. Once the Domain Name Server is busy and requests need to be queued during resolution, the wait time is further delayed.

Therefore, it is very important to reduce the number of DNS queries and avoid additional time consumption during page loading. To reduce the number of DNS queries, the best solution is to reduce the chance of different domain name requests on the page.

You can use the request checker tool to check the number of requests on the page and then optimize it.

14. Minimize redirection

Sometimes you need to use redirection in the webpage for specific purposes. Redirection means that the user's original request (such as request A) is redirected to another request (such as request B ).

However, this may result in a decline in website performance and speed, because browser access to the website is a series of processes. If you access the website halfway and jump to the new address, a series of processes will be initiated again, this will waste a lot of time. Therefore, we should avoid redirection as much as possible. Google recommends:

 

• Do not link to a page containing redirection
• Do not request resources containing redirection

 

15. optimized the order of style sheets and scripts

The Style label and Style sheet call code should be placed in front of the JavaScript code, which can speed up page loading.

 

[Html]View plaincopy

1. <Head>
2. <Meta name = description content = "description"/>
3. <Title> title </title>
4. <Style>
5. Page specific css code goes here
6. </Style>
7. <Script type = "text/javascript">
8. Javascript code goes here
9. </Script>
10. </Head>

 

16. Avoid blocking rendering with JavaScripts

When the browser encounters a <script> label that introduces an external JS file, it stops all work to download and parse and execute it. In this process, page rendering and user interaction are completely blocked. Page loading stops.

Google recommends that you delete the JavaScript that interferes with the content on the first page. The first screen refers to the page that the user initially sees on the screen, whether it is a desktop browser, mobile phone, or tablet.

17. Reduce the original image

If you do not need to display a large image on the page, we recommend that you reduce the actual size of the image to the display size, which can reduce the time required to download the image.

18. Specify the image size

When the browser loads the HTML code of the page, it sometimes needs to locate the page layout before the image download is complete. If the size (width and height) of the image in HTML is not specified, or the size described in the Code is different from that of the actual image, the browser needs to "backtrack" the image and re-display it after the image is downloaded, which consumes additional time ).

Therefore, it is best to specify the size of each image on the page, whether in the label in HTML or in CSS.

For more information:Https://developers.google.com/speed/docs/insights/rules

Ii. Yahoo's best Web optimization practices

1. Content Optimization

 

• Minimize HTTP requests: common methods include merging multiple CSS files and JavaScript files, and using CSS Sprites to integrate images and Image map (set different links in different regions of images ), inline images (using data: URL scheme to embed image data into actual pages.
• Reduce DNS Lookup
• Avoid redirection
• Make Ajax cacheable
• Delayed loading component: consider which content is first loaded when the page is displayed, which content and structure can be loaded later, and set according to this priority.
• Pre-Load components: pre-load is the page content (such as, style sheets, and scripts) that may be used in future requests when the browser is idle ). When a user wants to access the next page, most of the content on the page has been loaded into the cache, which can greatly improve the access speed.
• Reduce the number of DOM elements: a page contains a large number of DOM elements, which slows down the efficiency of JavaScript DOM traversal.
• Divide the page content by domain name: divide the page content into several parts so that you can achieve maximum parallel download. However, make sure that the number of domain names you use is between 2 and 4 (otherwise, the number conflicts with 2nd ).
• Minimize the number of iframe: iframes provides a simple way to embed content from one website into another. However, the creation speed is 1-2 times slower than that of other DOM elements including JavaScript and CSS.
• Avoid 404: HTTP requests consume a lot of time, so using HTTP requests to obtain a useless response (for example, 404 does not find a page) is completely unnecessary, it will only reduce the user experience, but will not be of any benefit.

 

2. Server Optimization

 

• Using Content Delivery Network (CDN): distributing your website content to multiple servers in different regions can speed up download.
• Add an Expires or Cache-Control header: for static content, you can set the file header expiration time to "Never expire (Never expire)". For dynamic content, you can use the appropriate Cache-Control file header to help your browser make conditional requests.
• Gzip Compression
• Setting ETag: ETags (Entity tags) is a mechanism used by web servers and browsers to determine whether the content in the browser cache matches the original content in the server.
• Refresh the buffer in advance: when a user requests a page, the server will spend 200 to 500 milliseconds to organize HTML files in the background. During this period, the browser will remain idle and wait for the data to return. In PHP, you can use the flush () method, which allows you to send some Compiled HTML response files to the browser first. Then, the browser can download the content (such as scripts) in the file) while the background simultaneously processes the remaining HTML pages.
• Use the GET Method for Ajax requests: When XMLHttpRequest is used, the POST method in the browser will first send the file header before sending data. Therefore, GET is the most appropriate.
• Avoid empty image src

 

3. Cookie Optimization

 

• Reduce cookie size: Remove unnecessary coockie and minimize the size of coockie to reduce the impact on user response.
• Using domain name-independent cookies for Web Components: it is a waste of reading cookies for Static components. It is a good way to store Static components using another domain name without cookies, alternatively, you can store only domain names with www in cookies.

 

4. CSS Optimization

 

• Place CSS code on the top of the HTML page
• Avoid using CSS expressions: CSS expressions have a large amount of operation during execution, which will have a great impact on page performance.
• Replace @ import with <link>
• Avoid using Filters: the unique attribute of IE AlphaImageLoader is used to modify the translucent Effect of PNG images in versions earlier than IE 7. However, the problem is that when the browser loads an image, it terminates the rendering of the content and freezes the browser.

 

5. JavaScript Optimization

 

• Place the JavaScript script at the bottom of the page
• Reference JavaScript and CSS as external files: using external files in practical applications can speed up the page, because JavaScript and CSS files can generate cache in the browser.
• Reduce JavaScript and CSS
• Delete duplicate scripts
• Minimize DOM access: Slow DOM element access using JavaScript
• Develop intelligent event processing programs

 

6. Image Optimization

 

• Optimize image size
• Optimize images through CSS Sprites
• Do not use scaling images in HTML
• Favicon. ico is small and can be cached

 

7. Mobile Optimization

 

• Keep the component size below 25 KB: This is mainly because the iPhone cannot cache files larger than 25 KB (note that this refers to the size after decompression ).
• Package components into a composite document: Packaging page content into composite text is like an Email with multiple attachments. It allows you to obtain multiple components in an HTTP request.

More information: http://developer.yahoo.com/performance/rules.html)

 

3. Some tools

1. Google PageSpeed

Google provides the PageSpeed tool, which is a browser plug-in that can well apply the Web optimization practices mentioned by Google above-it helps you easily analyze the performance bottleneck of your website, and provide you with optimization suggestions.

 

• Analyze your website online
• Install browser plug-ins (Chrome and Firefox)
• Embedding PageSpeed in applications using the Insights API

 

2. Yahoo YSlow

YSlow is a browser plug-in launched by Yahoo. It helps you analyze website pages and provides some optimization suggestions to improve website performance.

 

• Firefox Plugin
• Chrome plugin
• YSlow for Mobile/Bookmarklet
• Source code

 

3. Other analysis and optimization tools

 

• Spider simulator: this tool can analyze your page and provide some optimization suggestions.
• Image SEO tool: this tool can check the alt tags of images and provide some optimization suggestions.
• Request Checker: Find the resources and services to be loaded on the page.
• Link Checker: Checks internal, external, and invalid links on the page.
• HTTP header check: displays the HTTP Response Headers of web pages or resources.
• Social Checker: checks social components on pages, such as Google +, Facebook, Twitter, Linkedin, and Pinterest.
• If modified Checker: Check whether the page accepts the If-Modified-Since HTTP header.
• Gzip Checker: checks whether the page is compressed by Gzip.
• CSS delivery tool: checks the CSS files used on the page.
• Bread tool: Provides the code for the bread Navigation Based on your input information.
• CSS compression tool: Used to compress CSS code.

 

With the above optimization recommendations and optimization tools, you can easily find bottlenecks that affect the performance of your Web pages and easily improve the performance of Web pages. If you have experience in Web optimization, please share with us.

Frontend production and SEO

There is no higher level than that. The main seoer needs to negotiate with designers and developers, and there are some factors that are not conducive to seo that need to be avoided.

What do front-end engineers do? What are the prospects?

The main task is to make the UI design drawing html pages according to w3c standards, and implement front-end interaction on pages using javascript scripting language. Interaction effects include pop-up layer, Tab switch, image scrolling, and ajax Asynchronous interaction. Senior front-end engineers are also responsible for front-end optimization, and the optimization knowledge will be more, such as file expiration Expires, cache, asynchronous cache, js, css, and image compression. Front-end development is a special task. Front-end engineers work easily and seem lightweight, but it is definitely not that easy to do. The content covered in the development process is very broad. We need to consider the implementation of the interface from a technical point of view, avoid the dead corner of the technology, and think about it from the user's point of view, how can we better accept the boring data presented by technology and better present information. Simply put, its main function is to better combine website data and user acceptance to present a friendly data interface for users. Front-end engineers are a very new profession, and they have been really valued for less than five years at home and abroad. The rapid development of the Internet, from WEB1.0 to WEB2.0, to HTML5 and CSS3, and now the rise of new technologies such as mobile phones and 3G networks, Web pages are dominated by original images and texts, all kinds of applications, interactions, and rich media are presented based on the mourning front-end technology, with more information, richer content, and more friendly experiences, it has become a requirement for front-end development of websites. The front-end development of websites has changed over the past few days. Website development is becoming more and more important to front-end needs. However, the current demand for front-end engineers is far greater than supply, and front-end talents are very scarce. Therefore, high-quality front-end development engineers will be a very popular career in the next five years, and the development prospects are very impressive.