Cách Tối Ưu Website WordPress để đạt 100 điểm cả 4 hạng mục PageSpeed Insights

https://www.facebook.com/groups/wordpressvietnamteam/posts/1193479041352985/

Cách Tối Ưu Website WordPress để đạt 100 điểm cả 4 hạng mục PageSpeed Insights

100 điểm mobile chứ không tính Desktop nha.

Không biết chủ đề này nhiều người quan tâm không chứ mình rất thích build và tối ưu site WP. Gần đây mình có build 4 site, cho mục đích Blogging và site tư vấn BĐS và đều tối ưu tới khi đạt 100 điểm cả 4 hạng mục mới thôi.Nay chia sẻ với mọi người kinh nghiệm tối ưu để nếu ai quan tâm thì có thể tự làm được.Background:

  • Mình không phải dân kỹ thuật, không biết code web.

  • Mình sử dụng Shared Hosting có tốc độ khá chậm chứ không cần VPS hàng khủng như nhiều bài viết khác trên mạng.

CHỌN HOSTING NÀO CHO WORDPRESS ĐỂ CÓ HIỆU NĂNG TỐT?

Rất nhiều người lầm tưởng rằng phải mua Hosting/VPS tốc độ cao và đắt tiền thì mới có hiệu năng tốt.Điều này là hoàn toàn sai lầm.Mình dùng gói Turbo Hosting của AzDigi gói siêu rẻ 600k/năm vẫn đạt được từ 98 – 100 điểm như thường.Vì vậy, bạn không cần một gói cước Hosting hay VPS đắt tiền để có thể đạt điểm hiệu năng cao cho website WordPress.Ngược lại, lựa chọn một gói cước giá rẻ phù hợp để bắt đầu là lựa chọn tốt nhất.

THEME WORDPRESS CHO TỐC ĐỘ TỐT NHẤT

Hiện nay trên thị trường có khá nhiều theme mang lại hiệu năng tốt cho website WordPress như:

  • Twenty Twenty Three (theme mặc định của WordPress)

  • Astra

  • OceanWP

  • GeneratePress

  • Hello Elementor

  • Hestia

Bản thân mình dùng GeneratePress, tuy nhiên các theme còn lại cũng có thể đạt tốc độ cực đỉnh. Bạn thích trường phái nào thì theo thôi.Lý do mình chọn GeneratePress để xây dựng website là:

  • GeneratePress sử dụng block editor tương thích với Guternberg editor của WordPress

  • Combo GeneratePress + Generate mang lại tính tuỳ biến và khả năng mở rộng cực cao

  • GeneratePress là theme “sạch” nhất mà mình biết, không có nhiều tính năng thừa

  • Nếu bạn chịu khó vọc vạch CSS một chút thì GeneratePress là lựa chọn số một

  • Cộng đồng cực lớn, bất kỳ vấn đề gì bạn gặp phải cũng đã có người gặp rồi, và có giải pháp trên forum của GeneratePress

  • Phù hợp với các website phong cách tối giản – minimalism

Những điểm yếu của GeneratePress:

  • Cũng chính vì theme rất sạch nên không có nhiều tính năng tuỳ biến tích hợp sẵn

  • Hơi khó tiếp cận cho người mới không biết tí gì về CSS

Nói là hơi khó nhưng thực sự bạn chỉ cần biết một chút tiếng Anh và chịu khó Google là có thể tuỳ biến GeneratePress rồi.Một cái hay nữa là GeneratePress có bán bản quyền trọn đời.Nếu bạn dùng Elementor để built website thì ưu tiên dùng Hello Elementor, theme này cũng cực nhẹ nhàng và tinh giản. Kết hợp với Elementor Pro, bạn đã có trong tay một combo có thể build website cho mọi nhu cầu, với giao diện kéo thả đơn giản.Ngoài ra, những theme WordPress đã được anh em bạn bè mình kiểm chứng về tốc độ bao gồm Astra, OceanWP.

PLUGINS TỐI ƯU HIỆU NĂNG TỐT NHẤT CHO WORDPRESS

Khi sử dụng plugin tối ưu hiệu năng website thì cần quan tâm tới một số yếu tố chính sau:

  • Cache: Cơ bản – buộc phải có

  • Nén ảnh: Cơ bản – có thể dùng plugin hoặc nén ảnh thủ công trước khi tải lên web

  • Tối ưu file code HTML, CSS, JS: Cơ bản – thường đi kèm plugin Cache

  • Nén file code: Nâng cao – thường đi kèm plugin Cache

