Mình đã đạt được 100% Google Pagespeed Insights như thế nào dù đang dùng shared hosting và không phải chuyên gia về code?

Google PageSpeed Insights là gì? (Cách hiểu đúng)

Đầu tiên chúng ta cùng nói qua một chút về Google PageSpeed Insights (PSI).

PageSpeed Insights là một công cụ của Google cung cấp các báo cáo về hiệu suất tốc độ trang web (website speed performance). Công cụ này cung cấp cả báo cáo tốc độ trang trên thiết bị di động (mobile) và máy tính để bàn (PC) cùng với thông tin chi tiết về các vấn đề khác nhau đã được phát hiện giúp ích cho việc tăng tốc và tối ưu website.

PSI cho chúng ta thấy hai loại báo cáo: Lab Data và Field Data.

Lab Data (Dữ liệu thử nghiệm/mô phỏng)

Lab data là một báo cáo được tạo bằng cách sử dụng các thiết bị mô phỏng và tốc độ đường truyền Internet. Mục đích của phương pháp sử dụng môi trường mô phỏng là để cung cấp thông tin chi tiết về các vấn đề có thể gây ra trải nghiệm người dùng tệ (chậm) hơn.

Dữ liệu thử nghiệm có thể lưu ý các yếu tố “code” (html, css, javascript…) có thể khiến trải nghiệm người dùng giảm sút và đề xuất cách khắc phục những vấn đề đó.

Field Data (Dữ liệu trường)

Dữ liệu trường (hay dữ liệu thực tế) là thông tin được thu thập thông qua việc người dùng thực tế duyệt trang web bằng Chrome và được lưu trữ trong Chrome User Experience Report (báo cáo trải nghiệm người dùng Chrome, viết tắt CrUX).

Dữ liệu thực tế rất hữu ích để hiểu hiệu suất mà khách truy cập trang web đang thực sự trải nghiệm trên trang web trong môi trường thế giới thực.

Các chỉ số này bao gồm Largest Contentful Paint (LCP), First Input Delay (FID) và Cumulative Layout Shift (CLS). Xem thêm chi tiết về các chỉ số này ở đây (tài liệu chính thức của Google).

Dữ liệu trường được báo cáo trong công cụ Google PageSpeed Insights có chu kỳ 28 ngày trước đó.

Điều này có nghĩa là nếu bạn vừa mới điều chỉnh tối ưu tốc độ website xong thì các chỉ số của Field Data cũng không thay đổi, đặc biệt là điểm Core Web Vitals, cho đến khi chu kỳ 28 ngày tiếp theo được báo cáo.

Vậy nên nếu bạn cần những đề xuất để điều chỉnh và tối ưu tốc độ, hãy nhìn vào Lab Data thay vì Field Data.

Google xác nhận PageSpeed Insights là yếu tố đánh giá thứ hạng quan trọng

Nếu bạn đang suy nghĩ có nên bắt đầu tối ưu website của mình cho điểm Google PageSpeed Insights ngay lúc này hay không thì câu trả lời là:

Làm ngay đi, trước khi mọi điều dần tồi tệ hơn!

Dù đã thông báo từ tháng 7 năm 2018 về Core Web Vitals, nhưng đến hiện tại, Google đã chính thức xác nhận, bắt đầu từ tháng 5 năm 2021, sẽ chính thức áp dụng điểm Google PageSpeed Insights vào xếp hạng SEO cho website.

Và thực sự từ trước đến nay, rất ít khi Google lên tiếng xác nhận chính thức một yếu tố để tăng thứ hạng, mọi thứ luôn luôn úp mở.

Bởi vậy đợt cập nhật này thực sự quan trọng với bất kỳ ai sở hữu website và muốn làm SEO bài bản.

Tuy nhiên đừng lo lắng, trước hết hãy cùng mình xem qua một trang web cần gì để đạt điểm 100…

Tổng quan chung về những thứ cần thiết để tối ưu website Leap Content hiện tại

1. Hosting: Azdigi gói azpro 3 (có phí)
2. Theme: GeneratePress Premium (có phí)
3. Plugin hỗ trợ quan trọng để tối ưu tốc độ: 

• Perfmatters (có phí, tắt những đoạn code không cần thiết)
• WP-Rocket (có phí, cache plugin)
• GenerateBlocks (miễn phí, thiết kế website thay page builder)
• Shortpixel (miễn phí/có phí tùy nhu cầu, tối ưu hình ảnh)
• Code Snippet (miễn phí, gắn code php)

Tiếp theo hãy đi vào 13 bước mình đã làm để tăng tốc website WordPress mà mình đã sắp xếp theo thứ tự mức độ quan trọng giảm dần (nếu bạn làm đủ hết bạn chắc chắn 100 điểm giống mình):

#1 Sử dụng hosting tốt

Đây là cách dễ nhất và cũng quan trọng nhất trong việc tăng tốc độ website. Mức độ ảnh hưởng cũng là lớn nhất.

Tại sao phải làm?

Với hosting dởm, bạn ngay lập tức có thể nhận ra bằng cảm nhận thực tế khi tải trang. Hosting chậm đồng nghĩa với việc kết quả trải nghiệm website tệ cho dù bạn có cố gắng tối ưu đến cỡ nào đi chăng nữa.

Cách làm:

Rất đơn giản. Hãy đăng ký những đơn vị hosting tốt.

Từ trước đến nay, tại Việt Nam, mình chỉ mới trải nghiệm 2 hosting: Azdigi và PAvietnam.

Mình cực kỳ hài lòng với Azdigi. Mình đã sử dụng hosting này cách đây hơn một năm và chưa có bất kỳ khó chịu nào.

Đội ngũ support cực nhanh.

Tốc độ tải web cũng cực kỳ ổn dù mình đang dùng dịch vụ shared hosting giá rẻ nhất của họ.

Mình không khuyến khích PAvietnam bởi mình thực sự đã có những trải nghiệm khá tệ với hosting này.

Quyền lựa chọn là của bạn. Hãy cứ thử, nếu không ổn thì chuyển nhà thôi 🙂

Câu hỏi thường gặp về hosting:

Mình đang sử dụng hosting này nhưng bây giờ chuyển qua hosting khác thì có ảnh hưởng gì đến website không?

