24 cách để cải thiện tốc độ WordPress (Hướng dẫn hoàn chỉnh)

Bạn có một trang web WordPress chậm?

Vì các chỉ số web cốt lõi sẽ là một yếu tố xếp hạng vào tháng 6 năm 2021, nên việc tối ưu hóa tốc độ WordPress chắc chắn đã thay đổi. Nhiều trang web có điểm số cao đang nhận được điểm C và điểm D trong báo cáo của họ.

Mục tiêu của hướng dẫn này là sửa các đề xuất trong GTmetrix và PSI (PageSpeed ​​Insights) đồng thời cải thiện thời gian tải, đây là yếu tố quan trọng nhất và là điều bạn nên tập trung vào.

Trang web chậm thường là do cơ sở hạ tầng của bạn: lưu trữ, chủ đề, trình tạo trang và plugin có một số tác động lớn nhất đến cả điểm số và thời gian tải. Bắt đầu với những người đầu tiên. Khi nghi ngờ, hãy xem hướng dẫn tối ưu hóa WordPress để xem các yếu tố quan trọng nhất.

1. Công cụ kiểm tra

Điều gì đã thay đổi trong GTmetrix?

Trước đây, điểm số không phải lúc nào cũng tương quan với thời gian tải. Bạn có thể có TTFB chậm và các tệp CSS / JS nặng nhưng vẫn có điểm số tuyệt vời. Đó không phải là trường hợp nữa. Lighthouse / PSI thực hiện công việc tốt hơn trong việc tương quan điểm số với thời gian tải và giờ đây GTmetrix cũng vậy. Trình tạo trang và lưu trữ có thể ảnh hưởng đáng kể nhất đến cả thời gian tải và điểm số trong GTmetrix / PSI. Đó là lý do tại sao bạn thấy nhiều người trong các Nhóm Facebook (bao gồm cả tôi) vội vàng loại bỏ trình tạo trang của họ.

Các chỉ số web cốt lõi sẽ là các yếu tố xếp hạng vào tháng 5 năm 2021 (nói cách khác, cải thiện báo cáo PSI của bạn). Giảm TTFB và thời gian tải của các vật phẩm cụ thể trong GTmetrix Waterfall là những nơi tốt để bắt đầu.

• Google PageSpeed ​​Insights – công cụ chính mà bạn nên tối ưu hóa cho (đó là Google), đặc biệt là bây giờ chúng có các số liệu chính xác hơn thực sự đo thời gian tải (ví dụ: LCP). Để kiểm tra thời gian tải trên thiết bị di động, hãy sử dụng Think With Google sử dụng kết nối 4G (PSI sử dụng 3G). Đây là một phần lý do tại sao điểm của bạn trên thiết bị di động có thể thấp hơn trên máy tính để bàn.
• Các chỉ số web cốt lõi của Google Search Console – báo cáo các chỉ số web cốt lõi chỉ hiển thị các chỉ số cốt lõi (ví dụ: LCP) cho toàn bộ trang web WordPress của bạn nhưng không đưa ra các đề xuất cụ thể.
• GTmetrix – sử dụng biểu đồ Waterfall để xác định CSS, JS, phông chữ, hình ảnh và tên miền bên thứ ba cụ thể cần được tối ưu hóa. Nếu không, các khuyến nghị tương tự từ PSI.
• KeyCDN Performance Test – tuyệt vời để đo lường TTFB và thời gian tra cứu DNS ở 10 địa điểm thử nghiệm toàn cầu. Chỉ báo chắc chắn cho dù máy chủ lưu trữ WordPress hoặc DNS của bạn có chậm hay không.
• Query Monitor – xác định các plugin chậm, truy vấn và những thứ khác làm chậm trang web của bạn.

2. Lưu trữ

Thật khó để đánh bại Vultr High Frequency trên Cloudways .

Vultr HF có thể là gói lưu trữ phổ biến nhất trong Nhóm Facebook Hosting WordPress (một nơi tuyệt vời để nhận phản hồi khách quan từ những người không phải là chi nhánh). Tôi sử dụng nó và bạn có thể nhấp qua blog của tôi để xem nó tải nhanh như thế nào. Trong hầu hết các bài kiểm tra GTmetrix, TTFB của tôi là < 150ms .

SiteGround từng là # 1 trong các cuộc thăm dò của Facebook cho đến khi họ xuống dốc và báo cáo của Backlinko cho thấy họ có TTFB chậm. Kể từ đó, có một sự thay đổi lớn trong số người chuyển sang Cloudways DigitalOcean , và bây giờ là Vultr HF (kể từ khi nó chỉ được phát hành vào ngày 20/8/2020). Sự thay đổi này có thể được nhìn thấy trong các cuộc thăm dò gần đây trên Facebook, kết quả di chuyển và chủ đề nếu bạn dành thời gian để xem xét.

Đã có rất nhiều thay đổi trong ngành công nghiệp lưu trữ. Đó là lý do tại sao tôi khuyến khích bạn tham gia Nhóm Facebook ( WP Speed ​​Matters cũng tốt) và tránh xa các đơn vị liên kết đề xuất SiteGround, Bluehost , GoDaddy và các máy chủ chất lượng thấp khác. Tôi là một chi nhánh, nhưng tôi cố gắng giới thiệu dịch vụ lưu trữ đám mây nhanh, chắc chắn. Không ai có thời gian cho việc chia sẻ lưu trữ khi cố gắng vượt qua các quan trọng web cốt lõi.

Không phải nói lưu trữ là tất cả, nhưng đó là yếu tố tốc độ số 1.

Một chút lời khuyên:

• Kiểm tra Đối với Lưu trữ Chậm – TTFB và thời gian phản hồi của máy chủ có thể được đo trong Kiểm tra Hiệu suất của PSI, GTmetrix và KeyCDN . Google đề xuất TTFB là <200ms.
• Chọn trung tâm dữ liệu gần – TTFB và thời gian tra cứu DNS nhanh hơn khi bạn chọn trung tâm dữ liệu gần với khách truy cập của mình. Điều đặc biệt quan trọng nếu khách truy cập của bạn là người địa phương.
• Bộ nhớ đệm cấp máy chủ – hầu hết các máy chủ lưu trữ đám mây cung cấp bộ nhớ đệm cấp độ máy chủ (Redis, memcached, Varnish) trong khi hầu hết các máy chủ chia sẻ thì không. Đó là lý do tại sao các plugin bộ nhớ đệm như LiteSpeed ​​và SG Optimizer cung cấp bộ nhớ đệm nhanh hơn so với bộ nhớ đệm dựa trên tệp được thực hiện bởi hầu hết các plugin bộ nhớ đệm.
• Cấu hình máy chủ – sử dụng phiên bản PHP, MariaDB và MySQL mới nhất trong tài khoản lưu trữ của bạn. Sử dụng giới hạn bộ nhớ 256MB. WP Johnny có các đề xuất cho các chỉnh sửa máy chủ như max_execution_time (30-60 giây), max_input_time (60 giây) và max_input_vars (1.000).

3. Trình tạo trang

Các nhà xây dựng trang đã bị nghiền nát trong bản cập nhật GTmetrix mới.

Chúng thêm các phần tử CSS, JavaScript và DOM bổ sung ảnh hưởng đến nhiều mục trong PSI. Xem mã nguồn của bạn và xem có bao nhiêu lần Elementor hoặc Divi được đề cập (đối với tôi, đó là hơn 2.000 ). Thực hiện tìm kiếm trên Google và xem các bài kiểm tra tốc độ (đây là bài kiểm tra về Gutenberg vs Elementor ). Giống như nhiều người khác trong Nhóm Facebook, tôi đang xóa Elementor khỏi trang web của mình.

