Cách tăng tốc trang web WordPress của bạn trong 20 phút

Nội dung bài viết

Mọi người đều biết rằng tốc độ trang rất quan trọng. Đó là một yếu tố xếp hạng của Google đã được xác nhận  trên máy tính để bàn và thiết bị di động, tác động đến trải nghiệm người dùng và có thể ảnh hưởng trực tiếp đến kết quả kinh doanh của bạn.

Nhưng các trang web WordPress chậm là một vấn đề phổ biến.

Đây là điểm số trên thiết bị di động cho một trang của tôi trong PageSpeed ​​Insights .1 pagespeed insights slow 1

Trước khi tối ưu hóa.

Nếu chúng tôi chạy toàn bộ trang web thông qua Trình kiểm tra trang web của Ahrefs —mà hiển thị thời gian tải trang cho tất cả các trang — chúng tôi thấy rằng đây cũng không phải là trang tải chậm duy nhất. Không ai trong số họ tải nhanh chóng, với thời gian tải trung bình là 570ms.2 site audit average load slow

Trước khi tối ưu hóa.

Bây giờ đây là cùng một trang sau khoảng 20 phút tối ưu hóa tốc độ trang:3 pagespeed insights fast 1

Sau khi tối ưu hóa.

Và phần còn lại của các trang trong Kiểm tra trang web:4 site audit fast 1

Sau khi tối ưu hóa.

Sự khác biệt là ngày và đêm. Điểm từ PageSpeed ​​Insights là gần như hoàn hảo và mọi trang đều tải khá nhanh.

Trong hướng dẫn này, tôi sẽ chỉ cho bạn chính xác cách tôi đã thực hiện việc này trong một vài bước đơn giản và dễ dàng.

QUAN TRỌNG

Nhiều tối ưu hóa được đề xuất bên dưới sử dụng WPRocket , một plugin trả phí để tăng tốc trang web WordPress của bạn. Tôi đã liệt kê các lựa chọn thay thế miễn phí nếu có thể, nhưng điều quan trọng cần lưu ý là các plugin đôi khi có thể xung đột với nhau và gây ra sự cố. Bạn nên luôn kiểm tra xem chúng ảnh hưởng như thế nào đến trang web của bạn.

Bước 1. Xóa các plugin không sử dụng

Trừ khi bạn có một trang web WordPress hoàn toàn mới, rất có thể bạn đã cài đặt một loạt các plugin mà bạn không sử dụng trong nhiều năm. Một số trong số này có thể ảnh hưởng đến tốc độ trang, vì vậy bạn nên hủy kích hoạt và gỡ cài đặt bất kỳ thứ gì bạn không cần làm điểm khởi đầu.

Chỉ cần cẩn thận khi làm điều này. Nếu bạn không chắc liệu có thứ gì cần thiết hay không, hãy để nó ở đó.

Bước 2. Chuyển nhà cung cấp DNS sang Cloudflare

Trang web là các tệp trên ổ cứng (máy chủ) được kết nối với internet. Và mọi thiết bị được kết nối với internet đều có địa chỉ IP (ví dụ: 123.123.12.1).

Bởi vì địa chỉ IP khó ghi nhớ, tên miền được ánh xạ tới địa chỉ IP bằng DNS , viết tắt của Domain Name System. Bạn có thể coi đây là danh bạ của web. Khi bạn nhập miền vào trình duyệt của mình, quá trình tra cứu DNS sẽ xảy ra để tìm địa chỉ IP của máy chủ .

Nhưng đây là vấn đề: hầu hết mọi người sử dụng các nhà cung cấp DNS miễn phí từ công ty đăng ký tên miền của họ, điều này thường chậm.

Hãy chuyển sang nhà cung cấp DNS nhanh hơn như Cloudflare .

Để làm điều này, hãy đăng ký một tài khoản Cloudflare miễn phí. Nhấp vào “Thêm trang web”, nhập tên miền của bạn và nhấp vào nút.

5 cloudflare dns

Chọn gói miễn phí, sau đó nhấp vào “Xác nhận gói”.

Cloudflare sẽ cho bạn xem lại cài đặt DNS của mình trước khi tiếp tục. Nếu không có cảnh báo, bạn thường có thể dễ dàng tiếp tục.

Bây giờ tất cả những gì còn lại cần làm là sửa đổi DNS của bạn trong website công ty đăng ký tên miền thành DNS của Cloudflare. Cách bạn thực hiện việc này khác nhau giữa các nhà cung cấp tên miền, vì vậy đừng ngần ngại yêu cầu bộ phận hỗ trợ của họ nếu bạn không chắc chắn về cách thực hiện.