Không nhé! Thời điểm vừa mới chuyển qua hosting mới thì có thể ảnh hưởng thứ hạng SEO một chút trong tầm 1 tuần đầu, sau đó mọi thứ sẽ trở lại như cũ.

Trên thực tế là nếu bạn đang sử dụng hosting dởm nhưng chuyển qua hosting nhanh và tốt hơn thì traffic của bạn sẽ tăng vì trải nghiệm người dùng tốt hơn -> Google sẽ ưu ái cho website bạn hơn.

Mọi người hay nói shared hosting là không tốt, liệu có đúng hay không?

Dĩ nhiên là không. Có khá nhiều yếu tố đánh giá ở đây.

Tùy thuộc vào website của bạn có lượng traffic bao nhiêu. Nếu traffic dưới 10.000 mỗi tháng (giống mình), có thể bạn chỉ cần một dịch vụ shared hosting ngon lành như Azdigi là đủ. 

Nếu traffic cao hơn, hãy cân nhắc đến các phương án nâng cấp lên VPS.

Nên xài hosting trong nước hay nước ngoài?

Cá nhân mình thì mình sẽ ưu tiên chọn hosting trong nước. Bởi bạn biết tình hình “đứt cáp” ở Việt Nam rồi đấy. Mỗi lần đứt cáp như vậy thì việc truy cập vào các website có hosting nước ngoài khá chậm.

Đối tượng khán giả chính của mình ở Việt Nam nên hiện tại mình ưu tiên chọn hosting trong nước.

Có nên xài dịch vụ CDN hay không?

Câu trả lời này nên được trình bày chi tiết hơn. Và may mắn là đã có người làm nó trước mình (và dĩ nhiên là làm tốt hơn mình) 🙂

Anh Nguyễn Đức Anh – chuyên gia tốc độ WordPress, chủ của trang web Speed Family, người đã giúp mình tối ưu website này – có một bài viết chi tiết về CDN mà bạn có thể tham khảo qua.

#2 Sử dụng theme nhẹ và tốt

Theme là một thành phần cực kỳ quan trọng của website. Theme nặng dĩ nhiên ảnh hưởng lớn đến tốc độ tải trang.

Tại sao phải làm?

Mức độ tác động của nó ảnh hưởng không chỉ là front-end (những thứ mà người truy cập nhìn thấy) mà còn là back-end (những thứ mà người quản lý website, admin thấy). Sử dụng một theme tệ có thể phá hỏng website của bạn dù bạn đang sử dụng hosting tốt (cơ bản là điểm không thể cao).

Cách làm:

Hãy mua theme được code đàng hoàng và được hỗ trợ tốt.

Mình đã sử dụng theme GeneratePress từ khi Leap Content ra đời và không thể không nhắc đến nó khi đề xuất cho bạn bè mình.

Nó cực kỳ nhẹ nhưng có đầy đủ mọi tính năng cho blog, thậm chí là…trang ecommerce!

Bản cài đặt cơ bản của theme GeneratePress đã đạt điểm 100/100 theo Google. Và bài kiểm tra này được mô phỏng cho thiết bị di động. Cực kỳ ấn tượng!

Gần đây có một video clip chia sẻ về việc anh chàng này đã kiểm tra tốc độ tất cả các theme tốt nhất trên thị trường. Và đoán xem: GeneratePress đứng đầu trong đánh giá đó, vượt trội các đối thủ còn lại về điểm số. Clip cực kỳ chi tiết (vậy nên nó khá dài):

Trước đây mình đã có một thời gian dài theo dõi group của GeneratePress và đọc rất.rất.rất nhiều review về theme này (bạn lên Google gõ GeneratePress review là ra). Và sau khi trở thành khách hàng + fan lớn của họ thì mình nghĩ đây là 5 lý do tại sao bạn nên chọn GeneratePress:

• Đơn giản dễ sử dụng: Khi mua bản premium của GeneratePress, bạn sẽ có mọi addon giúp mình điều chỉnh website (typography, color, layout…) mà không cần dùng code, mọi thứ đều có sẵn rất tiện. Và nếu kèm combo với GenerateBlocks, gần như bạn có thể đạt được 90% những thứ bạn có thể làm được với theme builder.
• Tương thích và tối ưu với mọi thiết bị: tương thích với các thiết bị mobile như mình đã nói ở những phần trước, thời bây giờ là bắt buộc.
• Nhẹ, load rất nhanh: top đầu những theme load nhanh nhất thị trường WordPress hiện nay.
• Dễ phát triển, nâng cấp trong tương lai, thân thiện với developer: Vấn đề mở rộng trong tương lai cũng là yếu tố cần phải nghĩ đến.
• Cộng đồng thân thiện, support nhanh, nhiệt tình: mình đã rất nhiều lần nhờ vả team support chỉnh code front-end giúp mình, những thứ mà mình muốn chỉnh trên trang web này. Và anh Tom Usborne – CEO (kiêm support, kiêm luôn lead developer) của theme này trực tiếp code cho mình luôn ?. Và nếu bạn cần, mình cũng có thể hoàn toàn hỗ trợ bạn những gì mình biết nếu bạn xài GeneratePress.

#3 Không dùng plugin dỏm

Plugin là cũng là một phần rất quan trọng trên website. Khi muốn có một tính năng nào đó trên website bạn chỉ có 2 cách:

• Code (thuê người code riêng hoặc tự code)
• Cài đặt/mua plugin

Đa phần chúng ta không thể tự code, cũng như có nhiều tiền đủ để thuê developer code riêng tính năng đó, nên phương án 2 là giải pháp tốt nhất.

Tại sao phải làm?

Máy tính bạn cài càng nhiều game, game càng nặng thì máy càng chậm. Website bạn cũng y như vậy.

Khi bạn cài đặt quá nhiều plugin kém chất lượng, chiếm nhiều dung lượng hosting và chạy nền mọi lúc trên website (các trang không xài nó vẫn tải) thì bạn phải hết sức cẩn thận.

Cách làm:

Nguyên tắc của mình là:

Số lượng plugin không quan trọng bằng chất lượng plugin!

Có nghĩa là gì?

Ví dụ bạn có 40 plugin nhưng mọi plugin đều được code tốt, tối ưu về tốc độ, dung lượng thì vẫn tốt hơn rất nhiều so với việc bạn chỉ có 2 plugin mà nặng đến mức làm website của bạn tải không nổi.

