"The website is too slow, and users are complaining!" Last week, I took over a running e-commerce website, and the first screen loading time was as long as 8 seconds. As a front-end developer who is obsessed with performance, this number keeps me awake at night. After a week of optimization, we compressed the first screen time to less than 2 seconds. Today, I would like to share with you the practical experience of optimizing the website's speed speed. 😊
Performance problem diagnosis
First, we need to find out where the performance bottleneck is. Through Chrome DevTools' Performance and Network panels, I found several major issues:
// Question 1: The resource loading order is unreasonable// Previous code<head>
<link rel="stylesheet" href="/styles/" rel="external nofollow" rel="external nofollow" >
<script src="/js/"></script>
<script src="/js/"></script>
</head>
// Question 2: The image resources are not optimized<img src="" alt="product">
// Question 3: A lot of synchronized JavaScript execution = function() {
initializeEverything();
setupEventListeners();
loadThirdPartyScripts();
}
Loading optimization
1. Resource loading strategy optimization
First, we reorganized the loading order of resources:
<head>
<!-- key CSS Inline -->
<style>
/* Key style of the first screen */
.header, .hero { /* ... */ }
</style>
<!-- 非key CSS Asynchronous loading -->
<link rel="preload" href="/styles/" rel="external nofollow" rel="external nofollow" as="style" onload="='stylesheet'">
<!-- 延迟加载非key JavaScript -->
<script defer src="/js/"></script>
<script async src="/js/"></script>
</head>
2. Picture optimization
We implemented a progressive image loading strategy:
// components/
import { useState, useEffect } from 'react'
export function ProgressiveImage({ src, alt, width, height }: ImageProps) {
const [currentSrc, setCurrentSrc] = useState(getLowQualityUrl(src))
useEffect(() => {
const img = new Image()
= src
= () => {
setCurrentSrc(src)
}
}, [src])
return (
<img
src={currentSrc}
alt={alt}
width={width}
height={height}
loading="lazy"
decoding="async"
className="transition-opacity duration-300"
/>
)
}
3. Code segmentation and lazy loading
Implement smart code segmentation using webpack and:
// Code segmentation at the routing levelconst ProductList = (() => import('./pages/ProductList'))
const ProductDetail = (() => import('./pages/ProductDetail'))
function App() {
return (
<Suspense fallback={<Loading />}>
<Routes>
<Route path="/products" element={<ProductList />} />
<Route path="/products/:id" element={<ProductDetail />} />
</Routes>
</Suspense>
)
}
Rendering optimization
1. Virtual list implementation
For long lists, we implement virtual scrolling:
// components/
function VirtualList({ items, rowHeight, visibleRows }: VirtualListProps) {
const [scrollTop, setScrollTop] = useState(0)
const startIndex = (scrollTop / rowHeight)
const visibleItems = (startIndex, startIndex + visibleRows)
return (
<div
style={{ height: * rowHeight }}
onScroll={e => setScrollTop()}
>
<div style={{ transform: `translateY(${startIndex * rowHeight}px)` }}>
{(item => (
<div key={} style={{ height: rowHeight }}>
{}
</div>
))}
</div>
</div>
)
}
2. State management optimization
We used a fine-grained state update strategy:
// Before optimization: re-render the entire component treeconst [productData, setProductData] = useState({
list: [],
filters: {},
sorting: 'price'
})
// After optimization: Separate the focus pointsconst [productList, setProductList] = useState([])
const [filters, setFilters] = useState({})
const [sorting, setSorting] = useState('price')
3. Cache Policy
Implemented a multi-layer caching mechanism:
// utils/
const cache = new Map()
export function withCache<T>(
key: string,
fetchFn: () => Promise<T>,
ttl: number = 3600000 // 1 hour): Promise<T> {
const cached = (key)
if (cached && () - < ttl) {
return ()
}
return fetchFn().then(data => {
(key, { data, timestamp: () })
return data
})
}
// Use exampleconst getProductData = async (id: string) => {
return withCache(
`product:${id}`,
() => (id)
)
}
Performance monitoring
To continuously monitor performance, we implement performance metric collection:
// utils/
export function collectMetrics() {
const paint = ('paint')
const navigation = ('navigation')[0]
return {
FCP: (p => === 'first-contentful-paint')?.startTime,
TTFB: - ,
TTI: (), // Simplified version of TTI }
}
// Report performance data regularlysetInterval(() => {
const metrics = collectMetrics()
('performance', metrics)
}, 60000)
Optimization results
After a series of optimizations, we have achieved remarkable results:
- Home screen loading time: 8s → 2s
- First Content Drawing (FCP): 2.8s → 0.8s
- Maximum content drawing (LCP): 4.5s → 1.5s
- Page interaction delay (FID): 300ms → 50ms
What makes me most pleased is that I receive feedback from users: "The website has become super fast and it's so comfortable to use!" This makes all the optimization work worth it. 😊
Written at the end
Front-end performance optimization is a continuous process, without a once-for-all solution. The key is to:
- Establish a performance indicator baseline
- Continuous monitoring and optimization
- Pay attention to performance issues during development
- Create a performance optimization culture
This is the article about website opening speed optimization for full-link speed improvement from loading to rendering. For more related website opening speed optimization content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!