Đây là quy trình nếu bạn đang sử dụng Google Domains:

6 máy chủ tên

Bước 3. Cài đặt plugin Cache

Cache hay bộ nhớ đệm là một quá trình lưu trữ tạm thời các tệp để chúng có thể được gửi đến khách truy cập hiệu quả hơn.

Có hai loại chính:

  • Bộ nhớ đệm của trình duyệt:  Lưu các tệp ‘phổ biến’ như biểu tượng trên ổ cứng của người dùng để họ không phải tải xuống lại khi truy cập lặp lại.
  • Bộ nhớ đệm của máy chủ:  Lưu phiên bản ‘tĩnh’ được xây dựng hoàn chỉnh của một trang trên máy chủ để không phải tạo lại mỗi khi khách truy cập mới yêu cầu.

WP Rocket  giúp bạn dễ dàng kích hoạt bộ nhớ đệm. Chỉ cần mua, cài đặt và kích hoạt nó. Bộ nhớ đệm cơ bản (máy chủ và trình duyệt) được bật theo mặc định. Nếu trang web của bạn đáp ứng, hãy chuyển đến cài đặt bộ nhớ cache và kích hoạt cache cho thiết bị di động

Bộ nhớ đệm tên lửa 7 wp

Tìm kiếm một lựa chọn miễn phí? Hãy thử W3 Total Cache .

Bước 4. Giảm thiểu code của bạn

Loại bỏ khoảng trắng và comment khỏi code để giảm kích thước tệp. Và các tệp nhỏ hơn dẫn đến thời gian tải nhanh hơn.

tốc độ trang wp

Nếu bạn đang sử dụng WPRocket, hãy kích hoạt tùy chọn Minify CSS files trong File Optimization

8 rút gọn

Nếu bạn không sử dụng WPRocket, hãy cài đặt và kích hoạt plugin Autoptimize  và thực hiện tương tự.

Chỉ cần biết rằng bạn nên luôn kiểm tra xem điều này ảnh hưởng như thế nào đến trang web của bạn trước khi triển khai trực tiếp. Tuy nhiên, tùy chọn giảm thiểu code thường gây ra lỗi, đặc biệt Javascript. Vì vậy, nếu gặp lỗi, hãy tắt tùy chọn này.

Bước 5. Kết hợp các tệp CSS và JavaScript

Hầu hết các trang web WordPress bao gồm nhiều tệp CSS và JavaScripts. Một số dành cho theme, một số khác dành cho plugin và bạn cũng có thể có một số tùy chỉnh.

Việc kết hợp các tệp này có thể tăng tốc mọi thứ, nhưng nó phụ thuộc vào thiết lập máy chủ của bạn.

  • Với HTTP /1.1 , các tệp CSS và JavaScript đang tải liên tục. Điều đó có nghĩa là một tệp cần được tải đầy đủ trước khi tệp tiếp theo có thể bắt đầu tải.
  • Với HTTP / 2 , các tệp tải đồng thời. Điều đó có nghĩa là nhiều tệp CSS và JavaScript có thể bắt đầu tải cùng một lúc.

Nếu máy chủ của bạn sử dụng HTTP /1.1, việc kết hợp các tệp sẽ đẩy nhanh tốc độ vì cần tải ít tệp hơn. Nếu nó sử dụng HTTP / 2, việc kết hợp các tệp sẽ không tạo ra nhiều khác biệt vì dù sao thì các tệp có thể tải cùng lúc.

Để xem trang web của bạn sử dụng phiên bản nào, hãy kiểm tra tên miền của bạn vào bằng trình kiểm tra của Key CDN .

9 http1 http2

Nếu HTTP / 2 không được hỗ trợ, bạn nên kết hợp các tệp CSS và JavaScript.

Để thực hiện việc này trong WPRocket, hãy đánh dấu vào tùy chọn “Combine CSS files” trong cài đặt.

10 wprocket kết hợp css

Nếu bạn đang sử dụng Autoptimize, có hai tùy chọn để “tổng hợp” các tệp. Chỉ cần biết rằng những điều này đôi khi có thể ‘phá vỡ’ mọi thứ trên trang web của bạn, vì vậy bạn nên kiểm tra kỹ để đảm bảo rằng mọi thứ vẫn trông và hoạt động như cũ sau khi được bật. Và hãy nhớ xóa bộ nhớ cache trước và kiểm tra các thay đổi trong cửa sổ ẩn danh. Nếu không, những thay đổi có thể không được phản ánh trong những gì bạn thấy.

