Lộ trình Hiệu suất giao diện người dùng
Hướng dẫn từng bước để trở thành một nhà phát triển Android.
Hỏi AI về Lộ trình Hiệu suất giao diện người dùng
Chú giải
Đề xuất
Lựa chọn thay thế
Tùy chọn
1HTML
HTML thu gọn – xóa bình luận và khoảng trắng.
Tải trước URL khi có thể.
Giảm thiểu số lượng iframe.
2CSS
CSS thu gọn – xóa bình luận, khoảng trắng, v.v.
Gộp CSS vào một tệp duy nhất.
Làm cho các tệp CSS không chặn.
Xóa CSS không sử dụng.
Chèn CSS quan trọng vào dòng (above-the-fold).
Tránh CSS nhúng / nội tuyến.
Phân tích độ phức tạp của stylesheet.
3Phông chữ
Sử dụng định dạng phông chữ WOFF2.
Sử dụng preconnect để tải phông chữ nhanh hơn.
Giữ kích thước phông chữ web dưới 300 KB.
Ngăn chặn Flash of Invisible Text (FOIT).
4Hình ảnh
Nén hình ảnh / giữ số lượng hình ảnh ở mức thấp.
Chọn định dạng hình ảnh phù hợp.
Ưu tiên hình ảnh vector hơn là bitmap.
Đặt thuộc tính width & height trên hình ảnh (bảo toàn tỷ lệ).
Tránh sử dụng hình ảnh Base64.
Tải chậm hình ảnh ngoài màn hình.
Phục vụ hình ảnh có kích thước gần với kích thước hiển thị.
5JavaScript
Thu gọn JavaScript của bạn.
Tránh nhiều đoạn mã <script> nội tuyến.
JavaScript không chặn: sử dụng async / defer.
Giữ các dependency được cập nhật.
Giám sát kích thước dependency.
Kiểm tra các vấn đề về hiệu suất trong các tệp JS.
Sử dụng Service Workers để lưu đệm & tác vụ nặng.
6Mạng & Phân phối
Sử dụng CDN cho tài sản.
Sử dụng HTTPS trên trang web của bạn.
Giữ trọng lượng trang < 1500 KB (lý tưởng < 500 KB).
Giữ thời gian tải trang < 3 giây.
Giữ Time To First Byte (TTFB) < 1.3 giây.
Giảm thiểu các yêu cầu HTTP.
Phục vụ các tệp từ cùng một giao thức.
Tránh các yêu cầu không thể truy cập (404).
Đặt các tiêu đề bộ nhớ đệm HTTP phù hợp.
Bật nén GZIP / Brotli.
7Cookies
Kích thước cookie < 4096 byte.
Số lượng cookie < 20.
8Công cụ hiệu suất
PageSpeed Insights.
Lighthouse.
WebPageTest.
Chrome DevTools.
Bundlephobia.
Squoosh.app (tối ưu hóa hình ảnh).
9Tài nguyên
Hướng dẫn dành riêng cho framework.
Các bài nói chuyện / hướng dẫn được đề xuất.
Các lộ trình liên quan