Overview of front-end page optimization (2)

In the previous article, we discussed some basic page optimization and weight loss solutions. Now our page has been reduced by 30%-50%. If you have not read the previous article, I suggest you continue the advanced training after completing the basic warm-up.

If you have tried the basic warm-up, we will continue to adopt some more geek solutions.

1. Remove social network components from the website

Don't be surprised to see this title. I don't want you to give up on third-party social platforms, but want you to give up the official components of obesity. Does your website have the share button for social platforms? These buttons increase your website by about 0.5 Mb. We know that these sharing functions are implemented by JavaScript, and the network connection of some sharing components is enforced before the page is loaded.

Too many social media components are unnecessary. You can add a lightweight social sharing button on your webpage, how can we deal with a few lines of HTML code? Why is it so complicated? Many people may not care about a small detail. Facebook's official "like" button will take kb! Now you should understand the necessity of doing so. We should study in depth how to optimize social components.

If you think a simple button cannot provide data statistics and other functions, you can take a look at this article and learn how to add a High-Performance Lightweight social networking component.

2. Check the size of all third-party components

Social networks are not the only reason. other third-party components also greatly increase the size of your website. These components sometimes even load the content of other websites, the loaded data may be up to several hundred kb.

If you have to use this component, we need to consider how to better process and simplify it. Ideally, JavaScript components should be lightweight and loaded at the bottom of the page,

3. Consider using lazy loading or on-demand content.

Assume that your website is used to display videos provided by video providers. The video API and other related resources are loaded on the page no matter whether the user wants to play the video or not. Why not let the user load these items after the request?

You can also use a rolling page to load new content when the user pulls down the scroll bar. This may affect Seo, but in specific circumstances, such as photo display and Weibo content display all have good results.

4. Use CSS to replace Images

Are you still using the slicing technology to create the image's rounded border and other styles? We all know that CSS can generate many foreground effects, including buttons and backgrounds of various styles ...... Although they may have different display styles in different browsers, users do not care about this. They will not open many browsers like you and compare the differences between the same code.

You don't have to worry about the impact of ancient browsers on CSS styles. When you build a responsive design page, you need to configure various sizes to shield it, at this time, if you still use images, there will be many problems, so CSS is a good choice.

However, it is important to note that the shadow and gradient of CSS are very expensive, especially when you add these features to dozens of elements at the same time. Therefore, you must practice it multiple times to compare whether CSS or images are good for your website. These are all determined by the specific circumstances of the website.

5. Replace JavaScript with CSS effects and animations

If $ ("# X") is everywhere in your JavaScript code "). fade () and $ ("# Y "). slidedown () will have a great impact on your website. We had to do this a few years ago, but now it's different. We can choose to replace JavaScript with the animations, transitions, and transformations of css3 for the following reasons:

1). css3 animation is self-drawn by a local browser. It works better and faster than JavaScript without errors.

2). css3 animation code is easier to write and requires less code.

3) If JavaScript does not use a third-party class library, it is much more difficult to implement the 3D effect than css3 provides 3D conversion.

6. Use a scalable vector chart (SVGs)

SVGs includes vertices, lines, and graphs, which are defined in XML in Vector Form. SVGs is a solution that is better understood in responsive design, they can be scaled to any size without affecting the display effect, and the file size is generally smaller than bitmap.

Of course, SVGs is not applicable in any situation. If it is an image of an album or a hybrid channel, it should be in JPG or PNG format. For other charts such as logo, you can use SVGs with ease.

Some tools can directly convert bitmaps into vector formats, but the effect of bitmaps is somewhat affected. Inkscape and SVG edit are recommended here. They are good tool kits for creating SVGs.

7. Use the icon fonts to replace the image.

The font tool is used to convert the image icons (icons) we use on the Web into web fonts, and it becomes the icon fonts. It can be embedded into the web page with the @ font-face of CSS, used to display icons. Because the font is a vectorized image, it is inherently "Resolution-independent" and can be scaled perfectly under any resolution or PPI, not like a traditional bitmap, such as PNG or JPEG, the image is scaled in and blurred.

As the flexibility and ease of use of the icon font make it more and more widely used, we often see that different UI frameworks integrate various icon fonts.

In addition to the biggest advantage of "Resolution independence", icon fonts also has the following features:

• Small File Size: Icon fonts is almost lightweight than dozens of hundreds of KB images.
• Good loading Performance: Because icons are packaged into a set of fonts, HTTP request is reduced. This is like the common CSS Sprites technology.
• Supports CSS styles: Like a regular font, you can use CSS to define the size, color, shadow, hover status, transparency, gradient, and so on...
• Good compatibility: Web Fonts originated very early, not to mention mainstream browsers, and supports IE6/7. In addition to some old mobile browsers, such as the first-generation browsers under Android 2.1 and opera Mini.