Vậy làm sao để biết một plugin được code tốt hay không?

Có 3 cách mà mình hay làm để kiểm tra plugin có được code tốt, tối ưu về tốc độ hay không:

1/ Search/hỏi trên các group Facebook các chuyên gia tốc độ 

Có hai group mà mình rất thường hay ghé qua bởi có rất nhiều tip hay về cách tối ưu tốc độ website cũng như đánh giá những plugin nào là tối ưu cho tốc độ: WP Speed Matters và WP Johnny.

Background của chủ hai group này đều là developer, họ rất giỏi:

1. Chủ của WP Speed Matters còn là người tạo ra các plugin tối ưu tốc độ nổi tiếng như Flying Press (đối thủ của WP-Rocket), Flying Pages, Flying Scripts…
2. Chủ của WP Johnny cũng rất giỏi với hơn 10 năm kinh nghiệm coder WordPress. Anh có một bài hướng dẫn cực kỳ chuyên sâu (với hơn 130+ mẹo) về cách tối ưu WordPress cũng như khóa học chuyên môn riêng của mình về chủ đề này.

2/ Tìm trên Google

Đừng lo lắng bởi chắc chắn rằng luôn có người khác làm chuột bạch thay bạn rồi.

Bất cứ khi nào bạn muốn kiểm tra thông tin về một plugin có ổn hay không, hãy thử thêm chữ “bloat”, “bloated”, “code bloat”, “review”, “slow” vào tên plugin đó.

Kết quả mà bạn tìm được có thể như thế này:

Khi có bạn thân Google hỗ trợ, việc kiểm tra thông tin chưa bao giờ dễ dàng hơn!

3/ Rà soát website giới thiệu plugin đó phần FAQ

Có một sự thật không mấy vui vẻ là phần lớn các plugin được làm ra không đặt yếu tố tối ưu về tốc độ và hiệu suất lên hàng đầu.

Đa phần là kém chất lượng.

Nhưng đó lại là tin vui cho những developer viết code plugin có quan tâm đến tốc độ và hiệu suất website. Điều này dẫn đến việc họ sẽ cực kỳ tự hào để nêu bật “sự khác biệt” này lên trên trang web của họ.

Trong phần giới thiệu FAQ (những câu hỏi thường gặp) ở trang bảng giá (hoặc trang chủ) của các plugin bạn thường sẽ đọc được điều này:

Hoặc họ sẽ so sánh chi tiết với các đối thủ trên thị trường để mọi người biết họ đã làm tốt như thế nào.

Cuối cùng một lưu ý quan trọng khác mà bạn phải nhớ

Luôn mua hàng chính hãng không mua hàng chợ đen.

Mình từng phải chật vật tìm người giúp mình gỡ mã độc (bởi vì mình không biết code, không thể tự mò tìm mã được) khi sử dụng những plugin kém chất lượng từ thị trường chợ đen. Và may mắn cho mình là mình phát hiện và xử lý sớm.

Đây là bài học nhớ đời của mình.

Rủi ro và cái giá mà bạn phải trả khi sử dụng sản phẩm không chất lượng là rất lớn nếu bạn có ý định nghiêm túc đầu tư cho website.

Bởi vậy, pleaseeeee, đừng đi vào vết xe đổ của mình!

Còn nếu không tin, bạn cứ tự thử đi rồi biết 🙂

#4 Chỉ dùng những thứ mình “thực sự” cần

Hãy dùng vừa đủ nhu cầu. Chỉ cài những plugin, theme hay bất kỳ thứ gì khác nếu bạn “THỰC SỰ XÀI” chúng hết cỡ.

Tại sao phải làm?

Giống như máy tính có bộ nhớ dài hạn là ổ cứng và bộ nhớ ngắn hạn là RAM, khi bạn xài hết những thứ này máy tính của bạn sẽ rất chậm. Điều này tương tự với website.

Cách làm:

Đầu tiên, bạn hãy lọc lại hết danh sách plugin mà bạn đã cài đặt. Cái nào cài mà không xài hoặc cài chỉ để giải quyết một tính năng rất nhỏ trên web. Suy xét xem nó có đáng hay không?

Nếu câu trả lời là không…

…Hãy xóa thẳng tay và tìm plugin mới có thể giải quyết một lúc nhiều tính năng mà bạn cần.

Tiếp theo, trong những plugin mà bạn đang xài. Hãy kiểm tra xem có những tính năng nào trong plugin đó mà mình không sử dụng hay không?

Nếu có. Hãy tắt bớt chúng.

Đây là các tính năng mình tắt bớt vì không sử dụng đến trong plugin SEO Rank Math.

Cuối cùng là icon (biểu tượng). Chỉ sử dụng và load những icon nào bạn cần. Đừng load hết toàn bộ icon từ các bộ icon như Font Awesome, Icon Moon… 

Rất nhiều theme và plugin hiện nay trên thị trường đang tự động load Font Awesome Icon. Và hệ quả là:

Tổng cộng bạn mất hơn 1.5s chỉ để load icon….!!!!!! (Agrrrr…)

Thay vì để nó autoload, bạn có thể sử dụng block heading của GenerateBlocks và load riêng bất cứ icon SVG nào mà bạn muốn từ bộ Font Awesome.

#5 Không dùng plugin page builder

Các plugin page builder như Divi, Beaver Builder, Elementor, Brizy…đều có thể là nguyên nhân dẫn đến tình trạng làm chậm tốc độ website của bạn.

Page builder ban đầu được phát triển do có rất nhiều người không có khả năng thiết kế một trang web dễ dàng mà không cần code.

Một sự thật rõ ràng: Khá khó để xây dựng một trang web WordPress cách đây 7 năm trừ khi bạn biết cách viết code (số lượng người không biết code nhưng vẫn muốn có website rất đông). 

Và đó là lý do tại sao nhiều plugin page builder đã có sự tăng trưởng chóng mặt những năm trước đây.

Tại sao phải làm?

Thời bây giờ đã khác!

2 Nhược điểm lớn nhất mà mình không thích Page builder là: nặng và autoload ở bất kỳ trang nào dù trang đó có thể không dùng đến chúng.

Thay vì bạn sử dụng page builder, bạn có thể sử dụng block Guttenberg (là page builder mặc định của WordPress): GenerateBlocks và Stackable.

