Performance optimization recommendations
Performance optimization is key to improving webpage loading speed and user experience. Reasonable HTML coding standards can effectively reduce page rendering time, lower resource consumption, and maintain code maintainability.
Reduce DOM Node Count
Excessive DOM nodes increase the computational burden of page rendering. Optimize with the following methods:
- Avoid unnecessary nesting levels
<!-- Not recommended -->
<div class="wrapper">
<div class="container">
<div class="content">
<p>Text content</p>
</div>
</div>
</div>
<!-- Recommended -->
<div class="content">
<p>Text content</p>
</div>
- Use semantic tags instead of generic divs
<!-- Not recommended -->
<div class="header"></div>
<div class="nav"></div>
<!-- Recommended -->
<header></header>
<nav></nav>
Proper Use of CSS and JavaScript
- Place CSS in the document head
<head>
<link rel="stylesheet" href="styles.css">
</head>
- Place JavaScript at the bottom of the document
<body>
<!-- Page content -->
<script src="app.js"></script>
</body>
- For scripts that don’t affect above-the-fold rendering, add
deferorasyncattributes
<script src="analytics.js" defer></script>
<script src="social.js" async></script>
Optimize Images and Multimedia Resources
- Use appropriate image formats
<!-- Use JPEG for photos -->
<img src="photo.jpg" alt="Photo">
<!-- Use SVG for icons and simple graphics -->
<img src="icon.svg" alt="Icon">
<!-- Use PNG for transparency -->
<img src="logo.png" alt="Logo">
- Add
widthandheightattributes to avoid layout shifts
<img src="banner.jpg" alt="Banner" width="1200" height="630">
- Use the
pictureelement for responsive loading
<picture>
<source media="(min-width: 800px)" srcset="large.jpg">
<source media="(min-width: 400px)" srcset="medium.jpg">
<img src="small.jpg" alt="Responsive image">
</picture>
Reduce Repaints and Reflows
- Use
transformandopacityfor animations
<style>
.box {
transition: transform 0.3s ease;
}
.box:hover {
transform: scale(1.1);
}
</style>
- Avoid frequent DOM manipulation
// Not recommended
for (let i = 0; i < 100; i++) {
document.body.innerHTML += `<div>${i}</div>`;
}
// Recommended
let html = '';
for (let i = 0; i < 100; i++) {
html += `<div>${i}</div>`;
}
document.body.innerHTML = html;
Use Preload and Preconnect
- Preload critical resources
<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="main.js" as="script">
- Preconnect to important third-party domains
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.example.com">
Optimize Form Elements
- Add appropriate
typeattributes to input fields
<input type="email" name="email">
<input type="tel" name="phone">
<input type="number" name="quantity">
- Use
labelto associate with form controls
<label for="username">Username</label>
<input type="text" id="username" name="username">
- Add
autocompleteto improve user experience
<input type="text" name="address" autocomplete="street-address">
Cache Strategy Optimization
- Use manifest files to cache static resources
<html manifest="app.manifest">
- Add
Cache-Controlheaders
<meta http-equiv="Cache-Control" content="max-age=31536000">
Reduce HTTP Requests
- Inline critical CSS
<style>
/* Critical CSS content */
.header { color: #333; }
.hero { background: #f5f5f5; }
</style>
- Combine small icons into sprites
<style>
.icon {
background-image: url("sprite.png");
background-size: 200px 100px;
}
.icon-home {
background-position: 0 0;
width: 50px;
height: 50px;
}
</style>
<div class="icon icon-home"></div>
Use Web Components
- Create reusable custom elements
<script>
class MyComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
:host {
display: block;
}
</style>
<div class="component-content">...</div>
`;
}
}
customElements.define('my-component', MyComponent);
</script>
<my-component></my-component>
Accessibility Optimization
- Add appropriate ARIA attributes
<button aria-expanded="false" aria-controls="dropdown">Menu</button>
<div id="dropdown" hidden>Dropdown content</div>
- Ensure keyboard accessibility
<a href="#content" class="skip-link">Skip navigation</a>
- Add empty
altfor decorative images
<img src="divider.png" alt="">
Mobile Optimization
- Set viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
- Use touch-friendly sizes
<button style="min-width: 48px; min-height: 48px">Click</button>
- Avoid 300ms click delay
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Server-Side Rendering Optimization
- Use SSR to reduce above-the-fold loading time
<!-- Server-rendered HTML -->
<div id="app">
<!-- Initial rendered content -->
</div>
<script src="client.js"></script>
- Stream HTML
// Node.js example
res.write('<!DOCTYPE html><html><head>');
res.write('<title>Page title</title>');
res.write('</head><body>');
// Continue writing content...
Resource Loading Priority
- Mark critical resources
<link rel="preload" href="hero-image.jpg" as="image" importance="high">
- Defer non-critical resources
<img src="lazy-image.jpg" loading="lazy" alt="Lazy-loaded image">
Reduce Third-Party Script Impact
- Use iframes to isolate third-party code
<iframe src="https://example.com/widget"
sandbox="allow-scripts allow-same-origin"
loading="lazy"></iframe>
- Load non-essential scripts dynamically
window.addEventListener('load', () => {
const script = document.createElement('script');
script.src = 'non-critical.js';
document.body.appendChild(script);
});
Code Minification and Simplification
- Remove HTML comments
<!-- Remove such comments in production -->
- Minify whitespace
<div class="compact"><span>Content</span></div>
- Use short attribute names
<input type="checkbox" checked>
Modern Browser Feature Detection
- Use
supportsfor conditional loading
<link rel="stylesheet" href="modern.css" media="(display-mode: standalone)">
- Progressive enhancement strategy
<video controls>
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
<p>Your browser does not support HTML5 video</p>
</video>
Performance Monitoring and Testing
- Add Performance API markers
performance.mark('start-loading');
window.addEventListener('load', () => {
performance.mark('end-loading');
performance.measure('page-load', 'start-loading', 'end-loading');
});
- Use Lighthouse audits
<!-- Ensure the page includes necessary meta info -->
<meta name="description" content="Page description">
本站部分内容来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn
