Trích xuất CSS quan trọng (critical CSS)

Bởi

Tóm tắt: học cách cải thiện thời gian hiển thị website nhanh hơn với các kỹ thuật critical CSS. Trình duyệt phải tải và phân tích cú pháp (parse) các file CSS trước khi nó có thể hiển thị trang, điều này làm cho CSS là nguồn chặn hiển thị (render-blocking). Nếu các file CSS có kích thước lớn, hoặc điều kiện mạng chậm chạp (đứt cáp, kết nối trên di động yếu & không ổn định), các yêu cầu cho file CSS có thể làm gia tăng thời gian đáng kể việc hiển thị web. A. Thuật ngữ chính …

Đọc thêm

Thiết lập nhanh cho plugin lazy load ảnh Flying Images

Bởi

Trong bài viết trước tôi có giới thiệu về plugin lazy load ảnh rất thú vị có tên Flying Images. Tuy nhiên không nói gì về các cài đặt cả. Bài viết ngắn này sẽ bổ sung thiếu sót đó. Nhắc lại một chút, điểm mới của plugin Flying Images là nó: Sử dụng tính năng tải lười mặc định của trình duyệt Chrome (native lazy loading), một tính năng mới, hiệu quả hơn cách dùng JS truyền thống; Với các trình duyệt khác Chrome, plugin vẫn phải sử dụng JS để tải lười. Tuy nhiên nó rất nhẹ, chỉ …

Đọc thêm

Một giải thích ngắn gọn về critical CSS

Bởi

Với những ai có căn bản về web, bạn hiểu khá rõ về HTML, CSS, JS và có thể là một ngôn ngữ lập trình web phổ biến như PHP. Khi ấy các giải thích về citical CSS không khó khăn để hiểu. Tuy nhiên nếu bạn là người ngoại đạo, việc giải thích critical CSS là các đoạn mã được dùng để style cho nội dung thuộc màn hình đầu tiên, còn các đoạn mã CSS khác được trì hoãn tải có vẻ khó tiếp thu. Nếu bạn rơi vào trường hợp này, thì đây là bài viết dành …

Đọc thêm

Bạn có nên sử dụng critical CSS

Bởi

Tóm tắt: Bài viết này sẽ cho bạn biết critical CSS là gì? Cách nó hoạt động và khi nào bạn nên sử dụng nó? Và thậm chí…khi nào bạn không nên sử dụng critical CSS? Đây là một hướng dẫn khác về hiệu suất của WordPress không-hề-chém-gió (cut-the-crap) tôi muốn dành cho bạn… Để tôi kể chuyện, hồi trước tôi nhận được một câu hỏi ngây thơ từ khách hàng từng mua hosting của mình: Này, tôi muốn hỏi bạn nhanh một câu: Bạn đã bao giờ xử lý critical CSS chưa? Tôi đang cố gắng thử nghiệm nó …

Đọc thêm

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

Bởi

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. Quicklink là gì? Tải trang tiếp theo nhanh hơn nhờ prefetch liên kết trong viewport (khung nhìn) khi trình duyệt rảnh rỗi Quiclink là một file JavaScript nhỏ bé có khả năng phát hiện các liên kết …

Đọc thêm

5 biện pháp tăng tốc WordPress có hiệu quả nhưng KHÔNG dễ triển khai

Bởi

Tăng tốc WordPress là một tập hợp rất nhiều thứ cần làm. Kết hợp chúng với nhau khéo léo bạn sẽ có được trang WordPress có tốc độ tốt nhất có thể. Tuy nhiên các biện pháp này không giống nhau, có những cái dễ triển khai hơn nhiều những cái còn lại. Bài viết này tập trung vào các biện pháp tuy có hiệu quả nhưng không hề dễ triển khai chút nào. Nghe cũng thú vị đúng không? Chúng ta bắt đầu ngay nhé. 1. Máy chủ cao cấp Google Cloud và Amazon Cloud có lẽ là những …

Đọc thêm

Tư duy xe chở hàng trong tăng tốc website

Bởi

Nói về hình ảnh gần gũi, dễ hình dung trong tăng tốc web, tôi không nghĩ được ẩn dụ nào hơn việc nghĩ về chiếc xe vận chuyển hàng hóa. Hãy xem các so sánh này: Xe chở hàng từ điểm A đến điểm B giống như cách trình duyệt phải chở nội dung từ hosting A đến vị trí của người dùng B thông qua trình duyệt. Nếu bạn muốn website nhanh điều căn bản là phải có hosting chất lượng cao: điều này cũng giống như chuyện nếu bạn muốn xe hàng chở nhanh từ địa chỉ A …

Đọc thêm

Các website có lưu lượng truy cập không quá lớn nên dùng RAM cache

Bởi

Có nhiều cách sử dụng cache trong nhiệm vụ tăng tốc WordPress, trong đó phổ biến nhất là RAM cache, và Disk cache. RAM cache thường được dùng trong các kiểu cache như Redis, Nginx FastCGI, Memcached, Varnish. Trong khi Disk cache phổ biến trong các plugin cache như là WP-Rocket, WP Super cache, Swift Performance, Cache Enabler, vân vân. Xét về tốc độ RAM cache nhanh hơn hẳn Disk cache, ngay cả khi Disk cache là loại ổ cứng SSD vốn nhanh hơn HDD. Tuy nhiên vấn đề là kiểu RAM cache sẽ đòi hỏi server có RAM mạnh …

Đọc thêm

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

Bởi

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=”speed-family.jpg” width=”100%”/> Các plugin lazy loading sẽ ghi lại đoạn mã trên thành: <img data-src=”speed-family.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ã JavaScript nhỏ 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êm

Cách làm infographic đẹp mà không quá mất công [bằng các công cụ miễn phí]

Bởi

Trong bài viết này tôi sẽ chỉ cho bạn cách làm infographic, nó không hề khó như bạn nghĩ đâu, thậm chí bạn sẽ ngạc nhiên về thành phẩm của bản thân. Cứ thử xem! Trước hết chúng ta cần một định nghĩa nôm na về infographic. Nó là định dạng nội dung phối hợp giữa: Văn bản Dữ liệu Hình ảnh Icon Bố cục Màu sắc Nó là bức tranh về nội dung, và có thể giúp bạn gia tăng sức hấp dẫn của trang lên rất nhiều. 2 ưu điểm hàng đầu mà một trang có infographic tạo ra …

Đọc thêm