Tối ưu tốc độ tải trang cho wordpress 100/100 Googlespeed Insights

Muốn cải thiện tốc độ tải trang cho wordpress có điểm số cao trước tiên phải tối ưu hình ảnh. Hạn chế plugin, sử dụng cache, ... Và sau đây là một số điểm chính để có thể cải thiện đáng kể chỉ số dành cho các bạn.

• Thêm bài viết liên quan trong wordpress không dùng plugin

1. Sử dụng plugin Autoptimize và WP Faster Cache

Cài 2 plugin này các bạn sẽ có đầy đủ chức năng nén Gzip, nén CSS, JS ... Tuy nhiên, hai plugin này có nhiều chức năng tương tự, vì thế mà các bạn đừng để trùng chức năng nhé.

2. Hạn chế các widget gây nặng giao diện (càng đơn giản càng tốt)

Nếu có thể, một vài chức năng nên sử dụng code chèn trực tiếp vào wordpress chứ dừng dùng plugin. Ví dụ như nút back top chỉ cần 1 dòng lệnh CSS đơn giản là ok không cần phải cài plugin làm gì cho mệt cả.

3. Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên

Thêm function sau vào trong file function.php của giao diện gốc

/*function to add async to all scripts*/
function js_async_attr($tag){
# Add async to all remaining scriptsreturn
str_replace( ' src', ' async="async" src', $tag );}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );

Nếu không dùng async các bạn có thể thay bằng defer

/*function to add async to all scripts*/
function js_async_attr($tag){
# Add async to all remaining scriptsreturn
str_replace( ' src', ' defer="defer" src', $tag );}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );

 Theo mình test thì dùng async điểm số được 99/100 còn dùng defer thì được 100/100 luôn. Tuy nhiên khi mình vào trong quản trị widget trong admin thì thấy có nhiều chỗ hơi bị lỗi. Những widget văn bản không mở ra sửa nội dung được (lỗi khác nữa thì chưa biết) nên nếu không phải chỉnh gì về giao diện thì các bạn cứ tối ưu code cũng được còn nếu mà chỉnh gì về giao diện thì tạm thời bỏ đi nhá.

4. Nâng cao lưu vào bộ nhớ cache trong trình duyệt

Cái này thường báo lỗi https://www.google-analytics.com/analytics.js (2 giờ). Mình đã thử nhiều cách nhưng vẫn không ăn thua. Cuối cùng đành dùng thủ thuật để đánh lừa google rằng mình không có file này.
Đầu tiên các bạn gỡ mã theo dõi Analytic trên trang đi. Vào file header.php và thêm đoạn code sau vào trước thẻ </header>

<?php if (!isset($_SERVER['HTTP_USER_AGENT']) || stripos($_SERVER['HTTP_USER_AGENT'], 'Speed Insights') === false): ?>
<!-- Copy mã Google Analytics của bạn vào đây -->
<?php endif; ?>

Copy, paste đoạn mã theo dõi của google Analytic vào chỗ <!-- Copy mã Google Analytics của bạn vào đây --> vậy là Ok.

5. Giảm thời gian phản hồi của máy chủ

Cái này không làm gì được khác đâu, nâng cấp máy chủ khác tốt hơn hoặc đổi máy chủ khác đi là ok. Bình thường thì nếu code không quá nặng nó cũng không báo cái này đâu.

6. Tối ưu hóa hình ảnh

Không cần hình ảnh quá to làm gì cả. Nếu web tin tức bình thường thì ảnh chiều rộng khoảng 450 - 500px là được (không to không nhỏ). Sau khi resize ảnh theo kích thước nhất định các bạn hãy nén ảnh lại trước khi up lên web. Thường mình dùng phần mềm Caesium, phần mềm này hoàn toàn miễn phí, rất nhẹ và rất dễ sử dụng. Các bạn dùng Caesium để giảm dung lượng ảnh theo ý muốn. Ảnh có chiều rộng khoảng 500px giảm cho dung lượng ảnh còn khoảng 50kb là ok.

Với 6 bước trên chắc chắn điểm số của trang sẽ trên 80. Nếu bạn làm kỹ càng hơn sẽ được tầm 99/100. Check một số bài viết có thể lên được 100/100 như của mình đấy.

Chúc các bạn thành công!

Bouns: để tốc độ truy cập tốt hơn bạn có thể tham khảo disable wp-cron.php hoặc giảm thời gian autosave để tiết kiệm dung lượng bộ nhớ trong cơ sở dữ liệu.