• Divi, Elementor và Brizy là những trình tạo trang chậm.
• Oxygen, GeneratePress và Kadence là những lựa chọn thay thế có trọng lượng nhẹ.
• Gutenberg, Genesis và chủ đề Hello của Elementor là những lựa chọn thay thế khác.
• Nếu sử dụng Astra Starter Sites, hãy sử dụng mẫu được tích hợp sẵn trong Gutenberg (không phải Elementor).
• WP Johnny cung cấp dịch vụ gỡ bỏ trình tạo trang 
• Thêm nhiều plugin / addon của trình tạo trang sẽ làm chậm WordPress hơn nữa.
• Sử dụng Asset CleanUp hoặc Perfmatters để dỡ các tài sản không sử dụng được tạo bởi những người tạo trang.
• Plugin Divi’s Rocket là tầm thường và bạn tốt hơn nên sử dụng WP Rocket hoặc LiteSpeed.
• Elementor có các tính năng thử nghiệm trong Cài đặt bao gồm tối ưu hóa tốc độ (Đầu ra DOM được tối ưu hóa và Tải nội dung được cải thiện) mà bạn nên dùng thử.
• Divi tích hợp sẵn tính năng thu nhỏ và kết hợp cài đặt tệp CSS / JavaScript. Những thứ này có thể hoạt động tốt hơn (miễn là khả năng tương thích) so với plugin bộ nhớ cache, nhưng hãy kiểm tra tác động của chúng trong các công cụ tốc độ.

4. Các plugin

Các plugin nổi tiếng là làm chậm WordPress.

Đó là lý do tại sao điều quan trọng là phải nghiên cứu (trong Nhóm Facebook và đọc các bài đánh giá trong kho lưu trữ WordPress) trước khi quyết định một plugin. Kiểm tra tác động của nó trong Query Monitor hoặc PSI.

Một số người cho rằng thiết kế web cần nhiều plugin. Mặc dù điều này đôi khi đúng, nhưng nó không áp dụng cho các trang web WordPress đơn giản. Bạn có thể dễ dàng chạy 20 plugin nhẹ mà hầu như không ảnh hưởng đến tốc độ. Bạn phải thực hiện nghiên cứu của mình, tối thiểu và viết những thứ khó nếu bạn có thể. Chỉ vì bạn đã quen với một số plugin hoặc trình tạo trang không có nghĩa là đó là bước đi đúng đắn.

• Tránh các plugin chậm phổ biến (bên dưới).
• Tìm các plugin chậm bằng Trình theo dõi truy vấn .
• Tránh các plugin sử dụng jQuery khi có thể.
• Sử dụng các plugin có thiết kế mô-đun và tắt các tính năng không sử dụng.
• Tránh sử dụng các plugin cho SSL, chuyển hướng và những thứ bạn có thể làm theo cách thủ công.
• Tránh các plugin chạy các quy trình nền nặng hoặc thêm mã của bên thứ ba.
• Những thứ khó viết mã (tiêu đề, menu, v.v.) để tránh plugin – hãy thuê một nhà phát triển nếu cần.

Hầu hết các plugin WordPress chậm bao gồm chia sẻ xã hội, thống kê (phân tích), thanh trượt, danh mục đầu tư, trình tạo trang, lịch, trò chuyện, biểu mẫu liên hệ, bài đăng liên quan, sơ đồ trang web, WPML, WooCommerce và các plugin chạy quét liên tục hoặc các quy trình nền nặng.

1. Thêm điều này
2. Giám sát gian lận nhấp chuột AdSense
3. Lịch sự kiện tất cả trong một
4. Backup Buddy
5. Thợ xây hải ly
6. Sơ đồ trang web Google XML tốt hơn cho WordPress
7. Trình kiểm tra liên kết bị hỏng
8. Liên hệ liên tục cho WordPress
9. Mẫu liên hệ 7
10. Bài đăng liên quan theo ngữ cảnh
11. Liên kết tự động Digi
12. Hệ thống nhận xét Disqus
13. Divi Builder
14. Elementor

Các lựa chọn thay thế plugin nhẹ

• Sao lưu – UpdraftPlus.
• SEO – Rank Math hoặc SEOPress.
• Slide – Soliloquy hoặc MetaSlider.
• SSL – bạn không cần plugin.
• Chuyển hướng – bạn không cần plugin.
• Gallery – Gutenberg gallery hoặc Meow gallery.
• Analytics – Google Analytics và Google Search Console (không có plugin).
• Bảo mật – Cloudflare Firewall, Two-Factor, Limit Login Attempts, Blackhole.
• Chia sẻ MXH – Grow By Mediavine (plugin chia sẻ MXH nhanh nhất trong thử nghiệm của WP Rocket ).
• Bình luận – bình luận gốc hoặc wpDiscuz với cài đặt được tối ưu hóa và độ trễ JavaScript.

5. Bộ nhớ đệm

Bạn sử dụng plugin bộ nhớ đệm nào và cách bạn định cấu hình cài đặt có tác động lớn.

WP Rocket và LiteSpeed là các tiêu chuẩn vàng (hoặc SG Optimizer nếu sử dụng SiteGround). Lý do WP Rocket được đánh giá cao như vậy là vì nó đi kèm với nhiều tính năng tốc độ hơn hầu hết các plugin bộ nhớ cache khác (dẫn đến tối ưu hóa tốc độ hơn nhưng ít plugin cần thiết hơn trên trang web của bạn).

Nếu không, bạn sẽ cần phải tìm ra các tính năng mà plugin bộ nhớ cache của bạn không đi kèm và cài đặt các plugin bổ sung để có được những tối ưu hóa đó. Trong trường hợp này, đây là các plugin tôi khuyên dùng:

• Dọn dẹp cơ sở dữ liệu – WP-Optimize
• Tối ưu hóa CSS / JS – Autoptimize
• Trì hoãn thực thi JavaScript – Flying Scripts
• Lưu trữ Google Analytics cục bộ – Flying Analytics
• Tích hợp URL CDN – BunnyCDN / CDN Enabler
• Heartbeat control – Heartbeat Control / mã thủ công
• Tải hình ảnh / video chậm – Optimole / WP YouTube Lyte
• Tải trước liên kết / trang tức thì – Perfmatters hoặc Flying Pages
• Tìm nạp trước / tải trước – Perfmatters, Pre* Party hoặc mã thủ công
• Lưu trữ Facebook Pixel cục bộ – không có plugin nào làm điều này mà tôi biết
• Hiển thị phông chữ: hoán đổi – Swap Google Fonts Display / mã thủ công

Các loại bộ nhớ đệm

Có 6 loại bộ nhớ đệm . Các plugin cache thường chỉ hỗ trợ 2 loại (full page cache + cache của trình duyệt). Các loại khác thường có thể được kích hoạt trong tài khoản lưu trữ đám mây. Tận dụng các loại bộ nhớ đệm khác nhau mà máy chủ của bạn cung cấp – các plugin bộ đệm chỉ là một phần của bức tranh. Tôi chắc chắn sẽ kích hoạt Redis trong tài khoản lưu trữ của bạn và sử dụng plugin Redis Object Cache . Trong SiteGround SG Optimizer, bạn thường nên kích hoạt bộ đệm tĩnh, bộ đệm động và bộ nhớ đệm.

• Opcode cache – thường được thực hiện bởi máy chủ lưu trữ.
• Toàn trang – thường được thực hiện bởi plugin bộ nhớ cache.
• Bộ nhớ cache của trình duyệt – thường được thực hiện bởi plugin bộ nhớ cache.
• Bộ tăng tốc HTTP – kích hoạt trong máy chủ của bạn (ví dụ: Varnish / FastCGI).
• Bộ nhớ cache đối tượng – tương tự như Redis / memcached (Tôi thực sự khuyên bạn nên sử dụng Redis).
• CDN – được thực hiện thông qua CDN hoặc thêm quy tắc trang lưu trữ mọi thứ trong Cloudflare.

6. CDN

Cloudflare phù hợp với hầu hết các trang web, nhưng nếu bạn nghiêm túc về tốc độ, hãy sử dụng BunnyCDN .

