What developers should know about Web performance and Web performance Optimization Tutorial: How to optimize a site picture?

Http://www.wtoutiao.com/p/1deiv1x.html

Web performance that developers should know

Concurrent Programming Network (Ifeve) · 2016-01-04 22:16

What's the difference between a fast and slow website?

Is there a correct answer?

No, unfortunately, not yet. The reason for this is that there are many factors on the site, and each of these factors can slow down the site. Therefore, this article will not give you a list of what needs to be done, but rather to explain how some factors slow down the site and what you can do accordingly.

As the proverb says:

To give a man a fish is better to give it to a fish than a man to save a moment, and to give a man a fishing can solve his life's need.

In addition to allowing you to add "async" tags to your scripts, or to layout pages in a specific order, I'm going to explain the differences that these changes bring. This way, you will be able to toss your application and confirm which modifications are useful.

1 One thing everyone should do is speed up the page loading

As I have just mentioned, there is no such thing. The web is somewhat surprisingly complex. The slow loading of pages may not be the right standard for you to focus on.

However, there are some fairly important factors that often lead to obvious differences. You may have met before, but you may not understand why they are important.

1 compression

Use gzip compression to transfer HTML, CSS, and JavaScript, reducing the number of bytes that need to flow through the cable. This can significantly reduce the time it takes to download resources. The browser renders the page without HTML and CSS, so we want to download these resources as soon as possible.

2 picture optimization

I have a friend, he set up a WordPress site for customers, there are many sites often upload a lot of pictures, I recently chatted with him. He was confronted with a problem that the customer directly uploaded the pictures in the camera to their website.

More than 1MB of photos were taken by mobile phones. Even if you resize with CSS, you still need to download this very large picture from the cable. Users with slow speeds need to wait a long time to open.

Fortunately there is a way to cope. I have a program that is related to optimizing the picture. If you have not seen it, I highly recommend it to you.

3 do not transfer unnecessary stuff.

Look at the scripts and CSS files on different pages and ask yourself if these files are really needed for the page. You'll probably find some files that have been added to it and haven't been removed.

The plug-in's performance in this respect is really bad. Quite a few of my Contacts ebordpress Web site, loaded with a lot of CSS files, half of which files in some pages are not used at all. Many non-WordPress sites also have similar phenomena. When I checked some of the pages on scaleyourcode.com earlier, I also found that they were loading an unnecessary script.

Erasing a script or style sheet can be scary. If it is really necessary for that page, but you do not remember, what to do. There are some tools that can help us confirm and recommend DevTools (under audits).

Can you see the similarities between these optimizations? They all reduce the number of bytes we need to transfer.

2 Progressive Rendering

You need to give the HTML bytes to the browser as soon as possible.

For example: A request comes in and (ideally) your data is cached so the server can get it quickly. The browser then starts parsing the data and renders it on the screen.

As I mentioned earlier, page loading times may not be the performance criteria you need to focus on, thanks to progressive rendering.

Progressive rendering

The page can be huge, but as long as you're presenting something to the user in a short period of time (preferably less than 1 seconds), they still feel loaded quickly.

Amazon has done a good job in this area:

Incremental rendering for Amazon

For this webpagetest, you get the first screen in 1.5 seconds, but you can see that it doesn't contain all the content. It contains enough content to start browsing the page, or to view holiday transactions.

Then, to 3.5 seconds, the other part loads more deals. To 6.5 seconds, something is still loading. In fact, the completion of the entire page load lasts until 18 seconds. Can you wait that long? I doubt that.

If Amazon is focused on the slowest page loading, someone must be irritated. They are focused on sending the most important bytes in the earliest packet. Further, they may fill the first packet with the most important bytes. I bet they're also focused on sending you those bytes as soon as possible.

This is the origin of TTFB (time to first Byte).

When a browser initiates a page request, it is in a state of waiting for a response. TTFB represents how long it takes to receive the first byte of a response. This time not only represents the time it takes for your server to generate a response, it also means the time it takes to transfer the cable.

This picture has a very fast TTFB. If you go online, you can see different TTFB, and the situation you see is similar to the following image:

Why this is the case, how can we minimize that time. You should focus on optimizing it. Good question, I have prepared more information on this.

If you are interested in learning more, please refer to Steve Souders's wonderful speech on the performance criteria used to measure. Page loading times are not always the best standard.

3 Other factors that allow content to be presented more quickly.

Now that we have a faster TTFB, every place is going to be very fast. Not necessarily, let's look at the critical rendering path.

The key rendering path is the sequence of steps that the browser has to perform in order to get HTML, build the DOM, get style information, execute critical JavaScript, and draw the content.

God, there's a lot of work to do.

That's why we need to take it seriously. The more HTML, CSS, and JavaScript, the longer it takes. This is why you add the async tag when you load a JavaScript file.

When the browser encounters JavaScript, it may not know if the JS here will change the DOM. Therefore, it has to assume that it will change, and then it blocks rendering until JavaScript completes the execution process. If an async tag is added, it is equivalent to assuring the browser that the JS is not critical to the page, so the browser can continue rendering without waiting for JS to complete.

