Trì hoãn tải CSS không quan trọng

Bởi

Các file CSS là loại tài nguyên chặn hiển thị: chúng phải được tải xuống (load) và xử lý (process) trước khi trình duyệt render trang. Trang web bao gồm lượng lớn các style không cần thiết có thể mất nhiều thời gian để render. Trong bài hướng dẫn này, bạn sẽ học được cách làm thế nào để trì hoãn các CSS không quan trọng (non-critical CSS) với mục tiêu tối ưu hóa tuyến hiển thị quan trọng (critical rendering path), và cải thiện thời gian thấy nội dung đầu tiên xuất hiện (First Contentful Paint / FCP). Tải …

Đọc thêm

Loại bỏ CSS không sử dụng

Bởi

Khu vực Opportunities (cơ hội) của báo cáo Lighthouse sẽ liệt kê tất cả các stylesheets gồm CSS không sử dụng- với tiềm năng tiết kiệm được từ 2 KB trở lên. Loại bỏ CSS không sử dụng giúp giảm lượng bytes (dữ liệu) không cần thiết tiêu thụ bởi hoạt động mạng: #1. CSS không sử dụng làm chậm website như thế nào? Sử dụng thẻ link là cách thức phổ biến để thêm style vào trang web: file main.css mà trình duyệt tải xuống còn được biết đến với tên gọi stylesheet ngoài (external), bởi vì nó được …

Đọc thêm

Loại bỏ các tài nguyên chặn hiển thị trong website

Bởi

Khu vực cơ hội (opportunities) của báo cáo Lighthouse liệt kê tất cả các URL chặn hiển thị cho màn hình đầu tiên. Mục tiêu là giảm ảnh hưởng của các URL chặn hiển thị (render-blocking) này bằng cách: nội tuyến (inline) các tài nguyên quan trọng, trì hoãn (defer) các tài nguyên không quan trọng, và loại bỏ (remove) bất cứ thứ gì không sử dụng. Những URL nào bị gắn cờ là tài nguyên chặn hiển thị? Lighthouse có ba kiểu gắn cờ cho URL chặn hiển thị: scripts (JS), stylesheets (CSS) và HTML imports: Một thẻ <script> …

Đọc thêm

Hướng dẫn chèn code vào WordPress theo cách an toàn (gợi ý: sử dụng plugin)

Bởi

Bạn thường tìm thấy trên mạng các đoạn mã để chèn vào website trong khi tìm kiếm cách khắc phục rắc rối nào đó liên quan đến WordPress. Hầu hết những người lần đầu tiên gặp phải điều này không biết nên đặt mã vào chỗ nào. Câu trả lời thường gặp là “functions.php”. Nhưng đây là ý tưởng tồi. Tại sao bạn không nên sử dụng functions.php để bổ sung mã cho WordPress? Sử dụng functions.php để chèn mã vào WordPress tiềm ẩn nguy cơ vì một số lý do sau đây. Đầu tiên, giao diện website của bạn …

Đọc thêm

Loại bỏ JavaScript chặn hiển thị với Async và Defer

Bởi

Với HTML5, chúng ta có hai thuộc tính boolean mới cho thẻ <script> là: async và defer. Async cho phép thực thi các đoạn mã không đồng bộ và defer cho phép thực thi chỉ khi toàn bộ tài liệu được phân tích cú pháp (parse) xong. Đây là hai thuộc tính bắt buộc nếu bạn muốn tăng tốc website. Chúng cho phép loại bỏ JavaScript chặn hiển thị (những đoạn mã được thực thi trước khi quá trình render trang hoàn thành, do vậy nó làm chậm quá trình hiển thị). Dưới đây là ví dụ về cách sử …

Đọc thêm

AMP là gì, tại sao nó giúp website tải nhanh hơn

Bởi

AMP là công nghệ kết hợp nhiều biện pháp tối ưu hóa giúp website AMP tải nhanh gần như ngay lập tức (load instantly). Bạn sẽ thấy lý do vì sao ngay sau đây. 1. Tất cả các mã JavaScritp trên AMP được thực thi không đồng bộ (asynchronously) JavaScript là công cụ đầy sức mạnh, nó có thể sửa đổi mọi khía cạnh của trang, nhưng nó cũng là nguyên nhân gây ra hiện tượng chặn xây dựng DOM và trì hoãn render (hiển thị) trang. Để ngăn JavaScript làm trì hoãn render trang (delaying page rendering), AMP chỉ …

Đọc thêm

Native lazy-loading là gì, nó cải thiện tốc độ website như thế nào

Bởi

Trình duyệt Chrome chính thức hỗ trợ lazy load cho ảnh và iframe ở cấp độ trình duyệt! Bắt đầu từ Chrome 76, bạn có thể sử dụng thuộc tính loading để lazy load các tài nguyên mà không cần viết riêng mã lazy-loading hoặc sử dụng riêng thư viện JavaScript (chẳng hạn như lazysizes). Chúng ta sẽ đi vào chi tiết ngay sau đây. P/S: native trong cụm từ “native lazy-loading” có thể được dịch sát nghĩa là “tải lười kiểu bản địa” hoặc “lazy-loading bản địa”, tuy nhiên tôi (người dịch) thấy giữ nguyên từ gốc tiếng Anh …

Đọc thêm

Thực hành tăng tốc WordPress theo hướng rẻ tiền và dễ triển khai

Bởi

Cách đây khoảng một năm, tôi có viết chi tiết về cách tăng tốc WordPress trên trang Kiến càng. Nó là bài viết đồ sộ với rất nhiều kỹ thuật có thể khiến bạn ngộp, nhất là với người mới. Trong bài viết này, tôi hướng đến cách tiếp cận vừa đơn giản hơn, vừa ít tốn kém. Dĩ nhiên nó không hoàn hảo, nhưng chắc chắn sẽ phù hợp với nhiều người. Xem video nếu bạn muốn: OK, chúng ta bắt đầu luôn nhé. #1. Chọn hosting Yêu cầu: Không dùng shared hosting chất lượng thấp; Nếu vẫn dùng …

Đọc thêm

5 yêu cầu quan trọng nhất trong tăng tốc WordPress

Bởi

Tăng tốc WordPress là màn thi triển tổng lực bao gồm rất nhiều vấn đề cần làm. Tuy nhiên, như mọi thứ khác, nó cũng có những yêu cầu quan trọng hơn những cái khác rất nhiều. Trong bài viết này tôi sẽ nêu 5 yêu cầu căn bản nhất, làm nó tốt là bạn đã giải quyết gần như 70 – 90% những thứ liên quan đến tốc độ rồi. Ngoài ra tôi cũng nêu những khó khăn có thể phát sinh trong mỗi yêu cầu. 1. Hosting cho website Yêu cầu: Phần cứng tốt bao gồm RAM, CPU, …

Đọc thêm

Vì sao trong hầu hết trường hợp bạn KHÔNG nên sử dụng Lazy load

Bởi

Tôi rất ghét lazy load. Tại sao? Bởi vì nó làm ảnh hưởng xấu đến UX (user experience / trải nghiệm người dùng) trong khi lợi ích của nó có thể chỉ là để qua mặt (tricking) các bài kiểm tra về tốc độ trang (page speed tests) mà thôi. Nó về cơ bản là cách rẻ tiền để làm tăng điểm số tốc độ trang thông qua việc tải chỉ vài thành phần (ảnh, script) lúc ban đầu. Vấn đề là với mắt người, nó làm mọi thứ tải chậm hơn! Chắc chắn…có logic hợp lý nằm ở chỗ …

Đọc thêm