Hãy nhìn qua dung lượng code cơ sở của GenerateBlocks so với Elementor, Divi và Oxygen (là page builder nhẹ nhất thị trường hiện tại).

• Nó nhỏ hơn 87% so với Oxygen.
• Nó nhỏ hơn 93% so với Elementor.
• Nó nhỏ hơn 96% so với Divi Builder.

Vì một lý do cá nhân, mình buộc phải sử dụng Elementor trên website của khách hàng. Và bất cứ khi nào không sử dụng đến nó, mình đều phải dùng Perfmatters để chặn không cho load các file của Elementor.

Cách làm:

Giải pháp tốt nhất là KHÔNG SỬ DỤNG PAGE BUILDER.

Trong tình huống ở trên, vì khách hàng của mình muốn làm slider như thế này.

Và hơn hết, họ muốn triển khai các thiết kế “fancy”, buộc lòng mình phải sử dụng Elementor.

Nhưng hệ lụy của nó sẽ là:

1. Điểm CLS sẽ tăng cao. Và dĩ nhiên Google sẽ báo lỗi Core Web Vitals.
2. Tăng số lượng DOM đáng kể (Document Object Model)

Bạn không cần phải hiểu đầy đủ về DOM, đơn giản là: chỉ cần bạn có càng nhiều lớp mã code thì càng có nhiều phần tử DOM trên một trang. DOM càng nhiều, hiệu suất website của bạn càng giảm. Trong trường hợp bạn muốn hiểu thêm về DOM, bạn có thể đọc ở đây.

Lời khuyên chân thành của mình:

Hãy sử dụng combo GeneratePress + GenerateBlocks (+WP Stackable) để xây dựng website. 

Trong trường hợp nếu bạn muốn những thiết kế fancy, hãy chọn WP Stackable, vì nó được tối ưu về tốc độ.

Tại sao?

Hơi kỹ thuật một chút: GenerateBlocks chỉ thêm một tệp CSS trên mỗi trang, tệp này chứa tất cả CSS được tạo bởi các tùy chọn của bạn. Hoàn toàn không có Javascript hoặc CSS inline – tất cả cùng ở một nơi, rất gọn gàng. Trái ngược với nó, các page builder thường tải hàng chục file khác nhau trên mỗi trang.

Gần đây GeneratePress đã ra tính năng Dynamic Block Element giúp cho combo này có thể triển khai được gần như mọi layout mà bạn cần khi làm web, tính năng này có quyền năng giống y hệt như theme builder vậy!

Hãy thử trải nghiệm và bạn sẽ không bao giờ hối hận về quyết định của mình! 🙂

#6 Sử dụng cache plugin (bộ nhớ đệm)

Khi người dùng truy cập trang web của bạn lần đầu tiên, máy chủ hosting sẽ xử lý yêu cầu, bao gồm tất cả các truy vấn cơ sở dữ liệu cần thiết để hiển thị trang. Sau đó, trang được chuyển đến trình duyệt (Chrome, Safari, Cốc Cốc,…) để hiển thị cho người dùng. Thời gian xử lý ban đầu (initial processing time) là lý do tại sao việc có một nhà cung cấp dịch vụ hosting nhanh lại rất quan trọng.

Tại sao phải làm?

Bộ nhớ đệm là lớp nằm giữa máy chủ của bạn. Bộ nhớ đệm được xây dựng và lưu trữ trong RAM hoặc đĩa ở yêu cầu ban đầu đó và các yêu cầu tiếp theo sẽ từ lớp cache đến trực tiếp người dùng thay vì truyền lại từ đầu ở máy chủ của bạn.

Điều này sẽ dẫn đến tốc độ cực nhanh (có thể nhanh hơn tới 40%) cho người dùng vì nó bỏ qua giai đoạn xử lý của máy chủ. Một lợi ích khác là nó cũng giảm tải trên máy chủ của bạn.

Nếu bộ nhớ đệm không được thiết lập chính xác, điều này sẽ gây ra thời gian tính theo byte đầu tiên (time-to-first-byte, TTFB) cao hơn và thời gian này còn được gọi là “thời gian chờ”. Trong trường hợp này có thể Google Core Web Vitals sẽ tạo ra cảnh báo “reduce initial server response time”.

Thực tế hiện nay, ngoài tính năng tạo cache, các plugin cache còn làm được rất nhiều thứ khác giúp bạn tối ưu website nhanh hơn nhiều:

1. Giảm thiểu HTML, CSS và JavaScript
2. Lazy load
3. Tối ưu cơ sở dữ liệu, xóa định kỳ để không bị nặng web
4. Preload (tải trước) những phần nặng của trang
5. Và một số tính năng khác hay ho khác…

Cách làm:

Bạn chỉ cần cài đặt plugin WP-Rocket là xong.

Bên dưới là phần thiết lập thông số WP-Rocket của website mình. Bạn có thể download thiết lập thông số của mình ở đây và import vào của bạn ở tab TOOLS.

Vì thiết lập của WP-Rocket rất đơn giản nên bạn có thể dễ dàng thử bật/tắt các tính năng mà nó đang có để xem lựa chọn nào là tốt nhất nhé.

Tab CACHE

Tick chọn: Enable caching for mobile devices, Separate cache files for mobile devices.

Cache Lifespan: Để 10 tiếng mặc định.

Tab FILE OPTIMIZATION

Tick chọn: Minify CSS Files, Minify Javascript Files, Load JavaScript deferred, Delay JavaScript execution.

Delay JavaScript execution: danh sách để mặc định như WP-Rocket đề xuất.

Tab MEDIA

Tick chọn: Enable for images, Enable for iframes and videos, Replace YouTube iframe with preview image, Add missing image dimensions

Tab PRELOAD

Tick chọn: Activate Preloading, Activate sitemap-based cache preloading, Rank Math XML sitemap (của bạn có thể khác khi bạn xài plugin SEO khác), Enable link preloading.

Prefetch DNS Requests: điền 4 dòng bên dưới

//www.googletagmanager.com
//connect.facebook.net
//google-analytics.com
//facebook.com

Tab DATABASE

Tick chọn: tất cả. 

Automatic cleanup chọn daily

Tab ADD-ONS

Bật Google Tracking và Facebook Pixel.