Bước 6. Loại bỏ các tài nguyên chặn kết xuất

Kết xuất là quá trình biến mã thành một trang web hiển thị.

Từ khóa ở đó là ‘hiển thị’ vì một trang web không phải lúc nào cũng cần tải đầy đủ trước khi hiển thị.

Vì lý do đó, nên ưu tiên tải tài nguyên cho nội dung ‘trong màn hình đầu tiên’.

Bạn có thể thực hiện việc này bằng cách trì hoãn việc tải các tệp CSS và JavaScript không quan trọng cần thiết cho nội dung ‘dưới màn hình đầu tiên’ cho đến sau này. Để thực hiện điều đó trong WPRocket, hãy chọn các hộp để “Tải JavaScript hoãn lại” và “Tối ưu hóa phân phối CSS ”.

11 wprocket tối ưu hóa css

Nếu không sử dụng WPRocket, bạn sẽ cần hai plugin: Autoptimize  và Async JavaScript .

Trong cài đặt cho Autoptimize, hãy chọn hộp “Inline and Defer CSS .” Sau đó, trong cài đặt cho Async JavaScript, hãy chọn “Enable Async JavaScript”.

Nếu trước đây bạn gặp sự cố “eliminate render-blocking resources” trong PageSpeed ​​Insights, thì điều này thường sẽ khắc phục được sự cố đó.

12 hiển thị thông tin chi tiết về tốc độ trang chặn

Bước 7. Lazy-load hình ảnh and videos

Tính năng tải chậm cải thiện tốc độ trang bằng cách hoãn tải hình ảnh và video cho đến khi chúng hiển thị trên màn hình. Nếu bạn đang chạy WordPress 5.5+, tính năng tải chậm hình ảnh được bật theo mặc định , nhưng không được bật cho video.

Nếu bạn đang sử dụng WPRocket, hãy giải quyết vấn đề này bằng cách đánh dấu vào hộp “Enable for iframes and videos” trong cài đặt LazyLoad.

13 video tải chậm

Nếu bạn không sử dụng WPRocket,  plugin Lazy Load for Videos cũng làm được điều tương tự.

Bước 8. Tối ưu hóa Google Fonts

Nhiều theme sử dụng Phông chữ Google và những phông chữ này phải được tải xuống từ máy chủ của Google mỗi khi ai đó truy cập trang web của bạn. Đó có thể là một quá trình tốn thời gian vì máy chủ của bạn phải thực hiện các yêu cầu HTTP , tải xuống tệp CSS , sau đó tải xuống phông chữ từ vị trí được tham chiếu trong biểu định kiểu. Điều này là mặc định cho mọi phông chữ trên trang.

Nếu bạn đang sử dụng WPRocket, nó sẽ tự động tối ưu hóa các yêu cầu Google Fonts. Nếu không, Hoán đổi Hiển thị Phông chữ của Google  là một điểm khởi đầu tốt.

Bước 9. Bật preloading

preloading cho phép bạn xác định các tài nguyên thiết yếu, vì vậy các trình duyệt biết mức độ ưu tiên của các tệp cần tải.

Ví dụ: giả sử mã của bạn trông giống như sau:

<html> 
<head> 
<script type = ”text / javascript” src = ”somefile.js”> </script>
<link rel = ”stylesheet” href = ”/ style.css”>
</head>
<body>
Nội dung
</body>
</html> 

Dựa trên mã này, tệp JavaScript sẽ cần phải tải trước tiên do hệ thống phân cấp. Điều đó không lý tưởng vì tệp CSS gần như chắc chắn quan trọng hơn mã JavaScript.

Cách đơn giản nhất để giải quyết vấn đề này là thêm một dòng mã khác, như sau:

<link rel = "preload" href = "/ style.css" as = "style">

Điều đó yêu cầu trình duyệt ưu tiên tệp CSS hơn tệp JavaScript, bất kể phân cấp.

Bạn có thể thêm các thuộc tính preload theo cách thủ công bằng cách chỉnh sửa mã, nhưng điều đó có thể trở nên lộn xộn và khó hiểu trừ khi bạn biết mình đang làm gì. Việc cài đặt WPRocket sẽ dễ dàng hơn nhiều, tính năng này sẽ tự động thực hiện.

