1. Minimize the number of requests
Extract common CSS, modularize, and merge others. The same goes for Javascript (which can avoid page loading blocking).
Merge small icons, backgrounds and other images on the page to reduce the number of requests.
2. Reduce page size
Compress JS
3. Reconstruction of CSS & HTML
CSS The selector cannot be too long, and the use of ID selectors and !important
4. Lazy loading
is usually applied to web pages with many pictures. If a page has more pictures than There are many, and the page height or width is several screens. When the page is first loaded, only the pictures in the visible area are displayed. When the page is scrolled, the pictures enter the visible area and then are loaded. This can significantly improve the loading speed of the page. , fewer concurrent image requests can also reduce the pressure on the server. If users only stay on the first screen, they can also save data. If there are many pictures in TAB, it can also be applied to TAB, and then the pictures will be loaded when TAB is triggered.
Principle: Replace the image with a 1*1 placeholder image (it would be best if the placeholder image can be set to the width and height of the real image). The real address is cached in a custom attribute ( lazy-src),
wait until it enters the visible area (or a certain distance from the visible area), replace the src of the placeholder image, and the real image starts loading.
| Optimization means
| Number of requests
| Merge scripts and style sheets, CSS Sprites, split initialization load, divide main domain
| ||||||||||
Request bandwidth
| Enable GZip, streamline JavaScript, remove duplicate scripts, image optimization
| Cache exploit
| Use CDN, use external JavaScript and CSS, add Expires header, reduce DNS lookups, configure ETag, make AjaX cacheable
| ||||||||||
Page structure
| Put stylesheets at the top and scripts at the bottom to refresh the output of the document as early as possible
| ||||||||||||
Code verification
| Avoid CSS expressions, avoid redirects |

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

WebStorm Mac version
Useful JavaScript development tools

Atom editor mac version download
The most popular open source editor

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