Nó thường là CDN được ưa chuộng nhất trong các nhóm Facebook (bao gồm cả chủ đề này ). BunnyCDN thường nhanh hơn Cloudflare, RocketCDN (StackPath) và hầu hết các CDN. Đó là bởi vì BunnyCDN là CDN chỉ đẩy, có nghĩa là khách truy cập sẽ không gặp phải tình trạng kéo chậm. WP Johnny cho biết RocketCDN thực sự có thể làm tăng TTFB và Cloudflare có thể có ảnh hưởng tiêu cực. Giống như các plugin bộ nhớ cache, CDN phản ứng khác nhau đối với các trang web khác nhau – tôi sẽ kiểm tra Cloudflare / BunnyCDN.

• Nếu khách chỉ là người địa phương, bạn không cần CDN.
• Thiết lập Cloudflare yêu cầu thay đổi máy chủ định danh.
• Hãy cẩn thận với Rocket Loader (nó có thể phá vỡ trang web của bạn).
• Thêm quy tắc trang Cloudflare , đặc biệt là quy tắc trang lưu trữ mọi thứ và bảo vệ khu vực quản trị WP. Để lưu vào bộ đệm mọi thứ trên các trang động, hãy sử dụng WP Cloudflare Super Page Cache .
• Nếu sử dụng Cloudflare, hãy chắc chắn sử dụng APO của họ với giá $ 5 / tháng.
• Nếu sử dụng LiteSpeed, QUIC.cloud CDN của họ là một lựa chọn chắc chắn.
• Đặt thời hạn bộ nhớ cache của trình duyệt thành tần suất bạn đăng nội dung mới (ví dụ: 10 ngày).
• Nếu sử dụng Cloudflare + WP Rocket, hãy định cấu hình tab Cloudflare để tương thích.
• Sử dụng BunnyCDN nếu bạn nghiêm túc về tốc độ (thiết lập bằng plugin BunnyCDN ).
• CDN có thể cải thiện điểm số PSI và giảm tải nhiều băng thông cho trung tâm dữ liệu của họ.

7. Phông chữ

Tối ưu hóa phông chữ không đơn giản như đánh dấu một tùy chọn trong plugin bộ nhớ cache của bạn.

GTmetrix cho bạn biết các phông chữ của bạn mất bao lâu để tải, số lượng yêu cầu của chúng và việc chúng được phân phát cục bộ hay từ một nguồn bên ngoài. Dưới đây là một số cách để tối ưu hóa chúng.

