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

Danh mục AMP

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

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