Original link: https://dev.to/koustav/html-css-features-tips-for -a-10x-fast-page-loading-speed-4jop
Author:devkoustav
If the translation is not correct, please correct me
We're all annoyed when our pages load so slowly!
Factual website conversion rates drop an average of 4.42% for each additional second of load time (between 0-5 seconds). The first five seconds of page load time have the greatest impact on conversion rates.
However, you can improve your website's page load speed by changing your HTML and CSS files without using the best hosting service in the most difficult way!
1. Lazy loading
Lazy loading is a shorteningCritical Rendering Pathlength strategy, which meansreduces page load time .
a) Split CSS files
CSS must be lean, delivered as quickly as possible, media types and queries are recommended to unblock rendering. What do I mean by streamlined? -Split your CSSfile so that the entireCSS span>CSSWill not execute on all screens.
? For print media use
? for mobile screens
?for tablet screens
? Use different CSS files for different orientations of mobile screens
By separating the CSS into multiple files, the main render-blocking file (styles.css in this case) is much smaller, reducing the amount of time the render is blocked and greatly improving page load speed.
b)CSSfont-displayProperties
Applicable to the @font-face rule, the font-display attribute defines how the browser loads and displays font files, allowing text to be displayed in a fallback font when the font loads or fails to load. This improves performance by making the text visible, rather than using a blank screen, which is also flash for unstyled text.
c)HTMLimages in files
Users only see the top image for the first second. So why make them wait for the last image to load? Use loading='lazy' so that images are only loaded when needed. This drastically slows down page load speed.
2. Choose the correct image format
Make images in .webp format. It is recommended as an image format standard for the web.
WebP lossless images are 26% smaller in size compared to PNG. At an equivalent SSIM quality index, WebP lossy images are 25-34% smaller than comparable JPEG images. Animated WebP images all support lossy, lossless, and transparency, and these images can be reduced in size compared to GIF and APNG.
WebPvs PNG image format
WebPvs JPEG image format
Through all these tests, it turns out that webp images, even with loss, are much more compressed, so the page loads a lot slower!
You can also check the image format .avif, which is better than .webp in a few cases, but it's new in the market (released in 2019), so it's not supported by many browsers yet. avif format!
? Use the <picture> element
a) Used to crop or modify images for different media conditions (e.g. loading a simpler version of an image with too much detail on a smaller display).
b) Provide an alternative image format if the webp format is not supported.
c) Save bandwidth and speed up page load times by loading images that best fit your viewer's monitor.
Use srcset on the <img> element if serving a high-density version of the image for a high-DPI (Retina Display) display. This allows the browser to select the low density version in data saving mode, and you don't have to write explicit media conditions.
3. Render image
Since images are loaded asynchronously and continue to load after the first load, they may cause reflows to page content if their dimensions are not defined before loading. For example, when text is pushed down by image loading. Therefore, it is crucial to set the width and height properties so that the browser can reserve space for them in the layout.
For any background-image, it is important to set the background-color value so that any content overlaid is still readable before the image is downloaded.
4. Minify HTML and CSS files
Minification is the removal of all unnecessary characters from the code to reduce its size. Remove unnecessary whitespace characters such as spaces, newlines, tabs, etc., as well as comments.
Use minification tools like CodeBeautify, CSSMinifier, etc. to minify HTML and CSS files. These will help improve the page load speed of your website.
RECOMMEND
Articles are uploaded by users and are for non-commercial browsing only. Posted by: Lomu, please indicate the source: https://www.daogebangong.com/en/articles/detail/HTML%20and%20CSS%20Features%20Tips%20to%20Speed%20Up%20Page%20Loads%2010x.html
支付宝扫一扫 
评论列表（196条）
测试