Cache là một trong những tác vụ quan trọng nhất khi tối ưu hiệu năng website, nó có thể giúp bạn rút ngắn thời gian tải trang tới 80%.Và với WordPress thì công việc này cực tiện lợi vì đã có plugin hỗ trợ. Bạn không cần phải viết một dòng code nào cả.Vậy Cache là gì và tại sao nó quan trọng với tốc độ tải trang?Hiểu đơn giản thì mỗi lần một người dùng truy cập website, trình duyệt của họ (như Google Chrome, Safari, FireFox, v.v.) sẽ gửi một yêu cầu tải trang tới máy chủ của bạn. Sau đó máy chủ gửi về trình duyệt các file cần thiết để dựng thành trang web, bao gồm HTML, CSS, Javascript.Cache ở phía trình duyệt (hầu hết mọi trình duyệt hiện nay đều có) giúp người dùng lưu các thông tin trên vào trình duyệt, và giúp tải website nhanh hơn từ lần thứ hai trở đi.Vậy còn lần đầu tải trang thì sao?Vì khi người dùng lần đầu vào web mà đã thấy tốc độ chậm thì nhiều khả năng họ sẽ thoát và không xem nữa. Bạn sẽ có một lượt bounce.Câu trả lời là Cache ở máy chủ.Với các plugin Cache trên WordPress, máy chủ web sẽ lưu một bản lưu tạm thời. Giúp trả về website nhanh hơn khi người dùng ghé thăm lần đầu.OK dài dòng quá. Vậy Plugin Cache nào là tốt nhất?Hiện tại có nhiều plugin khá tốt để cache WordPress như:

  • Litespeed Cache

  • WP Fastest Cache

  • Wp Rocket

  • Wp-Optimize

  • Auto Optimize

  • WP Super Cache

Việc lựa chọn Plugin nào phụ thuộc nhiều vào kiến trúc theme mà bạn sử dụng. Và cách bạn tuỳ biến cũng như xử lý xung độtBản thân mình sử dụng GeneratePress, thì WpRocket và Wp-Optimize mang lại hiệu năng tốt nhất.Vì vậy mình sẽ so sánh 2 plugin này để các bạn có thêm góc nhìn:

WP-OPTIMIZE

Theo mình thì Wp-Optimize là plugin cache miễn phí tốt nhất cho WordPress.Trang web nContent.net các bạn đang đọc hiện đang sử dụng Wp-Optimize để tối ưu hiệu năng, và mình thường đạt điểm từ 96 – 100 cho hạng mục Performance trên Google PageSpeed Insights.Một số tính năng nổi bật của Wp-Optimize:

  • Thiết lập Cache cho website

  • Tối ưu (minify) file code HTML/CSS/JS

  • Loại bỏ load JS khỏi luồng chính (defer loading Javascript)

  • Nén file code theo định dạng Gzip

  • Nén ảnh, tạo bản sao định dạng WebP sử dụng thư viện miễn phí reSmush.it

  • Tối ưu database (table & transient)

Tất cả những giá trị trên bạn nhận được hoàn toàn miễn phí. Và Wp-Optimize cũng có đội ngũ support nhiệt tình trên WordPress support forum, ngay cả khi bạn chỉ sử dụng bản miễn phí.

WPROCKET

WpRocket là một trong những plugin Cache tốt nhất cho website WordPress.Tương tự Wp-Optimize, WpRocket giúp thiết lập Cache, Minify HTML/CSS/JS, Defer JS, Nén GZIP, tối ưu Database. Ngoài ra WpRocket còn có dịch vụ CDN, giúp phân bổ trang web của bạn trên các server tại nhiều địa điểm vật lý khác nhau trên thế giới, thích hợp với các site vận hành ở nhiều nước.(Mặc dù bạn cũng có thể đăng ký CDN miễn phí với Cloudflare, nhưng nếu bạn muốn giải pháp tất cả trong một thì WpRocket là câu trả lời.)Lợi thế của WpRocket là nó tối ưu tốt hơn, và cần rất ít hiệu chỉnh. Gần như chỉ cần cài plugin và bật tối ưu lên là website của bạn đã sẵn sàng đạt hiệu năng tốt nhất.Tuy nhiên, nhược điểm của WpRocket là không có bản miễn phí. Bạn phải trả 50$ để được sử dụng WpRocket.Tệ hơn là ngay cả khi là một plugin trả phí, WpRocket cũng không có sẵn module tối ưu ảnh.Bạn cần mua thêm Imagify (plugin tối ưu ảnh của team WpRocket) hoặc sử dụng một plugin tối ưu ảnh khác.

NÉN ẢNH ĐỂ CÓ HIỆU NĂNG WORDPRESS TỐT HƠN

Sau khi đã chọn xong plugin Cache, bước tiếp theo là nén ảnh.Nguyên lí nén ảnh là làm sao để ảnh của bạn có dung lượng càng nhẹ càng tốt. Để làm được điều này thì cần 2 thứ:

  • Ảnh có kích thước vừa phải, không nên quá lớn so với màn hình trang web (thường không quá 1200px chiều ngang, với màn hình thông thường – không phải retina)

  • Định dạng ảnh nhẹ: như WebP và AVIF.

Nếu bạn đã có một website đăng nhiều bài viết và chưa tối ưu ảnh, giải pháp tiết kiệm thời gian nhất là sử dụng một plugin để tối ưu toàn bộ ảnh đã upload lên website như:

  • ShortPixel

  • EWWWWW image optimizer

  • Smush

  • reSmush.it