Bước 10. Sử dụng  CDN

Mạng phân phối nội dung ( CDN ) là các nhóm máy chủ được phân phối khắp nơi trên thế giới. Mỗi trang này lưu trữ một bản sao trang web của bạn để người dùng kết nối nhanh hơn khi yêu cầu trang web.

Ví dụ: giả sử máy chủ của máy chủ lưu trữ web của bạn ở Việt Nam . Nếu ai đó truy cập trang web của bạn từ Mỹ và bạn không sử dụng CDN , kết nối giữa thiết bị của họ và máy chủ của bạn sẽ chậm. Nếu ai đó truy cập từ Mỹ và bạn sử dụng CDN , thiết bị của họ sẽ kết nối với máy chủ gần nhất, giúp mọi thứ kết nối nhanh hơn.

Có rất nhiều nhà cung cấp CNS , vì vậy tất cả những gì bạn cần làm là chọn một nhà cung cấp, kích hoạt nó trong WPRocket và nhập  CNAME .

14 wprocket cdn

Bước 11. Tối ưu hóa hình ảnh của bạn

Lazy-loading giải quyết được nhiều vấn đề liên quan đến hình ảnh, nhưng nó không làm được gì để giúp hình ảnh tải trong màn hình đầu tiên. Ảnh càng lớn, chúng sẽ càng tác động tiêu cực đến thời gian tải.

Để giải quyết vấn đề này, hãy nén hình ảnh của bạn bằng một plugin như Shortpixel . Chỉ cần cài đặt nó, kích hoạt nó, đi tới cài đặt, nhập khóa API của bạn , nhấp vào “Save and Go to Bulk Process”, sau đó nhấp vào“ Restart optimizing”.

15 pixel ngắn

Nếu bạn thấy rằng đây là chất lượng quá thấp, hãy chuyển đến cài đặt và thay đổi kiểu nén thành glossy hoặc lossless.

Nén 16 pixel ngắn

Kết quả

Hãy xem những tối ưu hóa này đã ảnh hưởng như thế nào đến tốc độ trang của chúng tôi theo một số công cụ phổ biến.

Dưới đây là số liệu thống kê trước và sau cho bài đăng của tôi trong Thông tin chi tiết về tốc độ trang của Google:

1 thông tin chi tiết về tốc độ trang chậm
3 trang thông tin chi tiết về tốc độ nhanh

Và đây là điều tương tự khi kiểm tra bằng GTMetrix:

18 gtmetrix trước đây
17 gtmetrix sau

Bạn có thể thấy rằng trang trước đó đã được tải đầy đủ trong 5,9 giây với kích thước trang 1,89mb và 67 yêu cầu. Sau khi tối ưu hóa, cả ba chỉ số đều giảm. Kích thước trang là 695 kilobyte, thời gian tải đầy đủ là 4 giây và số lượng yêu cầu đã giảm gần 50%.

Nếu chúng tôi kiểm tra tất cả các trang trên trang web trong Kiểm tra trang web của Ahrefs , chúng tôi thấy thời gian tải trung bình và phân vị thứ 95 được cải thiện khoảng 40%.

Kiểm tra 4 trang web nhanh chóng

Suy nghĩ cuối cùng

Mọi thứ ở trên hoạt động tốt cho trang web của tôi và nó cũng hoạt động tốt cho các trang web khác. Tuy nhiên, điều quan trọng cần nhớ là mọi cấu hình WordPress đều khác nhau. Bạn có thể có nhiều plugin hơn, theme phức tạp hơn, hosting chậm hơn hoặc nhiều tập lệnh theo dõi của bên thứ ba hơn, tất cả đều làm chậm trang web của bạn.

Nếu tốc độ trang của bạn vẫn có thể thực hiện với một số cải tiến sau khi thực hiện các tối ưu hóa này, thì có khả năng bạn cần thực hiện công việc tùy chỉnh trên trang web của mình. Vì vậy, bạn nên thuê một nhà phát triển hoặc chuyên gia tốc độ trang để xem xét mọi thứ kỹ hơn một chút

Chia sẻ để ủng hộ ad nhé
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
0 0 Đánh giá
Xếp hạng bài viết
Đăng ký
Thông báo về
guest
0 Bình luận
Phản hồi nội tuyến
Xem tất cả bình luận
0
Để lại ý kiến của bạnx
()
x
error: Cảnh báo: Không có quyền !!