• Tránh .ttf và thay vào đó sử dụng woff sẽ nhanh hơn.
• Kiểm tra GTmetrix Waterfall> Phông chữ để xem tệp phông chữ / nguồn / thời gian tải.
• Tối thiểu với số lượng phông chữ (họ phông chữ, biến thể, ký tự, biểu tượng).
• Lưu trữ phông chữ cục bộ bằng OMGF hoặc Transfonter (tránh sử dụng font.googleapis.com hoặc fontawesome.com và phân phát chúng từ URL CDN của bạn (https://x7r6b9v3.rocketcdn.me).
• Nếu bạn cung cấp phông chữ từ các nguồn bên ngoài (ví dụ: font.googleapis.com), hãy tìm nạp trước chúng.
• Thêm hiển thị phông chữ để “đảm bảo văn bản vẫn hiển thị trong quá trình tải webfont” trong PSI.
• Tải trước phông chữ (sao chép tệp phông chữ từ GTmetrix và thêm vào WP Rocket hoặc Perfmatters).
• Kết hợp các yêu cầu Phông chữ của Google (thường được thực hiện thông qua plugin bộ nhớ cache của bạn) – xem tại đây .
• Tránh các plugin thêm phông chữ bổ sung và cung cấp phông chữ từ chủ đề của bạn, không phải với các plugin.

8. Mã bên thứ ba

Mã của bên thứ ba là một mục PSI và là bất kỳ thứ gì trên trang web của bạn phải lấy yêu cầu từ các trang web bên ngoài .

Chúng bao gồm Google Fonts, Analytics, Maps, AdSense, Trình quản lý thẻ, video được nhúng, Gravatars, hộp like mạng xã hội, Facebook Pixel và thậm chí cả nút like từ plugin chia sẻ xã hội của bạn. Một số có thể được tối ưu hóa để không ảnh hưởng đến PSI trong khi mã của bên thứ ba khác khó hơn.

• Google Fonts – lưu trữ cục bộ thay vì phân phối chúng từ //fonts.gstatic.com.
• Google Maps – chụp ảnh bản đồ và liên kết nó với chỉ đường lái xe. Nếu bạn phải sử dụng bản đồ, chỉ sử dụng nó trên các trang liên hệ + địa phương và iframe tải chậm của bạn.
• Google Analytics – lưu trữ cục bộ bằng cách sử dụng WP Rocket hoặc Flying Analytics. Nếu sử dụng Perfmatters, hãy sử dụng mã theo dõi nhỏ hơn (tối thiểu, nội tuyến tối thiểu hoặc analytics.js) và tắt các tính năng hiển thị để ngăn yêu cầu HTTP thứ hai đến Doubleclick.
• Google AdSense – tải quảng cáo chậm và trì hoãn nó là JavaScript bằng cách sử dụng WP Rocket hoặc Flying Scripts. AdSense có thể là kẻ giết người của GTmetrix (hãy thử tiếp thị liên kết).
• Trình quản lý thẻ của Google – trì hoãn việc sử dụng WP Rocket hoặc Flying Scripts và dọn dẹp thẻ. Tránh các thẻ mã cứng trong tiêu đề. Nếu không, bạn có thể làm được rất ít.
• Facebook Pixel – lưu trữ nó cục bộ bằng cách sử dụng WP Rocket là cách duy nhất tôi biết.
• YouTube – tải video chậm, thay thế iframe YouTube bằng hình ảnh xem trước và trì hoãn JavaScript. Nếu bạn đang sử dụng Elementor, Adam từ WPCrafter đã đăng video YouTube để nhúng video mà không cần tạo yêu cầu HTTP tới YouTube.
• Social Media – sử dụng Grow by Mediavine , plugin chia sẻ mạng xã hội nhanh nhất trong thử nghiệm của WP Rocket, tránh các widget trên mạng xã hội (ví dụ như hộp Facebook Like).
• Gravatars – trì hoãn Gravatars và sử dụng hình ảnh Gravatar cục bộ với WP User Avatar (các nhận xét trên blog của tôi hiển thị ví dụ về hình ảnh Gravatar tùy chỉnh mà tôi sử dụng).
• WPdiscuz – tinh chỉnh cài đặt để bắt đầu tải AJAX sau trang , tắt các chức năng AJAX gốc của WordPress và tắt tải phông chữ CSS lib tuyệt vời . Sau khi trì hoãn nhận xét và sử dụng Ảnh đại diện người dùng WP, nhận xét của bạn sẽ tải rất nhanh. Nhận xét WordPress gốc cũng nhanh (tôi chỉ thích giao diện của WPdiscuz).

Hãy nhớ tìm nạp trước các miền của bên thứ ba và trì hoãn JavaScript không quan trọng trong bước 14.

9. Hình ảnh

Có nhiều cách để tối ưu hóa hình ảnh.

Nhiều trong số này được hiển thị trong GTmetrix và PSI (hình ảnh có kích thước phù hợp, hoãn hình ảnh ngoài màn hình, mã hóa hình ảnh hiệu quả và WebP). Tôi cũng đã liệt kê một số khuyến nghị bổ sung. Hãy ghi nhớ – hầu hết các công cụ kiểm tra tốc độ chỉ hiển thị cho bạn những hình ảnh chưa được tối ưu hóa cho trang duy nhất mà bạn kiểm tra.

• Kích thước hình ảnh phù hợp – thay đổi kích thước hình ảnh lớn thành nhỏ hơn. Chiều rộng blog của tôi là 680px vì vậy tôi cắt / thay đổi kích thước hình ảnh blog đầy đủ băng thông thành kích thước đó. Một số plugin tìm hình ảnh quá khổ và tự động thay đổi kích thước nhưng tốt nhất bạn nên sử dụng đúng kích thước trước khi tải chúng lên.
• Hình ảnh tải chậm – được tích hợp sẵn trong WordPress 5.5 và nhiều plugin tốc độ cũng thực hiện điều này (nếu được bật trong một plugin tốc độ khác, chúng sẽ vô hiệu hóa tải chậm gốc). Bạn nên loại trừ các hình ảnh trong màn hình đầu tiên khỏi tải chậm vì chúng rất quan trọng và thực sự sẽ xuất hiện chậm hơn đối với khách truy cập khi tải chậm. Điều này được gọi là “trì hoãn hình ảnh ngoài màn hình” trong PSI.
• WebP – sử dụng plugin WebP (hoặc plugin tối ưu hóa hình ảnh của bạn nếu được hỗ trợ) để chuyển đổi hình ảnh sang WebP được cho là nhanh hơn và có chất lượng tốt hơn JPEG / PNG. Bật WebP Cache nếu bạn sử dụng WP Rocket. Đây được gọi là “phân phát hình ảnh ở định dạng thế hệ tiếp theo” trong PSI.
• Nén hình ảnh không mất dữ liệu – ShortPixel, Smush, TinyPNG và Photoshop là những phương pháp phổ biến. Mức độ nén thực sự phụ thuộc vào những gì bạn sẵn sàng đánh đổi giữa chất lượng và tốc độ (Lighthouse sử dụng 85%). Đây được gọi là “mã hóa hình ảnh hiệu quả” trong PSI.
• Kết hợp hình ảnh bằng cách sử dụng CSS Sprite – một CSS sprite kết hợp nhiều hình ảnh nhỏ thành 1 hình ảnh duy nhất để tạo ra 1 yêu cầu thay vì nhiều (sử dụng trình tạo CSS sprite ). Tôi đã sử dụng CSS sprite cho các biểu tượng hình tròn trên trang chủ cũ của mình . Bạn cũng có thể làm điều này khi hiển thị nhiều biểu trưng (nếu bạn có phần “khách hàng” hoặc “được giới thiệu trên”). Bạn chỉ nên làm điều này với những hình ảnh nhỏ, trang trí vì nó có thể gây hại cho SEO nếu bạn làm điều đó với những hình ảnh thông thường.
• Cung cấp hình ảnh thông qua URL CDN của bạn – URL CDN (ví dụ: https://x7r6b9v3.rocketcdn.me) có thể được sử dụng để cung cấp hình ảnh. Cloudflare không sử dụng URL CDN. Nếu bạn đang sử dụng URL CDN nhưng hình ảnh không được cung cấp, hãy bật tùy chọn Ghi lại CDN nếu sử dụng Perfmatters.
• Cung cấp hình ảnh với kích thước chính xác – thêm thuộc tính chiều rộng / chiều cao vào HTML của hình ảnh. WP Rocket có một tùy chọn để thêm kích thước hình ảnh bị thiếu sẽ khắc phục điều này.
• Hình ảnh thích ứng – cung cấp hình ảnh nhỏ hơn cho thiết bị di động bằng cách sử dụng plugin hình ảnh thích ứng .
• Tắt Liên kết nóng – ngăn mọi người nhúng hình ảnh của bạn vào trang web của họ, điều này làm tiêu tốn băng thông và khiến bạn tốn tiền. Bạn có thể ngăn chặn điều này bằng tính năng bảo vệ liên kết nóng của Cloudflare, cài đặt nhúng vô hiệu hóa của WP Rocket hoặc một số máy chủ có tùy chọn tắt liên kết nóng. Thêm biểu trưng của bạn vào hình ảnh cũng có thể không khuyến khích mọi người liên kết nóng.
• Tách dữ liệu EXIF ​​khỏi hình ảnh – loại bỏ dữ liệu vô ích khỏi hình ảnh như ngày, giờ, vị trí và cài đặt máy ảnh khi chụp ảnh. Được thực hiện bởi hầu hết các plugin tối ưu hóa hình ảnh.
• Hạ cấp chất lượng cho kết nối chậm hơn – các plugin như Optimole cho phép bạn cung cấp hình ảnh chất lượng thấp hơn cho người dùng có kết nối chậm (hạ cấp cho kích thước tệp nhỏ hơn tới 40%).

10. Video

Nếu bạn nhúng video, chúng thường là phần tử nặng nhất trên một trang. Chỉ cần tải chúng một cách lười biếng và sử dụng hình ảnh xem trước, bạn có thể dễ dàng cắt bỏ một vài giây kể từ thời gian tải của mỗi video.

• Tải video chậm – thông qua plugin bộ nhớ cache, Perfmatters hoặc thử WP YouTube Lyte.
• Thay iframe YouTube bằng hình ảnh xem trước – iframe (là phần tử nặng nhất của video) chỉ được tải sau khi khách truy cập của bạn thực sự nhấp vào nút phát.
• Preconnect To YouTube – thiết lập kết nối sớm với YouTube và là một mục PSI.
• Tải xuống các tệp phương tiện cho các dịch vụ của bên thứ ba – nếu bạn đang sử dụng video tự lưu trữ, hãy sử dụng dịch vụ của bên thứ ba như WP Offload Media để giảm tải chúng lên Amazon S3, DigitalOcean Spaces hoặc Google Cloud Storage và phân phát nó với Amazon CloudFront hoặc CDN khác.

11. Cơ sở dữ liệu

Làm sạch sâu cơ sở dữ liệu của bạn.

Nhiều plugin bộ nhớ cache có tính năng tự động dọn dẹp cơ sở dữ liệu (của tôi được đặt thành 1 tuần trong WP Rocket), nhưng chúng không xóa các bảng bị bỏ lại bởi các plugin được tạo khi bạn xóa plugin. Đối với kiểu dọn dẹp này, tôi khuyên bạn nên cài đặt WP Optimize một lúc. Cài đặt nó rồi xóa các bảng khỏi các plugin cũ được đánh dấu là “chưa được cài đặt” nếu bạn không có kế hoạch sử dụng lại plugin.

• Lên lịch dọn dẹp cơ sở dữ liệu đang diễn ra (tôi sử dụng WP Rocket).
• Đã xóa các bảng không sử dụng (trong WP-Optimize) sau khi bạn xóa plugin.

12. Dỡ tài sản

Một số thứ tải trên toàn bộ trang web của bạn ngay cả khi chúng không được sử dụng. Dỡ tải nội dung có nghĩa là vô hiệu hóa các plugin, CSS và JavaScript trên các trang / bài đăng mà chúng không cần tải.

Giảm CSS và Javascript là các mục PSI và thường được thực hiện với Perfmatters hoặc Asset CleanUp . Tuy nhiên, phiên bản chuyên nghiệp của Asset CleanUp cho phép bạn dỡ bỏ CSS tùy chỉnh, Perfmatters thì không.

Sau khi bạn quyết định một plugin, hãy chỉnh sửa trang và xem trình quản lý tập lệnh để xem nội dung nào đang tải trên trang. Bạn sẽ cần phải tìm hiểu xem nội dung của mình đang được tải ở đâu và loại nội dung nào bạn có thể vô hiệu hóa chúng (URL hiện tại, trang, bài đăng, Regex hoặc các tùy chọn “ở mọi nơi trừ”). Kiểm tra cẩn thận hoặc thiết lập một trang web theo giai đoạn vì việc vô hiệu hóa nội dung có thể phá vỡ trang web của bạn.

Ví dụ:

• Tắt plugin thanh trượt trên các trang không sử dụng thanh trượt.
• Vô hiệu hóa plugin đoạn mã chi tiết trên các trang không sử dụng đoạn mã chi tiết.
• Vô hiệu hóa plugin biểu mẫu liên hệ trên các trang không có biểu mẫu liên hệ.
• Tắt các tập lệnh và kiểu WooCommerce trên các trang không phải Thương mại điện tử.
• Tắt plugin quản lý liên kết liên kết trên các trang không sử dụng liên kết liên kết.
• Tắt plugin chia sẻ xã hội trên tất cả các trang (vì nó thường dành cho các bài đăng trên blog).
• Tắt chức năng không sử dụng trong trình tạo trang của bạn

13. Loại bỏ Bloat

Loại bỏ bloat có thể làm giảm CPU và giải phóng tài nguyên máy chủ.

Có thể loại bỏ một số khối phồng bằng Perfmatters (kiểm tra trang tính năng của chúng ), Asset CleanUp hoặc bằng mã thủ công. Bạn cũng nên đi qua cài đặt chủ đề / plugin / lưu trữ của mình để tắt tất cả các chức năng bạn không sử dụng. Điều này bao gồm các quy trình nền có thể tiêu thụ CPU cao.

• Tắt heartbeat.
• Tránh các chủ đề cồng kềnh.
• Xóa các tệp phương tiện không sử dụng.
• Xóa các chủ đề / plugin không sử dụng.
• Tắt theo dõi việc sử dụng trong plugin.
• Vô hiệu hóa các mô-đun không sử dụng trong plugin.
• Thay thế WP cron bằng cron job thực.
• Hạn chế sửa đổi bài đăng (5-10 là đủ).
• Làm sạch sâu cơ sở dữ liệu của bạn với WP-Optimize.
• Bảo vệ blog / biểu mẫu của bạn khỏi spam bình luận.
• Loại bỏ jQuery Migrate nếu các plugin của bạn không sử dụng nó.
• Tắt các mục không sử dụng khác trong Perfmatters hoặc Asset CleanUp.
• Tắt các tính năng không sử dụng trong tài khoản lưu trữ của bạn: email, DNS, FTP, v.v.

14. Trì hoãn JavaScript

Trì hoãn JavaScript đã được giới thiệu với WP Rocket và cũng có thể được thực hiện bằng Flying Scripts (WP Rocket trì hoãn cho đến khi người dùng tương tác trong khi Flying Scripts đặt khoảng thời gian chờ tính bằng giây).

Bạn chỉ nên trì hoãn JavaScript tải dưới màn hình đầu tiên. WP Rocket có một danh sách JavaScript an toàn mặc định để trì hoãn , nhưng bạn có thể thêm nhiều hơn nữa. Tôi đã trì hoãn cả wpDiscuz và Gravatars và bây giờ blog của tôi tải nhanh hơn nhiều, cộng với phần nhận xét không gây ra lỗi GTmetrix.

Xem báo cáo PSI của bạn và xem các mục sau: giảm thời gian thực thi JavaScript, giảm JavaScript không sử dụng và giảm tác động của mã bên thứ ba. Nếu bạn thấy bất kỳ JavaScript không quan trọng nào có thể bị trì hoãn, hãy kiểm tra nó. Ví dụ: có thể trì hoãn AdSense bằng cách thêm adsbygoogle.js.

15. Tìm nạp trước, Tải trước, Kết nối trước

Những điều này yêu cầu trình duyệt tải xuống tài nguyên trước thời hạn.

Bạn có thể đã thấy những điều này trong WP Rocket, Perfmatters, Pre * Party Resource Hints hoặc bạn có thể thêm mã theo cách thủ công. Tải trước và kết nối trước cũng là các khuyến nghị của PSI. Bạn có thể thêm gợi ý tài nguyên bằng cách sử dụng các giá trị sau: phông chữ, tập lệnh, kiểu, hình ảnh, phương tiện và tài liệu.

• Tìm nạp trước – giúp trình duyệt dự đoán các yêu cầu từ các trang web của bên thứ ba. Đầu tiên, hãy xem các miền của bên thứ ba đang tải trên trang web của bạn trong PSI hoặc GTmetrix. Tiếp theo, lấy URL của chúng hoặc xem các miền phổ biến này để tìm nạp trước . Cuối cùng, hãy tìm nạp trước chúng bằng một trong 3 plugin đã đề cập.
• Tải trước – thường được sử dụng cho các liên kết và phông chữ. Tải trước liên kết tải xuống một trang khi người dùng di chuột qua một liên kết để khi họ nhấp vào liên kết đó, trang sẽ tải xuống gần như ngay lập tức (có thể được thực hiện trong WP Rocket, Perfmatters hoặc Flying Pages). Tải trước phông chữ giúp trình duyệt khám phá phông chữ trong tệp CSS. Để thực hiện việc này, hãy sao chép các URL phông chữ của bạn từ tab Thác nước GTmetrix và dán chúng vào phần tải trước phông chữ ở một trong 3 plugin được đề cập.
• Preconnect – thiết lập các kết nối sớm đến các nguồn gốc quan trọng của bên thứ ba. Phổ biến với CDN và phông chữ bên ngoài như font.gstatic.com nhưng không thể thực hiện được trong WP Rocket (sử dụng một trong các plugin khác). Sử dụng một cách tiết kiệm và kiểm tra kết quả trong các công cụ tốc độ sau khi được triển khai.

16. Chuyển hướng

Nếu bạn thấy “tránh chuyển hướng trang đích” trong PSI, có thể là do bạn đang liên kết đến các URL không chính xác hoặc sử dụng plugin tạo chuyển hướng. Đây là một trường hợp cụ thể, nhưng đây là một vài mẹo.

• Tránh các plugin đã tạo chuyển hướng.
• Sử dụng dấu gạch chéo sau đúng cách: https://example.com/blog/
• Liên kết đến đúng HTTPS và WWW hoặc phiên bản không phải WWW.
• Không sử dụng plugin chuyển hướng, việc tạo chúng bằng .htaccess sẽ nhanh hơn.
• Sử dụng Thay thế Tìm kiếm Tốt hơn để sửa lỗi chuyển hướng trên toàn bộ trang web của bạn.

17. Chặn Bad Bots

Bạn sẽ không bao giờ biết liệu chương trình thư rác có tấn công trang web của mình hay không trừ khi bạn kiểm tra báo cáo lưu lượng truy cập trực tiếp Wordfence của mình. Bằng cách chặn chúng, bạn sẽ tiết kiệm tài nguyên và ít gây căng thẳng hơn cho máy chủ của mình.

Bước 1 : Cài đặt Wordfence (nó có thể tự tiêu tốn CPU nên hãy cân nhắc xóa nó khi bạn hoàn tất).

Bước 2 : Xem báo cáo lưu lượng truy cập trực tiếp Wordfence của bạn trong vài phút để xem những bot nào đang tấn công trang web của bạn trong thời gian thực. Googlebot (và có thể là những thứ khác) rõ ràng là OK, nhưng bạn có thể nhận thấy một vài cái spam. Google tên máy chủ của các bot này để xem liệu người khác có đang báo cáo chúng là spam hay không.

Bước 3 : Chặn bot (bạn có một vài tùy chọn): Chặn Wordfence, quy tắc tường lửa Cloudflare (chặn tối đa 5), Blackhole For Bad Bots , Jeff Starr’s 7G Firewall hoặc Cloudways bot Protection .

Đăng nhập vào Bảng điều khiển Cloudflare của bạn và đi tới Tường lửa → Quy tắc tường lửa → Tạo Quy tắc tường lửa. Sao chép tên máy chủ của bot xấu (từ Wordfence) và thêm nó vào đây trong trường “Giá trị”. Vì bạn có thể tạo 5 quy tắc, bạn sẽ lặp lại bước này cho 5 bot xấu nhất của mình từ Wordfence.

• Trường = Tên máy chủ
• Toán tử = Chứa
• Giá trị = tên máy chủ của bot xấu mà bạn tìm thấy trong Wordfence

Bước 4 : Truy cập “Nhật ký chặn” của bạn trong Cloudflare và xem các chương trình thư rác của bạn bị chặn.

Di chuyển trang đăng nhập WP của bạn bằng Perfmatters hoặc WPS Ẩn Đăng nhập vì trang đăng nhập wp mặc định của bạn thu hút các bot spam. Nếu bạn đang sử dụng Cloudflare hoặc một dịch vụ bảo mật khác, hãy bật WAF.

18. Di động

Làm cách nào để bạn cải thiện điểm số trên thiết bị di động trong PSI?

Hầu hết các tối ưu hóa cho máy tính để bàn đều chuyển sang thiết bị di động, vì vậy bạn nên bắt đầu với những tối ưu hóa đó trước. Thứ hai, Google sử dụng kết nối 3G chậm hơn để thử nghiệm trên thiết bị di động, có nghĩa là kết quả trên thiết bị di động hầu như luôn kém hơn so với máy tính để bàn. Tuy nhiên, bạn có thể làm một số việc dành riêng cho thiết bị di động.

• Đảm bảo các chủ đề / plugin đáp ứng.
• Thay thế thanh trượt bằng hình ảnh (dù sao thì thanh trượt cũng là dĩ vãng).
• Các menu mã trong CSS thay vì JavaScript và tránh menu bánh hamburger.
• Cung cấp hình ảnh nhỏ hơn cho thiết bị di động bằng cách sử dụng plugin hình ảnh thích ứng.
• Bật bộ nhớ đệm trên thiết bị di động nếu plugin bộ nhớ cache của bạn hỗ trợ nó (hoặc có được một plugin hỗ trợ).
• Hạ cấp chất lượng hình ảnh cho các kết nối chậm hơn (bạn có thể làm điều này trong Optimole).
• Hãy xem xét AMP (Tôi không phải là người hâm mộ) – Chuyển đổi của Kinsta đã giảm 59% khi sử dụng AMP.
• Kiểm tra báo cáo quan trọng web của bạn trong Search Console (có một phần dành riêng cho thiết bị di động).

19. WooCommerce

Các trang web WooCommerce có thể yêu cầu nhiều tập lệnh, kiểu, phân đoạn giỏ hàng và plugin hơn.

Bên cạnh việc tối ưu hóa tốc độ chung, bạn có thể thực hiện một số việc bổ sung. Cho đến nay, điều quan trọng nhất là lưu trữ vững chắc. Cloudways và Gridpane là những gì tôi đề xuất cho WooCommerce.

• Sử dụng plugin Tắt WooCommerce Bloat .
• Không bao giờ chạy WooCommerce trên lưu trữ được chia sẻ (công thức cho thảm họa).
• Xóa các Chuyển tiếp WooCommerce trong cài đặt Trạng thái WooCommerce.
• Vô hiệu hóa các đoạn giỏ hàng nếu bạn coi trọng tốc độ hơn các đoạn (trong Perfmatters).
• Tắt các tập lệnh / kiểu WooCommerce trên các trang không phải Thương mại điện tử (trong Perfmatters).

20. Cập nhật phần mềm

Luôn cập nhật phần mềm của bạn. WooCommerce và một số trình tạo trang (Elementor và Divi) có phần trạng thái hệ thống hiển thị chi tiết phần mềm của bạn. Ngoài ra, hãy cập nhật thông tin khi máy chủ của bạn phát hành bản cập nhật (phiên bản PHP, Redis, v.v.). Bạn có thể cần thực hiện các cập nhật này theo cách thủ công.

• Phiên bản PHP
• Phiên bản MySQL + MariaDB
• Lõi WordPress, chủ đề, plugin, khuôn khổ

21. Khác

Một số trong số này không nằm trong các phần khác, vì vậy tôi liệt kê chúng ở đây:

• Bảo vệ Trang Đăng nhập   – nếu sử dụng Cloudflare, hãy thêm quy tắc trang cho trang đăng nhập của bạn, đặt mức bảo mật thành cao, sau đó tắt các tính năng hiệu suất Cloudflare bên trong quản trị viên.
• Sử dụng Brotli – nó nhanh hơn nhiều so với GZIP (WP Rocket chỉ hỗ trợ GZIP).
• Ghi lại CDN – nếu bạn đang sử dụng CDN nhưng hình ảnh không được cung cấp từ chúng, hãy thử bật tùy chọn ghi lại CDN trong cài đặt Perfmatters (không áp dụng cho Cloudflare).
• Trì hoãn JavaScript không quan trọng – sử dụng plugin bộ nhớ cache hoặc Autoptimize để hoãn JavaScript không quan trọng (tệp JS tải xuống dưới màn hình đầu tiên). Đừng trì hoãn nội dung trong màn hình đầu tiên.
• Don’t Enable Yoast Indexables – tuyên bố tăng tốc trang web nhưng tôi sẽ không bật nó (nhiều lời phàn nàn trên blog của họ). Và thẳng thắn mà nói, bạn nên sử dụng Rank Math hoặc SEOPress để thay thế.
• Để kết hợp CSS / JS và sử dụng CSS quan trọng, hoặc không – WP Johnny nói rằng các trang web nhỏ hơn nên kết hợp, các trang web lớn hơn thường không nên. Bạn cũng nên kiểm tra CSS quan trọng để xem liệu nó có tác động tích cực đến thời gian tải của bạn hay không vì đôi khi nó có thể có tác động tiêu cực.

22. Plugin tốc độ

Dưới đây là danh sách hơn 35 plugin tốc độ WordPress với các mô tả ngắn gọn.

Tất nhiên, bạn không cần tất cả những thứ này. Những thứ tôi khuyên dùng nhất là Oxygen Builder, WP Rocket hoặc LiteSpeed, Perfmatters, ShortPixel, WP-Optimize, Query Monitor và Autoptimize.

• Oxygen Builder – trình tạo chủ đề nhẹ, tôi khuyên bạn nên thiết kế trang web của mình.
• WP Rocket – plugin bộ nhớ đệm số 1 trong hầu hết các cuộc thăm dò trên Facebook và những gì hầu hết mọi người đang sử dụng.
• LiteSpeed ​​Cache – plugin bộ nhớ cache bạn nên sử dụng nếu đang sử dụng máy chủ LiteSpeed.
• Perfmatters – dỡ bỏ nội dung, loại bỏ cồng kềnh, tối ưu hóa WooCommerce, các tính năng khác.
• Asset CleanUp – tương tự như Perfmatters (miễn phí nhưng hạn chế hơn và UI / UX không tuyệt vời).
• Tự động tối ưu hóa – kiểm soát tối ưu hóa CSS / JavaScript tốt hơn hầu hết các plugin bộ nhớ cache.
• OMGF | Lưu trữ Google Phông chữ cục bộ – khắc phục các sự cố tận dụng bộ nhớ đệm của trình duyệt cho GA.
• ShortPixel – plugin tối ưu hóa hình ảnh phổ biến với tùy chọn chuyển đổi hình ảnh sang WebP.
• Hình ảnh Thích ứng ShortPixel – cung cấp hình ảnh được cắt thông minh (nhỏ hơn) cho các thiết bị di động.
• Optimole – tải hình ảnh lười biếng mà không cần jQuery và phân phát chúng thông qua CDN của Cloudfront.
• WP-Optimize – dọn dẹp cơ sở dữ liệu bao gồm tùy chọn xóa các bảng do các plugin cũ để lại.
• Giám sát truy vấn – tìm các nút thắt cổ chai làm chậm trang web của bạn bao gồm cả các plugin chậm nhất của bạn.
• Hoán đổi Hiển thị Phông chữ của Google – đảm bảo văn bản vẫn hiển thị trong khi tải webfont (mục PSI).
• Tập lệnh bay – tương tự như trì hoãn thực thi JavaScript trong WP Rocket (làm chậm JavaScript).
• Flying Pages – tương tự như các liên kết tải trước trong WP Rocket (tải trước các trang khi di chuột).
• Swift Performance – nhấn hoặc bỏ lỡ plugin bộ nhớ cache với bộ nhớ đệm tích cực (đánh giá tầm thường).
• SG Optimizer – sử dụng nếu bạn đang sử dụng SiteGround, nhưng tôi không khuyên bạn nên sử dụng dịch vụ lưu trữ của SiteGround.
• Breeze By Cloudways – không sử dụng nếu bạn đang sử dụng Cloudways (WP Rocket tốt hơn nhiều).
• WP Fastest Cache – plugin bộ nhớ đệm miễn phí nhưng hầu như không ra mắt các tính năng mới (lỗi thời).
• Nitropack – plugin bộ nhớ cache được thiết kế đặc biệt để sửa các mục PSI, không nhất thiết phải có thời gian tải.
• ToolKit For Elementor – được thiết kế đặc biệt để tăng tốc Elementor (các bài đánh giá tuyệt vời cũng vậy).
• WP YouTube Lyte – tải video lười biếng và sử dụng hình ảnh xem trước (nếu không sử dụng WP Rocket).
• Kiểm soát nhịp tim – vô hiệu hóa / giới hạn API nhịp tim của WordPress (nếu không sử dụng WP Rocket).
• Pre * Party Resource Hints – thêm tìm nạp trước, tải trước, kết nối trước (nếu không sử dụng WP Rocket).
• Tắt WooCommerce Bloat – xóa WooCommerce bloat để tăng tốc độ quản trị.
• BunnyCDN – được sử dụng để thiết lập BunnyCDN (CDN tôi khuyên dùng thay vì RocketCDN).
• Blackhole For Bad Bots – ngăn chặn các chương trình xấu tấn công trang web của bạn và tiêu thụ tài nguyên.
• WP Offload Media – giảm tải phương tiện sang các dịch vụ / CDN khác nhau nếu sử dụng video tự lưu trữ.
• WP Cloudflare Super Page Cache – sử dụng quy tắc trang cache mọi thứ trên các trang web động.
• WP Crontrol – quản lý các công việc WP cron của bạn và lịch trình của chúng có thể làm giảm CPU.
• Disqus Conditional Load – tải chậm Nhận xét Disqus sử dụng OnScroll, OnClick, Normal.
• WP User Avatar – tải lên hình ảnh Gravatar tùy chỉnh, được tối ưu hóa có thể được lưu trữ cục bộ.
• AMP Đối với WP – thêm các trang di động được tăng tốc với các tùy chọn thiết kế (tôi không đề xuất AMP).
• Widget Disable – vô hiệu hóa các widget sidebar / dashboard (tăng tốc thời gian tải ban đầu của quản trị viên).
• Hiển thị Phiên bản PHP – hiển thị phiên bản PHP nào bạn đang chạy nếu bạn không biết cách thực hiện.
• GTmetrix For WordPress – theo dõi điểm GTmetrix, quét theo lịch và nhận thông báo.
• Kiểm tra hiệu suất lưu trữ WP – ghi lại hiệu suất lưu trữ khá chính xác.

23. Mục PageSpeed ​​Insights

Dưới đây là các mục được tìm thấy trong Thông tin chi tiết về tốc độ trang và các giải pháp phổ biến. Đây là ảnh chụp màn hình từ Think With Google cũng tóm tắt chúng nhưng tôi đã cố gắng làm cho của tôi cụ thể cho WordPress.

• Tránh kích thước DOM quá lớn – tránh trình tạo trang chậm, tải chậm các mục dưới màn hình đầu tiên (hình ảnh, video, iframe, AdSense), mã cố định đầu trang / chân trang / menu của bạn và phân trang các nhận xét. Nếu sử dụng Elementor, hãy bật “Đầu ra DOM được tối ưu hóa”.
• Tránh xâu chuỗi các yêu cầu quan trọng – hoãn / không đồng bộ JavaScript dưới màn hình đầu tiên, kết hợp CSS và JS thành các tệp duy nhất, tận dụng kết nối trước và tải trước.
• Tránh document.write () – thường được liên kết với một năm động trong khu vực chân trang. Thay vào đó, hãy thêm năm hiện tại theo cách thủ công mà không làm cho nó động.
• Tránh tải trọng mạng khổng lồ – giảm kích thước trang và số lượng yêu cầu HTTP. Một đề xuất chung bao gồm từ bộ nhớ đệm đến tối ưu hóa hình ảnh, phông chữ, mã của bên thứ ba, plugin và giảm các tệp CSS + JavaScript.
• Tránh các thư viện JavaScript lớn với các lựa chọn thay thế nhỏ hơn – hầu hết các plugin dựa vào jQuery thay vì các thư viện JavaScript lớn , nhưng bạn vẫn nên cố gắng loại bỏ jQuery khỏi trang web của mình bằng cách sử dụng các plugin không có jQuery và tắt jQuery di chuyển.
• Tránh bố cục thay đổi lớn – đo lường các yếu tố dịch chuyển trên một trang thường được kết hợp với phông chữ, nút, hình ảnh, CSS và cookie thông báo “bay đến” khi một trang đang tải. Mẹo nhanh là thử tắt “tối ưu hóa phân phối CSS” trong WP Rocket hoặc “tải CSS không đồng bộ” trong bộ nhớ cache LiteSpeed. Sử dụng phông chữ hiển thị đúng cách, loại trừ hình ảnh trong màn hình đầu tiên khỏi tải chậm và chỉ định kích thước của hình ảnh / khung nội tuyến. Quảng cáo, hoạt ảnh và nội dung động cũng có thể gây ra CLS cao. Chỉ số CLS chỉ áp dụng cho nội dung trong màn hình đầu tiên.
• Tránh chuyển hướng nhiều trang – sử dụng đúng HTTPS và WWW hoặc phiên bản không phải WWW trên toàn bộ trang web của bạn. Các plugin cũng có thể gây ra lỗi chuyển hướng.
• Tránh các hoạt ảnh không được tổng hợp – sửa các hoạt ảnh thay đổi hoặc có vẻ lộn xộn khi tải trang của bạn, điều này cũng sẽ ảnh hưởng đến thời gian Dịch chuyển Bố cục Tích lũy của bạn.
• Tránh cung cấp JavaScript cũ cho các trình duyệt hiện đại – không sử dụng JavaScript đã lỗi thời (tiêu chuẩn ES5). Sử dụng các chủ đề / plugin đáng tin cậy sẽ ngăn chặn điều này.
• Trì hoãn hình ảnh ngoài màn hình – hình ảnh tải chậm (tích hợp sẵn trong WordPress hoặc sử dụng một plugin (Optimole) tải chậm mà không cần jQuery và cung cấp hình ảnh qua Cloudfront).
• Đảm bảo văn bản vẫn hiển thị trong khi tải Webfont – sử dụng thuộc tính “swap” trong font-display bằng cách thêm & display = swap vào cuối URL Google Font hoặc sử dụng một plugin .
• Mã hóa hình ảnh hiệu quả – đề xuất chung để thu nhỏ hình ảnh. Nén hình ảnh (sử dụng plugin như ShortPixel hoặc TinyPNG), tải hình ảnh lười biếng, phân phát chúng từ CDN (Cloudflare sẽ không hoạt động), xóa dữ liệu EXIF, sử dụng WebP.
• Loại bỏ tài nguyên chặn hiển thị – tạo CSS quan trọng và trì hoãn JavaScript. Autoptimize và plugin Async JavaScript thường có thể khắc phục những lỗi này.
• Bật nén văn bản – bật GZIP trong plugin bộ nhớ cache của bạn (nhưng Brotli nhanh hơn).
• Sơn  nội dung lớn nhất – nội dung chính trên trang mất bao lâu để hoàn thành kết xuất (có nhiều yếu tố liên quan). Các cách chính để cải thiện LCP là giảm thời gian phản hồi của máy chủ, chọn trung tâm dữ liệu gần với khách truy cập, sử dụng CDN, thêm gợi ý tài nguyên trình duyệt như kết nối trước và tìm nạp trước, sử dụng bộ nhớ đệm phía máy chủ, tài nguyên quan trọng nội tuyến, trì hoãn tài nguyên không quan trọng, sử dụng CSS đường dẫn quan trọng, tránh các tập lệnh nặng trong màn hình đầu tiên, giảm kích thước DOM, đảm bảo văn bản vẫn hiển thị trong quá trình tải phông chữ, tối ưu hóa hình ảnh, sử dụng hình ảnh thích ứng và giảm thiểu CSS / JS.
• Giảm thiểu công việc của chuỗi chính – khuyến nghị chung để giảm JavaScript.
• Xóa JavaScript / CSS không sử dụng – tránh các trình tạo trang chậm thêm nhiều CSS / JS không cần thiết, giảm mã của bên thứ ba bằng cách lưu trữ tệp cục bộ, tệp tải chậm và trì hoãn JavaScript không quan trọng. Xóa jQuery nếu không làm hỏng trang web của bạn. Sử dụng CSS quan trọng hoặc sử dụng công cụ này để xóa CSS không sử dụng. Sử dụng mã theo dõi Google Analytics nhỏ hơn (analytics-minimal.js hoặc analytics.js) thay vì gtagv4.js. Sử dụng Perfmatters hoặc Asset CleanUp để dỡ nội dung trên các trang và bài đăng cụ thể.
• Giảm thời gian phản hồi của máy chủ – tránh chia sẻ lưu trữ, thương hiệu EIG và thoát khỏi SiteGround vì TTFB của họ đã trở nên chậm. Hãy thử Cloudways (DigitalOcean hoặc Vultr HF) hoặc Gridpane. Tham gia Nhóm Facebook của WP Hosting để nhận phản hồi.
• Giữ số lượng yêu cầu thấp và kích thước truyền nhỏ – Giữ số lượng yêu cầu thấp có nghĩa là tạo ra ít yêu cầu HTTP hơn (thường liên quan đến nhiều mã của bên thứ ba, nhiều phông chữ và nhiều tệp CSS / JavaScript). Để giữ kích thước truyền nhỏ hơn, hãy rút gọn CSS / JS, sử dụng hình ảnh nén + có kích thước phù hợp và khắc phục sự cố chuyển hướng.
• Thời gian thực thi JavaScript – xem mục “JavaScript không sử dụng đã loại bỏ”.
• Giảm thiểu việc sử dụng của bên thứ ba – xem quá trình tải mã của bên thứ ba trên trang web của bạn trong PSI hoặc GTmetrix Waterfall (hoặc đây là danh sách các bên thứ ba phổ biến ) sau đó quyết định những gì cần được tối ưu hóa. Lưu trữ cục bộ phông chữ trong OMGF , lưu trữ cục bộ Google Analytics và Facebook Pixel, tải video chậm , thay thế iframe YouTube bằng hình ảnh xem trước và lưu trữ cục bộ Gravatars bằng WP User Avatar . Sử dụng loại tập lệnh GA nhỏ hơn và tắt tiếp thị lại + quảng cáo cho GA để tránh yêu cầu thứ hai đến DoubleClick (trong Perfmatters), trì hoãn tải JavaScript bên thứ ba không cần thiết và tránh sử dụng trang web Maps. AdSense có thể tạo nhiều yêu cầu của bên thứ ba.
• Thu nhỏ CSS – loại bỏ các ký tự không cần thiết khỏi CSS (được thực hiện thông qua plugin bộ nhớ cache).
• Giảm thiểu JavaScript – loại bỏ các ký tự không cần thiết khỏi JS (thông qua plugin bộ nhớ cache).
• Kết nối trước với nguồn gốc bắt buộc – nếu sử dụng CDN hoặc Google Font, hãy kết nối trước URL CDN của bạn và //fonts.gstatic.com bằng Perfmatters, Pre * Party hoặc thêm mã theo cách thủ công. Điều này sẽ thiết lập kết nối sớm với các dịch vụ của bên thứ ba.
• Tải trước các yêu cầu chính – tải các tài nguyên quan trọng sớm hơn. Thường được thực hiện với các tệp CSS, JavaScript, WOFF2 và hình ảnh quan trọng. Có thể được thực hiện trong WP Rocket, Perfmatters và các plugin tốc độ khác. Bật tải trước liên kết sau đó tìm các tệp quan trọng được tải trên trang web của bạn. Tải trước các tệp trong khi thử nghiệm tác động đến thời gian tải.
• Kích thước hình ảnh phù hợp – tránh hình ảnh lớn và thay đổi kích thước thành kích thước nhỏ hơn. Hãy thử tạo bảng kích thước gian lận cho logo, hình ảnh blog, hình ảnh thanh bên, v.v.
• Loại bỏ các mô-đun trùng lặp trong các gói JavaScript – thường do nhập mã có thể dẫn đến các mô-đun trùng lặp (gói JS) từ nhiều nguồn.
• Cung cấp hình ảnh ở các định dạng thế hệ tiếp theo – chuyển đổi hình ảnh sang định dạng WebP bằng cách sử dụng một plugin và bật bộ nhớ đệm WebP trong cài đặt Phương tiện của WP Rocket nếu bạn đang sử dụng nó.
• Cung cấp nội dung tĩnh với chính sách bộ nhớ cache hiệu quả – nếu sử dụng WP Rocket, hãy chỉnh sửa .htaccess của bạn và thay đổi thời hạn bộ nhớ cache của hình ảnh và phông chữ của bạn từ 4 tháng thành 180 ngày (hoặc 6 tháng). Nếu sử dụng Cloudflare, hãy đặt thời hạn bộ nhớ cache thành 6 tháng.
• Sử dụng các định dạng video cho nội dung động – chuyển đổi bất kỳ ảnh GIF động nào thành video.
• Đánh dấu và đo lường thời gian của người dùng – nhận được các chỉ số bổ sung trong PSI và Chrome DevTools bằng cách thêm API tính thời gian của người dùng. Đây không phải là một bài kiểm tra đạt / không đạt; nó chỉ đơn giản là cung cấp dữ liệu tốc độ bổ sung sử dụng cho định rõ nơi thời gian đang được chi tiêu.
• Sử dụng trình nghe thụ động để cải thiện hiệu suất cuộn – một số chủ đề / plugin sử dụng ‘”addEventListener” ( sửa đổi thành thụ động ). Cũng có một vấn đề với một tập lệnh cốt lõi của WordPress (js / comment-reply.min.js) tạo trình nghe không thụ động.

24. Tài nguyên

Nếu bạn đang muốn tự làm, hãy tham gia các Nhóm Facebook mà tôi đã đề xuất và tìm kiếm các giải pháp. Nhiều người đã đặt câu hỏi về việc cải thiện các mục cụ thể trong PSI, đề xuất lưu trữ, plugin bộ nhớ cache, CDN, v.v. Có một mỏ vàng thông tin ở đó.

Nhóm Facebook

• Nhóm Facebook Vấn đề Tốc độ WP
• Nhóm Facebook Hosting WordPress
• WordPress tăng tốc nhóm Facebook (cẩn thận, Hristo từ SiteGround là quản trị viên)
• Các plugin tốc độ cho WordPress của Gijo Varghese

Đó là tất cả!

Thực sự hy vọng điều này sẽ giúp ích cho các bạn. Thả điểm số mới của bạn + thời gian tải trong các nhận xét. Vui lòng bao gồm URL báo cáo GTmetrix của bạn và KHÔNG phải là một liên kết đến trang web của bạn, nếu không nó sẽ bị đánh dấu là spam.