Ngược lại, nếu bạn xây dựng trang web mới từ đầu, hãy chú ý khi làm ảnh up lên web đúng kích thước chiều ngang, sau đó chuyển đổi thành định dạng WebP trước khi đăng lên web.Một số kích thước ảnh thông dụng là:1200px/1024px/900px/768px (chiều ngang)Nếu website bạn quan trọng tính thẩm mỹ như website nghệ thuật, thiết kế, vẽ tranh, v.v. thì sử dụng ảnh có kích thước lớn hơn. Ngược lại nếu chỉ là ảnh thumbnails cho blog thì 768px là đủ.

TỐI ƯU (MINIFY) FILE HTML/CSS/JS

Thường thì công việc tối ưu code sẽ được thực hiện bởi plugin Cache. Bạn chỉ cần bật tính năng minify HTML, CSS/JS là được.Minify HTML/CSS/JS là việc loại bỏ những đoạn mã không hoạt động, khoảng cách thừa trong file code của website.

TẢI CHẬM FILE JAVASCRIPT – LOAD JS DEFERRED

Tương tự, việc defer loading JS cũng được thực hiện bởi plugin cache.Tuy nhiên bạn cũng nên lưu ý backup trước khi bật tính năng này, bởi nó có thể gây ra gián đoạn cho các tính năng trên web.

XOÁ BỎ NHỮNG ĐOẠN CSS KHÔNG DÙNG ĐẾN

Khi xây dựng website, có rất nhiều trường hợp chúng ta viết đè code CSS. Điều này xảy ra do việc thiết kế không có hệ thống.Điển hình là việc thường xuyên sử dụng thẻ !important trong code CSS, hoặc áp dụng nhiều style đè lên nhau cho một element. Hậu quả là browser phải đọc những đoạn mã CSS mà không được sử dụng để tạo nên giao diện website.Thật may mắn là một số plugin như WpRocket có tính năng xoá bỏ những đoạn CSS không dùng đến.Tất cả những gì bạn cần làm là bật tính năng này lên trong phần Optimization.

SỬ DỤNG CDN

CDN (Content Delivery Network) là phương pháp phân phối nội dung website của bạn trên một mạng lưới server rộng khắp.Bằng cách này, website của bạn sẽ luôn đảm bảo tốc độ tải trang tốt nhất.CDN là giải pháp không thể thiếu với các website có người dùng truy cập đa quốc gia.Tuy nhiên nó cũng giúp cải thiện rất nhiều tốc độ tải trang.Bạn có thể cài đặt CDN miễn phí cho website WordPress với CloudFlare.Chi tiết mình sẽ chia sẻ trong một bài khác.

[BONUS] TOP CÁC MẸO ĐẠT 100 ĐIỂM GOOGLE PAGESPEED

Những mẹo này tới từ kinh nghiệm cá nhân, vì vậy có thể không đúng trong mọi trường hợp.Tuy nhiên mình hứa nó sẽ giúp bạn đạt ít nhất 90 điểm!Ngoài ra còn rất nhiều cách làm khác cũng có thể đạt kết quả tương tự, không nhất thiết phải theo những mẹo này.

  1. Sử dụng combo theme nhẹ + plugin cache tốt. Gợi ý: theme GeneratePress, theme Elementor, plugin Wp-Optimize, plugin WpRocket. Cách sử dụng các plugin này mình đã nói ở phần trên.

  2. Luôn tối ưu ảnh trước khi đăng lên web. Chiều rộng ảnh không nên quá 1200px, dung lượng ảnh không nên quá 100KB (lý tưởng nhất là 50KB trở xuống), ảnh định dạng WebP hoặc AVIF. Nếu lười tối ưu ảnh, bạn có thể sử dụng plugin trả phí như Imagify, Smush Pro, ShortPixel.

  3. Tối ưu SEO onpage cho các trang bạn đã tạo: Tiêu đề, các thẻ Headings, nội dung, thông số ảnh, v.v. Mình sử dụng Yoast SEO bản miễn phí để tối ưu theo một Checklist tuỳ chỉnh có sẵn (Bạn nào cần file checklist thì để lại email, mình sẽ gửi).

  4. Tối ưu giao diện: bao gồm độ tương phản của màu sắc, kích thước font chữ, khoảng cách giữa các nguyên tố trên trang, v.v.

  5. Giữ website tối giản: Nếu cần sử dụng plugin cho bất kỳ việc gì (ví dụ Form đăng ký, popup,…), hãy xem xét trong theme có chưa, nếu chưa có thì tìm những plugin đơn giản nhất, không có những tính năng thừa mà bạn không sử dụng tới. Ngoài ra, hãy thường xuyên kiểm tra và xoá các plugin không sử dụng tới.

  6. Sử dụng CDN: Cài đặt CDN miễn phí của CloudFlare để website có tốc độ tải tốt hơn.

Chỉ với những gợi ý đơn giản trên, website wordpress của bạn sẽ luôn trong tình trạng hiệu năng tốt nhất.

PreviousGet Custom Taxonomy Field Value, acf, advanced custom fields (ok)NextTạo mã bảo hành giv.edu.vn (ok)

Last updated