Tối ưu JavaScript

Plugin CAOS (Complete Analytics Optimization Suite / Gói tối ưu hóa hoàn chỉnh Analytics) cho Google Analytics cho phép bạn tự host file analytics.js/gtag.js/ga.js cục bộ và giữ nó liên tục cập nhật theo thời gian thông qua Cron-schedule được tích hợp sẵn trong (built-in) WordPress. Tất cả hoàn toàn tự động! Bất cứ lúc nào bạn thực hiện phân tích tốc độ website trên các công cụ như Google Pagespeed Insights, Pingdom hoặc GT Metrix, nó sẽ nói rằng bạn cần gia tăng cache phía trình duyệt khi bạn sử dụng Google Analytics. Vì Google thiết lập thời gian …

Đọc thêm

Một trong các lý do làm cho website của bạn chậm chính là các mã của Google! Vâng, tôi đã từng sốc khi thấy Google PageSpeed Insights và GTmetrix than phiền về mã của Google Analytics. Tại sao Google Analytics lại chậm? Các đoạn mã analytics của Google được tải từ CDN cực nhanh. Vậy thì tại sao Google Analytics lại chậm? Dưới đây là một số lý do: 1. Google Tag Manager + Analytics = 73 KB Vâng, đoạn mã Google Analytics mới được nhúng vào bên trong gtag.js và tổng dung lượng của nó vào khoảng 73 KB. …

Đọc thêm

Tối ưu hóa tài nguyên của bên thứ ba là một trong những thứ khó xử lý nhất trong WordPress. Một giải pháp rõ ràng đó là loại bỏ các script/plugin không cần thiết – cái tạo ra các yêu cầu tới bên thứ ba đó. Nhưng nếu loại bỏ plugin không phải là giải pháp lúc nào cũng khả thi thì bạn nên đọc bài viết này! Các yêu cầu từ bên thứ ba là gì? Các yêu cầu đến từ bên thứ ba về cơ bản là các file như CSS, JS, ảnh, font được tải từ các …

Đọc thêm

Tác giả Frank Goossens (futtta) có nhiều plugin hỗ trợ tăng tốc WordPress, trong đó nổi tiếng nhất có lẽ là Autoptimize (có thể bạn cũng đang dùng đấy ạ!). Nhưng chỉ dùng mỗi plugin đó thì hơi phí, ông còn nhiều plugin khác rất thú vị, làm các nhiệm vụ chuyên sâu hơn nữa trong vấn đề cải thiện tốc độ trang. Và hôm nay chúng ta sẽ làm quen với một trong các plugin như vậy, nó có tên Async JavaScript, để biết cách trì hoãn và/hoặc tải không đồng bộ JS. Bản thân plugin Autoptimize tuy cũng …

Đọc thêm

Khi bạn tải JavaScript trên trang HTML, bạn cần cẩn thận để không làm ảnh hưởng xấu đến hiệu suất (tốc độ) của trang. Phụ thuộc vào việc bạn đặt đoạn mã JavaScript ở đâu và cách đặt nó trên trang HTML, sự kết hợp này sẽ ảnh hưởng đến thời gian tải trang (loading time). Một đoạn mã JavaScript thông thường sẽ được đặt như thế này: Bất cứ khi nào trình phân tích (parser) HTML tìm thấy dòng này, một yêu cầu sẽ được thực hiện để tìm nạp (fetch / tải xuống) JavaScript, và đoạn mã sẽ …

Đọc thêm

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