Critical CSS là gì, làm sao trích xuất critical CSS trong WordPress

CSS quan trọng trong WordPress

Hiểu về bản chất của CSS trong WordPress

Trước khi đi sâu hơn, chúng ta sẽ tìm hiểu cách CSS (thông thường) sẽ hoạt động như thế nào trong WordPress.

Mọi giao diện (theme) WordPress đều bao gồm một file style.css bao gồm tất cả các đoạn mã cần thiết để tạo style cho website của bạn. Nhà phát triển theme cần hỗ trợ tất cả các tính năng của WordPress bao gồm bài đăng blog, bình luận, trang sản phẩm, trang thành viên, form, vân vân. Các plugin khác mà bạn cài cũng có thể thêm các style css tương tự.

Điều này có khả năng làm file CSS phình to ra và có kích cỡ lên đến 200KB hoặc thậm chí còn cao hơn nữa.

Đọc thêmCritical CSS là gì, làm sao trích xuất critical CSS trong WordPress

Quicklink và Instant.page và tại sao tôi xây dựng plugin Flying Pages

Hải âu tung cánh

Khi mọi người tò mò hỏi rằng tôi có bí mật gì không mà blog của tôi lại tải nhanh như vậy (blog của tác giả gốc: wpspeedmatters.com), tôi trả lời họ đó là nhờ “Quicklink”. Nếu bạn ở trong nhóm WP Speed Matters trên Facebook, bạn có thể để ý là tôi đề xuất sử dụng Quicklink cho tất cả mọi người.

Đọc thêmQuicklink và Instant.page và tại sao tôi xây dựng plugin Flying Pages

Giới thiệu Flying Images: plugin lazy load ảnh hiệu suất cao

Lazy loading hoạt động như thế nào? Một ảnh thông thường trong HTML trông giống như thế này: <img src=”vidu.jpg” width=”100%”/> Các plugin lazy loading sẽ ghi lại đoạn mã trên thành: <img data-src=”vidu.jpg” width=”100%”/> Bạn có thể để ý thấy là thuộc tính src được thay thành data-src. Khi không có src, trình duyệt sẽ không tải ảnh ngay lập tức. Sau đó một đoạn mã nhỏ JavaScript sẽ kiểm tra xem liệu rằng ảnh có nằm trong khung nhìn trình duyệt hay không (viewport – khu vực nằm trong phần quan sát của người xem trên trình duyệt) …

Đọc thêmGiới thiệu Flying Images: plugin lazy load ảnh hiệu suất cao