If you run into a script that modifies the page, does that mean it should not be asynchronous? possible. However, even if you asynchronously modify the script of the page, it is also useful from a user's perspective. The user is able to see the content and begin to generate interaction. Indeed, some places may not be able to be presented, or it might take more than a moment. Of course, it all depends on your application, so try it and see if it meets your needs.

Critical paths are so important to receive bytes as fast as possible, because the sooner you can start processing the whole process, the faster it can be done. For more information on optimizing critical render paths, please refer to here.

4 How do you measure the good and bad of an asynchronous (or other optimization) application?

There's a good measuring tool, webpagetest. You can get a variety of useful information, including slide views. The slide view is the visual process I just used to show Amazon pages. You can use it on your website to compare the differences between the asynchronous and the parallel.

Until recently, DevTools implemented its own slide view.

Open Chrome DevTools and click Reload Page TimeLine, screenshots.

You can see the screenshot of the page loading process. That's good.

Now, you can:

Switch your network speed (remember, not everyone has an ultra-fast internet)

View Slide View

Change the script to asynchronous (or make other adjustments)

Compare slides

You can adjust the speed in the DevTools.

Another tool is Speedcurve, which I recently stumbled on. It was developed by two clever guys: Mark Zeman and Steve souders, and it looked very helpful.

5DevTools is excellent, how can we better understand its usage?

The challenge is to increase the side effects of too many features that are unfortunately caused.

Besides looking at the example above, what's the better way to start learning and practicing? For how to use Devtools,paul Lewis in the actual website and others have already experienced it. Here's a great example of fixing rolling performance issues

Http://www.5icool.org/a/201412/a9501.html

Web Performance Tuning Tutorial: How to optimize your site picture.

HTTP Archieve has a statistics, the picture content has accounted for the total amount of Internet content 62%, that is, more than half of the traffic and time are used to download pictures. From the point of view of performance optimization, the picture is definitely the focus of optimization and one of the key points, Google Pagespeed or Yahoo's 14 performance optimization rules all take picture optimization as an important optimization means, this article covers all aspects of Web image optimization, from the basic picture format selection, To responsive images that have not yet been widely supported.

Google Web Fundamentals I like to say:

Picture optimization is both an art and a science, picture optimization is an art, because the compression of individual images does not exist the best special qualitative scheme, and picture optimization is a science, because many well-developed methods and algorithms can significantly reduce the size of the picture. To find the best settings for a picture, you need to analyze it in many dimensions: format capability, encoded data content, pixel size, and so on.

Do you really want to use the picture?

Do you really need a picture to achieve the desired effect? This is the first question to ask yourself. Browsers and web standards are developing very fast, and I remember that a few years ago when I was using Microsoft Silverlight 1.0 to write a video player, Chinese couldn't use custom font display, so I wrote a lot of bad code to generate images on the server and cache them. Users are slow to download, and search engines are completely unable to retrieve the text.

But now, a lot of special effects (gradients, shadows, fillets, and so on) can be implemented with pure HTML, CSS, SVG, and so on, with few lines of code, and many more loaded with additional libraries (a common photo is much larger than a very powerful library of effects). These effects not only need the space is very small, but also in the multi-device, multi-resolution can work well, in the low-level browser can also achieve better function degradation. Therefore, in the case of alternative technologies, you should first select these technologies and only add real images when you have to use the images.

Alternative techniques CSS effects, CSS animations. Provides resolution-independent effects that can be displayed very clearly at any resolution and zoom level, and occupy little space. Network fonts. Now even a lot of icon libraries are available in font style, keeping the text searchable while extending the displayed style.

Front-end engineers are better able to communicate with designers, product managers to help them understand what effect is "concise, efficient, maintainable", after all, for CSS to change the radius of the rounded rectangle can see the effect in real time, with a picture, at least to regenerate pictures, transduction and replace resources. Retina, high-resolution screen, multi-size devices, these have accelerated the development of non-picture effects, think of the high-resolution screen under Windows 7 miserable, know that the original picture resources is definitely not the more the more.

Selection of picture formats

If the effect really requires a picture to behave, then choosing the picture format is the first step in optimization. The words we often hear include vectors, scalar graphs, SVG, lossy compression, lossless compression, and so on, and we'll start by explaining the features of various image formats:

The late apng and WEBP formats, which have not yet been adopted by web standards, can be used only in the foreseeable context of a particular platform or browser environment, although they may be degraded in an unsupported environment, but these two formats are not discussed in this section. The picture format selection process is as follows:

Color-rich photos, JPG is a universal selection of the structure of the human eye is very suitable for viewing JPG compressed photos, can be fully ignored and in the brain to complement the details of JPG in the compression rate is not high when the details are still good WEBP can reduce the volume of 30% than JPG, but the current poor compatibility

If you need a more generic animation, GIF is the only available choice GIF supports a color range of 256 colors, and only fully transparent/fully opaque gifs may appear color incomplete, edge aliasing and so on when displaying colorful animations

If the image is made up of standard geometry, or if you need to use a program to dynamically control its display effects, consider the SVG format