Một lần nữa, lưu ý giúp mình là những thiết lập của mình có thể không hoàn toàn tối ưu với bạn. Vẫn phải thử và sai nhé. Nếu bạn cần review WP-Rocket chi tiết hơn, bạn có thể đọc bài viết này.

#7 Nén và tối ưu/nén ảnh trước khi upload lên website

Một trong những thứ nặng nhất làm website tải chậm: HÌNH.

Bên dưới bạn sẽ thấy dung lượng của các file mà trang chủ của website mình:

Hình ảnh chiếm đến 76.13% của cả trang!

Tại sao phải làm?

Tưởng tượng, trang chủ của mình chỉ với vài hình cơ bản mà nó đã chiếm rất nhiều dung lượng của trang như vậy thì nếu mỗi hình được tối ưu và giảm dung lượng xuống 30-40% thì trang web của bạn sẽ tải nhanh hơn như thế nào.

Nén sẽ làm giảm dung lượng hình xuống vì nó sẽ xóa bớt data đang có trên file hình. Và điều tuyệt vời là plugin nén hình ảnh có thể vừa làm giảm dung lượng hình nhưng vẫn giữ lại được chất lượng giống y như hình gốc.

Cách làm:

Có 3 thứ bạn cần lưu ý:

1. Luôn sử dụng đúng kích thước hiển thị cần thiết của hình 
2. Luôn cố gắng giữ file hình dưới 100KB (trừ hình background kích thước lớn)
3. Sử dụng định dạng WEBP cho mọi hình ảnh có trên web 

Và mình chỉ sử dụng Photoshop và plugin Shortpixel để giúp mình thực thi 3 điều này.

Resize kích thước ảnh đúng bằng kích thước hiển thị cần thiết

Đầu tiên để biết chính xác kích thước của hình mà bạn chỉ cần vào trang có hình mà bạn muốn resize, nhấn chuột phải và chọn Inspect hoặc nhấn tổ hợp phím tắt Ctrl/Cmd+Shift+I nếu bạn xài Chrome.

Nếu màn hình bạn lúc đó đang ở chế độ mobile thì hãy chuyển sang chế độ PC.

Sau đó chọn biểu tượng select bên cạnh biểu tượng chuyển chế độ xem ở hình trên.

Cuối cùng bạn di chuột vào hình mà bạn muốn xem kích thước hiển thị trên trang thực tế của nó là bao nhiêu. Nó sẽ cho bạn biết chính xác.

Bây giờ bạn vào Photoshop và mở hình ảnh mà mình cần resize lên bằng cách vào menu File > Open (hoặc phím tắt Ctrl/Cmd+O).

Tiếp theo bạn chọn File > Export > Save For Web (hoặc tổ hợp phím tắt Alt/Option + Shift + Ctrl/Cmd + S)

Sau đó bạn điều chỉnh thông số ở hộp thoại Save for Web.

1. Loại file: Nếu hình của bạn là graphic, biểu đồ, hình minh họa illustration, hình chụp màn hình… với số lượng màu rất ít (từ 5 màu trở xuống) hãy chọn định dạng file là PNG-24. Nếu hình của bạn là hình chụp, hình có nhiều màu sắc hãy chọn định dạng JPEG.
2. Quality: bạn có thể để từ 60-80% tùy vào nhu cầu
3. Kích thước: hãy nhập chiều ngang W bằng đúng kích thước mà bạn cần (như ví dụ trên là 720px) thì chiều cao H sẽ tự nhảy. Khi đó dung lượng của file sẽ thay đổi.
4. Nhấn Save và lưu lại ở thư mục mà bạn muốn.

Vậy là các bạn đã vừa resize và nén hình ảnh lần 1 trong Photoshop xong rồi đấy.

Sử dụng Shortpixel để tối ưu hình một lần nữa và chuyển nó sang định dạng Webp

Bạn chỉ cần cài đặt miễn phí plugin Shortpixel.

Tạo một tài khoản miễn phí trên trang chủ của họ và copy mã API mà bạn có trong tài khoản miễn phí.

Sau đó, bạn nhập mã API của mình vào thiết lập thông số trong plugin trên WordPress là xong. Sau đó chúng ta bắt đầu thiết lập thông số chung.

Shortpixel có 3 loại nén hình ảnh: Loosy, Glossy và Lossless tùy thuộc vào loại hình ảnh mà bạn sử dụng trên web.

• Chọn kiểu nén Loosy nếu bạn muốn nén nhiều nhất có thể (tức là hình sẽ nhẹ nhất), lời khuyên là bạn nên sử dụng khi hình trên website của bạn đa phần là hình chụp, nhiều màu. Trong hầu hết các trường hợp thông thường sẽ sử dụng lựa chọn này.
• Chọn kiểu nén Glossy nếu bạn muốn nén vừa vừa, cân bằng giữa chất lượng hình cao và dung lượng file. Bạn nên chọn loại này nếu bạn là photographer muốn giữ lại chất lượng hình tốt so với hình gốc nhưng cũng đủ nhẹ để upload lên web.
• Chọn kiểu nén Lossless nếu bạn muốn nén ít nhất. Bạn nên chọn loại này nếu bạn sử dụng nhiều hình đồ họa vector, hình minh họa illustration, hình chụp màn hình…

Trong trường hợp của mình thì mình chọn Lossless để giữ chất lượng vì web mình đa phần là hình đồ họa graphic (và hình chụp màn hình), chúng cũng đã được nén sẵn qua một lần bằng Photoshop.

Sau đó bạn tùy chỉnh các setting còn lại và tạm thời nhấn Save Changes.

Sang tab Advanced của Shortpixel bạn có thể cài đặt setting giống như mình để sử dụng hình định dạng WEBP thay cho PNG và JPG.

Sau khi điều chỉnh xong, nhấn Save and Go to Bulk Process và chờ để Shortpixel làm nốt phần việc còn lại cho bạn 🙂

#8 Bật lazyload hình, iframe và video, nhưng chừa những hình ở phần đầu web

Lazy load (tải lười) chính là việc trì hoãn tải các hình ảnh nằm dưới màn hình đầu tiên của website khi hiển thị trên trình duyệt. Khi nào người dùng cuộn xuống đến phần content đó thì hình đó mới được tải.

Giải thích “màn hình đầu tiên” (abold of fold)