Of course, icon fonts also has its shortcomings:

• If the style is single, you cannot adjust the details of the icon for different resolutions, such as reducing the line width of a large icon.
• The color is single, and CSS cannot easily define the color icon. However, the color icon can be achieved through overlapping combinations.
• The compatibility of mobile browsers is not complete yet. Icon fonts cannot be displayed normally for mobile browsers such as opera mini and Windows Phone 7.0-7.8.
• A small number of mobile devices may conflict with the character encoding of the icon fonts, resulting in an abnormal icon display (we encountered this problem in our own Android version ).

Therefore, icon fonts is not a perfect response image solution. When it is suitable for your application scenarios, for example:

• Your website is flat or simple, with a single icon style and solid color.
• Your target user uses a desktop browser, or,
• You are willing to make compatible hack for non-compatible devices.

Icon fonts is a solution that makes designers and front-end engineers feel furious.

There are two main ideas for creating icon fonts:

1. Use font tools for manual Creation
2. Automatic Generation using online tools

8. Use sprite to optimize image resources

Sprite has its unique definition in computer graphics. As the quality of games and videos is getting higher and higher, a technology is required to intelligently process materials and textures, in addition, the image must be smooth at the same time. Sprite is a technology that combines many images into a grid, and then locates the content of each grid on the screen through a program.

Sprite is positioned on a static image, and the image can be correctly located through a simple program or hardware. A picture is like being changed, they do not occupy memory separately, so they are named "Sprite Genie ".

By 2000, the web design was refined and clever. Designers began to consider using non-Javascript methods to make the effects of mouse sliding and hovering menus. CSS sprite came into being. It is based on the same principle as the game sprite mentioned above, CSS is easy to control and is very popular soon.

When a page is loaded, the entire combination of images is loaded at a time instead of each individual image. This is an amazing improvement. It greatly reduces the number of HTTP requests, reduces the pressure on the server, and shortens the time delay required to hover over and load images, making the effect smoother without stopping.

CSS Sprites can be used in many occasions. Large websites can combine multiple independent images in an organic way to facilitate maintenance and update. Images are usually left blank so that the images do not affect the webpage content. At the same time, CSS Sprite is mostly used in fixed pixel positioning. It has poor elasticity and is subject to positioning and other factors. Therefore, you need to weigh the advantages and disadvantages between maintainability and load reduction, and select the most suitable method for your project.

In the solution of website images, css3 should be the first choice, followed by SVG and Icon font, and finally bitmap. Frequently Used bitmap files should be packaged in a separate sprite so that the image can be accessed in CSS, as shown in the following code:

    .sprite {    width: 16px;    height: 16px;    background: url("sprite.png") 0 0 no-repeat;    }    .sprite.help { background-position: 0 -16px; }    .sprite.info { background-position: 0 -32px; }    .sprite.user { background-position: 0 -48px; }

9. Use Data Uris

Suppose you have an image. The standard method for displaying it on a webpage is:

This method of obtaining data is called http uri scheme. The same effect can be written as data URI scheme:

In other words, the content of the image file is embedded in the HTML file, saving an HTTP request.

The main advantage of Data URI is that it reduces the number of HTTP requests and is more flexible to call than CSS Sprite. The disadvantage is that it increases the client resource consumption.

In non-Cache mode of all browsers, the CSS sprite mode is several hundred microseconds faster than the data URI mode. But in fact, CSS sprite sends one more connection request than the data URI method, including TCP slow start, which leads to all related connection overhead.

The CSS sprite modes of Android 4.2 and iOS 6 are improved by about twice under cache conditions, but the CSS sprite modes of IOS are reduced by 220 ms while Android is reduced by 70 ms (native browser ). Relatively speaking, chrome and Firefox have a better balance. In cache and non-Cache situations, there is only a performance difference between 50% to 60 ms.

Here, we recommend that you use data Uris for very small resources and do not use them multiple times in CSS and inline HTML.

10. Use the website evaluation tool

The best way to check for a successful weight loss is to stand on the title and name it. Similarly, you need to use a website evaluation tool to evaluate your effect on slimming your website. Many Developer Tools and free online testing tools are good, and Baidu and Google's webmaster analysis tools are very useful.

Summary

You can obviously find that this article is much more abnormal than the first one. It is more of a geek fan. I believe there are not many webmasters who can follow the practice here. For us, there is a long way to go for geeks to slim down. In the next article, I will list more crazy slimming techniques. Those who succeed are those who stick to the end ~

Overview of front-end page optimization (2)