Website images and font optimization: first screen slow and then running points

Let's see what's actually downloaded on the first screen.

The most easy way to optimize a website image is to track: load a plugin, compress all pictures, and see the score rise. Readers really feel how long they can see the title after opening the link, whether the picture is suddenly squeezed and whether Carton continues to roll. First, reload the browser's network panel with a mobile network speed, sorting it in size, and usually quickly seeing the largest picture and extra fonts. Records three baselines: total first screen transmissions, maximum resource, and number of font files. Do not test only the local high-speed network; the first visit after the cache is empty is closer to the search user.

The picture is exported in a display size.

One shows only 720 in the text.px A wide screen. There's no need to upload 4000.px original map. Keep the balance necessary for a high density screen and remove the unnecessary transparency edge. Photos are usually appropriate AVIF or WebP, the interface screenshot is to see the edge of the text,Logo and icons to prioritize maintenanceable SVG. The format is not an absolute answer, and it should be compared with the actual volume in the same visual quality. I'm not going to be able to save a large proportion of content pictures.HTML Output width and height or CSS aspect-ratio, reserve space before the browser downloads. Otherwise, the image arrives with the following paragraphs and buttons pushed down, causing the layout to jump.

Respond image to avoid cell phones downloading desktop large maps

Use srcset and sizes Tell the browser what sizes it takes and how wide the picture actually takes.sizes When wrong, the browser may still select large files, so the final request is confirmed by a web panel at different angles.

<img
  src="guide-800.webp"
  srcset="guide-480.webp 480w, guide-800.webp 800w, guide-1280.webp 1280w"
  sizes="(max-width: 720px) 100vw, 720px"
  width="1280" height="720"
  alt="文章编辑页的移动端布局"
>

alt Describes the role of the picture in the current context, without stacking keywords. Pure decorations are empty. alt, avoids the screen reader repeating the words.

Delaying loading cannot cover the first screen key picture

It's a good image. loading=lazy, the first screen master map needs to be discovered as soon as possible. The delay in loading all images may cause the maximum visible content to appear later. The second and third screens of the rotating drawings should not normally be downloaded on the first screen; if the first is only decorative, they can also be deleted directly, saving a more reliable volume than a format change. Pictures CDN It is easy to convert, but keep the originals, the conversion rules and the removable path. Do not let the database save only one home. CDN Generated Temporary URL Otherwise, the replacement of services would be reactive.

Chinese web pages are the easiest to lose with too much weight.

Chinese fonts have a large number of fonts, and a complete file may be much larger than the Latin font. Ask first whether custom fonts need to be downloaded. System fonts are usually the fastest to load, and can be matched to different platforms. If brands do require web fonts, only the weights actually used in the text, do not bring all 100 to 900. Yes. font-family Provides close back fonts to reduce the width changes when fonts are switched; selects the appropriate font font-display strategy, see whether the back font is displayed under the slow network or is it blank for a long time. Logo The words may be used as a subset, but the text dynamic cannot be used as a set of children, otherwise the missing words will revert to another font.

Do not reload the same resource at the station.

Checks whether third-party components each include fonts and icon libraries. One page contains two icon fonts, three analytical scripts and multiple chat hangs, and the image is not small enough to save the first screen. Priority is given to deleting third-party resources that do not have a clear value and processing the compression details. Use file names with content for long-term caches; file content changes,URL It's changed.HTML It is not appropriate to have an unlimited long-term cache because it is responsible for quoting the latest resources.

Completion criteria

The first screen no longer downloads pictures that are clearly beyond their display dimensions, when they arrive, do not push the text, choose the appropriate size, select the cell phone, delay loading of off-site resources, and the number of fonts and the weight of words to explain. Keep the pre-optimal web records before and after they can be modified to detect degradation. The next one deals with another component that is easy `to appear to be submitted successfully, no one actually receives it. 'How do we get the website forms to keep track of things?.