Màn hình đầu tiên (Above of fold) là phần đầu của trang web được hiển thị trên trình duyệt lần đầu tiên mà bạn không cần cuộn xuống để xem.

Ngoài việc tối ưu/nén hình ảnh thì đây là việc cũng rất quan trọng.

Tại sao phải làm?

Giả sử bạn có một bài viết blog dài với 50 hình ảnh trên đó (mình thường xuyên có những bài viết như vậy). Theo mặc định, trình duyệt sẽ tải tất cả 50 hình ảnh đó khi có ai đó truy cập trang web. Ngay cả với hình ảnh đã được tối ưu/nén, việc này có thể ngốn khá nhiều thời gian, đặc biệt là trên thiết bị di động.

Nếu bạn sử dụng lazy load, nó sẽ chỉ tải hình ảnh nằm ở màn hình đầu tiên mà người dùng nhìn thấy trong trình duyệt của họ. Số lượng hình ảnh sẽ tùy thuộc vào loại trình duyệt, phương pháp lazy load, kích thước của khung nhìn, v.v. Nhưng bất kể là gì thì nó thường sẽ cắt giảm hơn 85% yêu cầu xử lý hình ảnh của server. (tuyệt!)

Google thực sự khuyên bạn nên sử dụng lazy load. Nếu bạn không triển khai nó, bạn sẽ thấy cảnh báo “defer offscreen images.”

Cách làm:

Chỉ cần bật tính năng lazy load trên WP-Rocket mà mình có chia sẻ trong phần thiết lập tab MEDIA của WP-Rocket.

Lưu ý cả Perfmatters và WP-Rocket đều có tính năng lazy load, bạn chỉ nên xài một trong hai và tắt cái còn lại đi nhé.

WordPress bản mới cập nhật gần đây cũng có tính năng lazy load mặc định nhưng mình thấy nó xài không ổn định lắm nên tốt nhất là tắt đi.

Bằng cách nào?

Đầu tiên bạn cài đặt plugin Code Snippet. Sau đó nhấn “add new” để thêm đoạn code tắt lazy load mặc định của WordPress.

Sau đó bạn bỏ đoạn code bên dưới vào và lưu lại là xong.

/**
*  Disable WordPress default image lazy load
**/
add_filter( 'wp_lazy_loading_enabled', '__return_false' );

function rocket_lazyload_exclude_src( $src ) {
	$src[] = 'ten_file_logo_cua_ban';

	return $src;
}
add_filter( 'rocket_lazyload_excluded_src', 'rocket_lazyload_exclude_src' );

// Add skip-lazy class to featured image

add_filter( 'wp_get_attachment_image_attributes', function( $attr, $attachment ) {
    if ( $attachment->ID === get_post_thumbnail_id() ) {
        $attr['class'] .= ' skip-lazy';
    }

    return $attr;
}, 10, 2 );

#9 Preload những thứ nặng ở màn hình đầu tiên

Preload (tải trước) chính là bảo trình duyệt của bạn tải riêng một phần nào đó mà bạn muốn càng sớm càng tốt. Bạn nên sử dụng preload trên bất kỳ phần tử nào mà bạn cho là quan trọng và nặng (có thể là font, hình ảnh, file CSS…).

Tại sao phải làm?

Trong trường hợp tối ưu hóa để có điểm LCP tốt, bạn nên preload các nội dung quan trọng mà bạn cần hiển thị trong màn hình đầu tiên (above of fold).

Nếu điểm LCP của bạn cao vì đang có một hình ảnh khá nặng (hình featured image của bài viết chẳng hạn) thì bạn nên để preload hình ảnh đó để nó tải sớm hơn và nhanh hơn. Để biết thêm thông tin về preload, hãy xem thông tin này.

Trong trường hợp điểm LCP của bạn cao vì đang có khối văn bản lớn, bạn không nên preload font bởi nó sẽ làm LCP càng tệ hơn. Trong trường hợp này bạn nên sử dụng font-display: swap cho loại font đang làm điểm LCP tệ. Điều này có nghĩa là bạn đang gửi yêu cầu đến trình duyệt là: “mày hãy hiển thị nội dung văn bản trước bằng font mặc định của trình duyệt đi”.

Cách làm:

Đối với hình featured image (ảnh đại diện) của bài viết xuất hiện trên màn hình đầu tiên

Đây là trường hợp mà chính Leap Content đang gặp phải, đó là có hình featured image nặng hiển thị trên màn hình đầu tiên.

Trong trường hợp này, giải pháp cho những ai đang dùng GeneratePress là bạn chỉ cần tạo một đoạn mã mới trong plugin Code Snippet là xong:

add_action( 'wp_head', function(){
$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full'); 
echo '<link rel="preload" as="image" href="'.$featured_img_url.'"/>';
});

Đối với khối văn bản hiển thị trên màn hình đầu tiên

Trong trường hợp bạn xài Google Font trên theme GeneratePress, bạn chỉ cần thêm đoạn code này vào website bằng plugin Code Snippet:

add_filter( 'generate_google_font_display', function() {
    return 'swap';
} );

Chi tiết hơn về font cho website mình sẽ chia sẻ kỹ hơn ở bước cuối cùng.

#10 Thêm thẻ kích thước vào hình ảnh và icon svg trên trang

Hình ảnh là một thủ phạm rất phổ biến khác gây ra sự thay đổi bố cục không mong muốn, đặc biệt là hình ảnh “dimensionless” (không kích thước).

“Dimensionless” có nghĩa là gì? Đây là những hình ảnh không có thông số kỹ thuật về chiều rộng và chiều cao. 

Dẫn đến điều sẽ xảy ra khi bạn truy cập một trang web mà có các hình ảnh không kích thước là trình duyệt sẽ không dành bất kỳ dung lượng nào cho những hình ảnh đó!

Và một khi hình ảnh tải (thường là sau khi nội dung văn bản được tải vì hình ảnh có kích thước tệp lớn hơn HTML và CSS rất nhiều), chúng sẽ gây ra sự thay đổi bố cục bằng cách đẩy nội dung văn bản khỏi vị trí ban đầu.

Ví dụ bên dưới là video về sự thay đổi bố cục khi chưa tối ưu CLS:

Và đây là video khi CLS đã được tối ưu:

Bạn thấy sự khác biệt chứ?

Google sẽ báo với bạn như thế này khi chiều rộng và chiều cao các phần tử trên trang bị thiếu:

Tại sao phải làm?

Kích thước các phần tử trên trang ảnh hưởng rất lớn đến điểm CLS (độ dịch chuyển bố cục). Nếu bạn không muốn Google Search Console liên tục báo lỗi CLS, bạn buộc phải chỉnh nó.

Cách làm:

May mắn là, nếu bạn sử dụng GeneratePress, tất cả đều được tối ưu tự động. Bạn không cần phải lo lắng gì cả.

Trong trường hợp theme bạn đang sử dụng không có tính năng này, bạn có thể tick tùy chọn này trong tab MEDIA của WP-Rocket.

Đối với những ai sử dụng logo SVG trong theme GeneratePress, bạn có thể nhập trực tiếp kích thước của logo vào phần Site Identity.

Hoặc nếu kỹ hơn nữa, bạn có thể dùng công cụ inspect của Chrome để xem kích thước chính xác mà logo của bạn hiển thị. Sau đó thêm đoạn code sau vào Code Snippet:

add_filter( 'generate_mobile_header_logo_output', function( $output ) {
    if ( ! function_exists( 'generate_menu_plus_get_defaults' ) ) {
        return $output;
    }

    $settings = wp_parse_args(
        get_option( 'generate_menu_plus_settings', array() ),
        generate_menu_plus_get_defaults()
    );

    return sprintf(
        '<div class="site-logo mobile-header-logo">
            <a href="%1$s" title="%2$s" rel="home">
                <img src="%3$s" width="250" height="41" alt="%4$s" />
            </a>
        </div>',
        esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
        esc_url( apply_filters( 'generate_mobile_header_logo', $settings['mobile_header_logo'] ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
    );
} );

Nhớ thay lại kích thước logo của bạn trong phần width và height ở đoạn code trên nhé.

#11 Tắt hoặc không load JavaScript không cần thiết

Trong website, có khá nhiều phần tử chạy nền có thể làm ảnh hưởng hiệu suất website dù cho chúng ta không xài tới chúng trong đa số trường hợp.

Bạn sẽ nhận được cảnh báo từ Google “remove unused JavaScript”. Điều này có nghĩa là bạn đang có những file thừa không sử dụng nhưng vẫn được tải trên trang mà bạn đang muốn tối ưu.

Tại sao phải làm?

Bạn không nhìn thấy bằng mắt thường được là cái gì đang được tải và làm chậm website của bạn. Và sự thật là chúng nặng hơn những gì bạn nghĩ.

Nếu bạn làm theo tất cả các bước trước mình chia sẻ về việc sử dụng một theme WordPress nhẹ và thay thế page builder bằng GenerateBlocks, thì vấn đề “JavaScript không được sử dụng” sẽ không phải là một vấn đề lớn.

Cách làm:

Đầu tiên, hãy cài đặt plugin Perfmatters.

Tính năng Script Manager của Perfmatters giúp bạn dễ dàng tắt script, query và inline CSS/JS trên bất kỳ post/page nào bạn muốn chỉ bằng một cú click!

Mình nghĩ đây là tính năng hay nhất của Perfmatters. Bạn sẽ ngỡ ngàng khi thấy có hàng đống plugin chạy nền rất nặng mà bạn không muốn chúng xuất hiện ở những nơi bạn cần hiệu suất cao.

Ngoài ra Perfmatters còn có các tính năng khác cũng giúp bạn tối ưu hiệu suất website rất tốt như:

• Tắt XML-RPC
• Ẩn phiên bản WordPress
• Xóa Query Strings
• Xóa JQuery
• …

Tuy nhiên cũng giống như WP-Rocket, hãy thử bật tắt xem website của bạn có vấn đề gì không nhé. Bạn có thể download settings của mình ở đây.

#12 Hạn chế tối đa hoặc delay tải những đoạn code (JavaScript) của bên thứ ba

Thời buổi hiện nay không thể nào bạn chỉ xây website là xong, bởi khách hàng của bạn có thể đang ở trên các nền tảng mạng xã hội khác như Youtube, Facebook, Tiktok…

Làm sao để “remarketing” họ, để họ gặp lại thương hiệu chúng ta nhiều lần trước khi quyết định mua hàng? Gắn code bên thứ ba.

Bạn muốn xài chat Messenger (hoặc một loại chat bot khác) để nói chuyện với khách hàng trực tiếp trên website? Gắn code bên thứ ba.

Bạn muốn phân tích số liệu traffic, xem demographic người dùng trên website, biết người dùng click vào đâu, từ trang nào đi qua trang nào khi đến website của bạn? Gắn code bên thứ ba.

Vâng! Gắn code lên web là một phần không thể thiếu khi làm marketing.

Tại sao phải làm?

Đã là bên thứ ba, nghĩa là chúng ta không kiểm soát được thời gian tải của chúng là nhanh hay chậm, bởi nó phụ thuộc rất lớn vào server hosting của dịch vụ đó.

Và tin mình đi, những thứ như Google Analytics, Facebook Pixel… chúng load rất chậm! Bên dưới là biểu đồ tốc độ tải của Facebook Pixel theo Gtmetrix.

Chúng ta có thể thấy bốn yêu cầu (request), từ hai tên miền bên ngoài và 142KB được thêm vào.

Yêu cầu đầu tiên thậm chí trước dòng “First Paint” – dòng màu xanh lá, nghĩa là nó sẽ kéo dài thời gian người dùng nhìn thấy một trang trắng, bắt người dùng chờ lâu hơn để được thấy nội dung trang web của bạn.

Rõ ràng khi gắn code pixel vào header sẽ ảnh hưởng rất nhiều đến tốc độ tải trang.

Mục tiêu của chúng ta khi cải thiện tốc độ website là giảm số lượng yêu cầu (numbers of requests), giảm thiểu kích thước trang và loại bỏ việc gọi tên miền bên ngoài càng nhiều càng tốt. Điều này cho phép các thành phần quan trọng nhất của trang sẽ được tải đầu tiên!

Vấn đề là chúng ta không thể bỏ chúng được!

Bởi vậy nên giải pháp là chúng ta sẽ delay (trì hoãn) thời gian tải của chúng để những phần quan trọng khác của website được tải trước.

Cách làm:

WP Rocket đã có sẵn tính năng này cho bạn trong tab FILE OPTIMIZATION. Bạn chỉ cần tick chọn và giữ nguyên danh sách delay của WP Rocket là đủ. (trong thiết lập thông số của WP Rocket ở phần trước mình cũng đã cho bạn thấy rồi)

Nếu bạn có gắn các code khác ngoài danh sách này, bạn chỉ cần nhờ support của WP Rocket giúp bạn tìm và thêm dòng tên JavaScript đang làm chậm website vào danh sách trên.

#13 Sử dụng font system hoặc local host font

Theo The HTTP Archive, kể từ tháng 2 năm 2021, font chiếm trung bình 6% tổng trọng lượng trang của trang web trên thiết bị di động. 

Mặc dù nghe có vẻ nhỏ nhưng nó vẫn ảnh hưởng đến cách trang web của bạn tải. 

Thực sự tùy từng trường hợp, có những khía cạnh liên quan đến hiệu suất mà bạn không thể khắc phục trên trang web của mình, vì vậy bạn nên tối ưu hóa được nhiều bao nhiêu hay bấy nhiêu ở những chỗ bạn có thể.

Tại sao phải làm?

Vấn đề là đa số các website không sử dụng một font, mà là nhiều font ở nhiều độ dày/đậm khác nhau cùng với các định dạng font khác nhau! Và điều này sẽ làm chậm đáng kể website của bạn.

Hiện nay, có rất nhiều định dạng font như OTF, TTF, EOT, SVG,…để phục vụ cho nhiều loại trình duyệt khác nhau. Tuy nhiên, trong đa số trường hợp, sự thật là bạn chỉ cần định dạng WOFF và WOFF2.

Giả sử bạn quyết định sử dụng Google Font hoặc Adobe Font (trước đây là Type Kit), có nghĩa là bạn đang sử dụng tài nguyên của bên thứ 3 và buộc phải yêu cầu tài nguyên của họ để tải (quay lại sai lầm trong bước trước hạn chế việc gọi tên miền từ bên ngoài).

Cách làm:

Mình có 2 lựa chọn cho bạn trong tình huống này:

Sử dụng System Font Stack (mình đang áp dụng nó vào Leap Content)

Đây là cách nhanh nhất.

Các thương hiệu lớn như GitHub, Bootstrap, Medium, Ghost và thậm chí cả bảng điều khiển quản trị WordPress (dashboard) của bạn đều sử dụng system font stack. Có nghĩa là bạn đang sử dụng loại font của trình duyệt mà bạn đang sử dụng.

Một vài năm trước, điều này sẽ không được tốt lắm nhưng với các hệ điều hành mới cập nhật ngày nay, tất cả đều được cài đặt sẵn font đẹp.

Khi sử dụng system font stack, bạn sẽ không cần tải bất kỳ font nào cả!

Lựa chọn là ở bạn. Bạn muốn một cái gì đó nhìn sang chảnh, hay bạn muốn mọi thứ “nhanh như chớp”? 

Nếu bạn đang sử dụng một theme như GeneratePress, nó có tùy chọn chỉ với một cú click chuột để sử dụng system font stack.

Bạn có thể đọc thêm hướng dẫn chuyên sâu hơn của Brian Jackson (giám đốc marketing của hosting Kinsta và người đứng sau plugin Perfmatters) về cách chuyển sang system font stack.

Self-host/Local host (tự lưu trữ) Google Font (hoặc font tùy chỉnh khác)

Google Fonts là nguồn miễn phí, cực kỳ phổ biến và được sử dụng bởi hơn 42 triệu trang web trên toàn thế giới. Trước đây, chúng có một lợi thế về hiệu suất, đó là các font có thể đã được lưu vào bộ nhớ cache từ CDN của Google trong trình duyệt của người dùng. Tuy nhiên, những ngày đó đã không còn nữa.

Kể từ Chrome 86 (tháng 10 năm 2020), họ đã chuyển sang phân vùng bộ nhớ cache HTTP. Điều này có nghĩa là Google Fonts sẽ được tải xuống lại cho mọi trang web, bất kể font đang được lưu vào bộ nhớ đệm (cache) trong trình duyệt của người dùng. Safari đã làm điều này trong nhiều năm và Firefox đã triển khai điều này trong phiên bản 85 (tháng 1 năm 2021).

Giải pháp ở đây là tự lưu trữ Google Fonts trên máy chủ hoặc CDN của bạn.

Nếu bạn đang sử dụng (hoặc dự định sẽ sử dụng) GeneratePress, bạn có thể đọc bài hướng dẫn này của họ, hướng dẫn chi tiết cách local host Google Font như thế nào. Áp dụng cho các font khác cũng giống như vậy.

Tổng chi phí để tối ưu, tăng tốc độ load website WordPress

Tổng kết lại để có một website với điểm Google Pagespeed Insights ngon lành thì chi phí mà mình đã bỏ ra bao gồm:

Tuy nhiên bạn hoàn toàn có thể sử dụng các tùy chọn MIỄN PHÍ khác:

• Asset CleanUp: thay cho Perfmatters
• Litespeed Cache: thay cho WP-Rocket khi hosting của bạn sử dụng công nghệ Litespeed (Azdigi đang sử dụng Litespeed)

(nhược điểm là các thông số và tính năng phức tạp hơn nhiều so với hai lựa chọn có phí)

Thì lúc này số tiền mà bạn bỏ ra để tối ưu website chỉ còn 2.369.000 đ/năm!!!

Dĩ nhiên nếu bạn cần những tính năng khác cho website, bạn sẽ cần thêm plugin, thêm chi phí. Nhưng với một blog bình thường (hoặc làm web affiliate) thì như vậy là quá đủ 🙂

Tới lượt bạn tối ưu tốc độ website được 100 điểm Google PageSpeed Insights!

Đây là tất cả các bước (kèm lưu ý) mà mình đã áp dụng cho website của mình để đạt 100 điểm Google PageSpeed Insights.

Bạn thấy đấy, những thứ mình chia sẻ ở trên không có gì quá phức tạp và cao siêu. Bạn hoàn toàn có thể đạt được điểm tối ưu giống mình.

Nếu có bất kỳ câu hỏi nào về cách tăng tốc website WordPress thì đừng ngần ngại để lại comment bên dưới cho mình nhé 🙂

Mình sẽ nỗ lực hết sức để trả lời!