Làm thế nào để tăng tốc trang web WordPress sử dụng Elementor

Trong bài viết này, chúng tôi đưa ra hơn 10 cách để tăng tốc trang web WordPress, bao gồm cả việc chọn nơi lưu trữ và chủ đề phù hợp, tối ưu hóa hình ảnh và loại bỏ các plugin làm chậm website.

Không có gì tệ hơn một trang web cứ mãi tải không ngừng, đúng không? Nếu bạn đứng ở góc độ một người dùng Internet, điều đó làm bạn khó chịu và không thể làm bạn nhấn nút “quay lại” trước khi nội dung của trang web tải xong (đặc biệt là trên thiết bị di động!).

Hơn ai hết, bạn chắc chắn không muốn trang web WordPress của mình trở thành một trang tải chậm.

Ngoài việc tạo ra trải nghiệm người dùng tốt hơn, việc tăng tốc trang web WordPress của bạn cũng có thể thúc đẩy tỷ lệ chuyển đổi của bạn. Và Google đã sử dụng “tốc độ trang” làm yếu tố xếp hạng trong kết quả tìm kiếm trên máy tính để bàn từ năm 2010, và với kế hoạch sử dụng nó trong kết quả tìm kiếm trên thiết bị di động bắt đầu từ tháng 7 năm 2018.

Với những điều này, Elementor đã tập trung vào việc tối ưu hóa hiệu suất với công cụ xây dựng trang web có tên Elementor. Tuy nhiên, Elementor chỉ là một công cụ. Nếu bạn muốn thực sự tăng tốc WordPress và làm cho trang web của bạn tải nhanh nhất có thể, bạn cần thực hiện với nhiều yếu tố hơn nữa.

Trong bài viết này, chúng tôi sẽ chia sẻ cách để tăng tốc trang web WordPress của bạn. Mặc dù một số mẹo tham khảo này nhằm tăng tốc các trang web mà bạn xây dựng với Elementor, Những mẹo này vẫn có thể áp dụng cho các loại trang web WordPress khác.

Để bắt đầu, có 7 cách giúp tối ưu hóa hiệu suất chính của trang web

Có một loạt các chỉnh sửa nhỏ mà bạn có thể thực hiện để tăng hiệu suất. Tuy nhiên, bảy mẹo tối ưu hóa này sẽ mang lại lợi nhuận lớn nhất cho bạn khi tăng tốc trang web WordPress.

Trước khi bạn bắt đầu, hãy kiểm tra trang web của bạn bằng Pingdom Tools hoặc Gtmetrix. Bằng cách đó, bạn có thể biết chính xác các mẹo này tăng tốc trang web WordPress của bạn như thế nào.

1. Lựa chọn máy chủ tối ưu hóa cho công cụ Elementor

Trang web của bạn sẽ chỉ nhanh khi hosting có công cụ hỗ trợ nó. Bạn có thể làm cho trang web của mình chạy nhanh hơn với các mẹo sau nhưng bạn sẽ làm cho trang web tải nhanh nhất khi sử dụng máy chủ lưu trữ như SiteGround.

Vậy điều gì quyết định hiệu suất của website với nơi lưu trữ?

Trước tiên, bạn chắc chắn cần có một máy chủ cung cấp PHP 7+. Phiên bản PHP 7 cung cấp các cải tiến hiệu suất lớn so với các phiên bản cũ hơn của PHP 5 mà nhiều máy chủ vẫn đang chạy.

Một máy chủ WordPress chất lượng cao sẽ cung cấp PHP phiên bản 7, cũng như một loạt các điều chỉnh hiệu suất khác để giúp trang web WordPress của bạn tải nhanh như: bộ nhớ đệm ở máy chủ và hơn thế nữa. SiteGround và InMotion Hosting cung cấp các gói WordPress được quản lý đơn giản. Và khi trang web của bạn phát triển ạnh hơn, Kinsta, WP Engine và Liquid Web đều cung cấp các gói giải pháp với chất lượng cao. Bất kỳ máy chủ nào ở trên đều có thể chạy Elementor, nhưng nếu bạn sử dụng với một tùy chọn khác, dưới đây là các thông số kỹ thuật mà bạn nên lựa chọn mua để tối đa hóa hiệu suất của Elementor:

• PHP 7+
• MySQL 5.6+
• Bộ nhớ WordPress tối thiểu 64MB. Lý tưởng nhất là 128MB +

2. Chọn một Theme nhẹ nhàng với một nền tảng vững chắc

Ngay cả khi bạn đang sử dụng trình tạo trang để tạo hầu hết các nội dung của trang web, Theme của website vẫn sẽ đóng vai trò quan trọng trong việc trang web của bạn tải nhanh hay không. Một ví dụ, Khi chúng ta chuyển trang web từ một theme khác bằng một theme nhẹ hơn là GeneratePress, chúng ta đã có thể cắt giảm 48% thời gian tải trang. Đó là một sự thay đổi lớn!

Các giao diện theo định hướng hiệu suất nên là:

Trọng lượng nhẹ về kích thước tệp và yêu cầu

Chỉ chọn Mô-đun và các tính năng mà website đó cần

Vậy một số giao diện hiệu quả, có hoạt động tốt là gì?

Các Theme lựa chọn dưới đây đều rất tốt, đặc biệt nếu bạn đang sử dụng trình tạo trang như Elementor:

• Hello Theme – Đây là theme rất nhẹ do Elementor tạo ra để chạy với phiên bản Elementor Pro.
• GeneratePress – Một theme nhẹ phổ biến từ Tom Usborne.
• Genesis – Một theme với phù hợp với nhiều lĩnh vực chứ. Theme này phổ biến cho các lập trình viên.
• Astra – Một theme nhẹ khác, có thể tùy chỉnh với việc tích hợp các plugins như WooCommerce và LifterLMS.
• OceanWP – giao diện nhẹ, có thể tùy chỉnh và cung cấp nhiều tiện ích miễn phí và hữu ích.

3. Tối ưu hóa tất cả các hình ảnh được sử dụng trên trang web (bạn có thể làm điều này một cách tự động)

Khi lưu trữ dạng HTTP, trung bình hình ảnh chiếm khoảng ~ 50% kích thước tệp trong tổng các trang. Vì hình ảnh mang có một ảnh hưởng lớn đến tốc độ của trang web, nên bạn cần giảm kích thước tệp ảnh của trang web của mình. Có hai phần chính để tối ưu hóa hình ảnh mà bạn sử dụng trên trang web WordPress.

Đầu tiên, bạn phải có kích thước hình ảnh thực tế. Nếu giao diện của bạn chỉ hiển thị hình ảnh có chiều rộng tối đa 800px (giá trị này là trung bình), vì thế bạn không nên tải lên toàn bộ 3.000px (đây thường là kích thước ảnh gốc) + hình ảnh lên trang web của mình (trừ hình ảnh dạng banner, Hero hoặc trang web nhiếp ảnh và các ảnh tương tự). Ngay cả trên màn hình thế hệ mới có chất lượng cao, điều này chỉ nhằm lãng phí không gian lưu trữ!

Vì vậy, bước 1 là thay đổi kích thước thực tế của hình ảnh trên trang web thành chiều rộng tối đa phù hợp với giao diện của trang. Tiếp theo đó là nén. Nén hình ảnh sẽ thay đổi được kích thước của ảnh và thu nhỏ chúng hơn nữa. Có hai loại nén chính:

• Lossy – Làm giảm kích thước tập tin, nhưng có giảm chất lượng của hình ảnh.
• Lossless – Làm giảm kích thước ảnh, nhưng không làm giảm chất lượng ảnh.

Tùy thuộc vào nội dung của trang web mà chúng ta cần một chất lượng hình ảnh phù hợp, bạn có thể chọn giữa hai phương pháp nén. Hầu hết các trang web cảm thấy tốt hơn khi sử dụng tính năng nén dữ liệu Lossy

Để tự động thay đổi kích thước và nén hình ảnh khi chúng được tải lên trang web WordPress, bạn có thể chọn một trong những plugin chất lượng:

ShortPixel – tính phí dựa trên số lượng hình ảnh bạn tối ưu hóa. Không có giới hạn về kích thước. Miễn phí cho tối đa 100 hình ảnh mỗi tháng.

Imagify- tính phí dựa trên số MB bạn tối ưu hóa. Không có giới hạn về số lượng hình ảnh. Miễn phí tối đa 25MB mỗi tháng.

Smush – 100% miễn phí với kiểu nén Lossless. Bản miễn phí này là giới hạn kích thước tệp tối đa là 1MB.

4. Loại bỏ các Plugins gây chậm trang web( Làm thế nào để tìm WordPress Plugins chậm)

Thông thường, số lượng Plugin nhiều hay ít không ảnh hưởng tới tốc độ của trang web. Tức là, không phải tất cả các plugin đều ảnh hưởng không tốt đến tốc độ trang web. Nhưng chúng ta cần dùng các plugin phù hợp, không nên dùng những plugin không cần thiết. Thay vì tìm cách loại bỏ các plugin một cách tùy tiện, bạn nên cố gắng giảm số lượng plugin mà đang làm chậm trang web.

Câu hỏi tiếp theo – làm thế nào để bạn tìm thấy các plugin WordPress đang làm chậm trang web của bạn? Dưới đây là hai cách để chúng ta biết được Plugin nào gây ra làm trang web chậm:

Đầu tiên, bạn có thể sử dụng plugin P3 (Plugin Performance Profiler) phiên bản miễn phí nếu bạn đang sử dụng PHP 5. Mặc dù công cụ này không được cập nhật trong một thời gian nhưng plugin vẫn hoạt động tốt trên hầu hết các máy chủ chạy PHP 5. Nếu máy chủ của bạn đang chạy PHP 7, cách dễ nhất để tìm các plugin chậm là thông qua tab Waterfall trong công cụ như GTmetrix hoặc Pingdom.

Chỉ cần kiểm tra trang web bằng cách sử dụng công cụ này và xem xét các yêu cầu khác nhau để tìm ra bất cứ yếu tố nào làm tắc nghẽn trang web. Bạn có thể di chuột qua các yêu cầu và xem link nào để có ý tưởng tốt hơn về plugin nào làm chậm trang web

Và cuối cùng, một tùy chọn tốt khác, mặc dù một tùy chọn không dễ dàng đối với người dùng thông thường, là plugin miễn phí Query Monitor plugin..

Vậy bạn sẽ làm gì với các plugin làm chậm trang web? Câu trả lời rõ ràng là loại bỏ chúng nếu không cần thiết, hoặc tìm thêm lựa chọn thay thế theo hướng nâng cao hiệu suất. Một số plugin có thể giúp bạn… Ví dụ, Elementor Pro có thể loại bỏ sử dụng một số plugin bởi vì nó cung cấp gói tập hợp nhiều các chức năng như:

• Slider
• Các form
• Nút chia sẻ xã hội
• Bộ công cụ đếm
• v.v.

5. Tối ưu hóa mã lệnh và kết hợp với công cụ tự động miễn phí

Tối ưu và kết hợp công cụ là hai chiến thuật để làm giảm kích thước và số lượng tệp mã lệnh trên trang web mà không làm thay đổi bất kỳ chức năng cơ bản nào. Việc tối ưu hóa hoạt động bằng cách loại bỏ các ký tự không cần thiết (như khoảng trắng và ngắt dòng) Plugin Autoptimize miễn phí có thể làm cả hai. Tất cả những gì bạn cần làm là cấu hình nó để chạy Nếu bạn gặp bất kỳ sự cố nào với trang web của mình, bước khắc phục sự cố tốt nhất là thử tắt tối ưu hóa JavaScript và xem liệu có khắc phục được sự cố hay không.

6. Sử dụng Page Caching để tạo các phiên bản HTML tĩnh cho nội dung của trang web

Page Caching là chủ đề chính của các bài viết về tăng tốc WordPress. Khi sử dụng công cụ này có thể là yếu tố chính để cải tiến hiệu suất của trang web. Page Caching hoạt động bằng cách tạo ra một phiên bản HTML tĩnh của trang để dùng cho khách truy cập, thay vì buộc máy chủ của bạn tạo trang từ cơ sở dữ liệu và tệp PHP cho mỗi lần truy cập.

Ngày nay, nhiều máy chủ WordPress được triển khai bộ nhớ đệm trang ở cấp máy chủ, do đó, điều này có thể không thực sự là thứ bạn cần thực hiện nếu bạn đã sử dụng lưu trữ được quản lý WordPress. Nhưng nếu máy chủ lưu trữ của bạn không triển khai Page Caching, bạn có thể thực hiện điều đó thông qua plugin mà không quá phức tạp. Có một số các plugin bộ nhớ đệm rất tốt, Bạn có thể lựa chọn một trong những Plugin sau:

Cache Enabler – một plugin nhẹ từ những người dùng KeyCDN. Cùng với Autoptimize, đây là một cặp tuyệt vời với mà chúng ta có thể sử dụng.

WP Super Cache – Bản miễn phí này từ Automattic, là một trong những phiên bản hoạt động tốt.

Swift Performance Lite – plugin này đã nhận được đánh giá cao bởi nhóm WordPress Speed ​​Up Facebook.

WP Rocket – cái này chỉ có trong một phiên bản Pro, nhưng nó có thể tạo ra một loạt các điều chỉnh hiệu suất khác vượt trên cả Page Caching. Và nó cũng có thể giúp bạn tích hợp với Cloudflare.

7. Triển khai Mạng lưới phân phối nội dung (Giống như Cloudflare)

Một mạng lưới phân phối nội dung hay viết tắt là CDN, giúp tăng tốc trang web của bạn cho khách truy cập trên khắp thế giới. Dưới đây là cách thực hiện:

Nếu không có CDN, mỗi khách truy cập vào trang web, dù họ ở đâu, Pháp hay Paris, Texas, đều cần tải xuống trang web của bạn từ cùng một vị trí nơi lưu trữ dữ liệu của website. CDN giúp thay đổi các vị trí này bằng cách lưu trữ bản sao tệp của trang web của bạn tại nhiều vị trí khác nhau trên khắp thế giới. Bằng cách đó, trình duyệt của khách truy cập có thể tải xuống trang web của bạn từ vị trí gần nhất với họ, điều này dẫn đến độ trễ thấp hơn và thời gian tải trang được cải thiện. Giá cũng rẻ bất ngờ (miễn phí!)

Bạn thực sự có thể tận dụng một CDN miễn phí thông qua Cloudflare. Trong khi Cloudflare không có kế hoạch cho phiên bản thương mại (phải trả tiền) Để thiết lập trang web WordPress của bạn với Cloudflare, bạn chỉ cần:

• Đăng ký tại Cloudflare
• Thay đổi máy chủ định danh của tên miền của bạn thành máy chủ định danh do Cloudflare cung cấp. Nó khá khó – nhưng nếu bạn cần thêm trợ giúp, bài viết này có hướng dẫn chi tiết hơn, cũng như một số cài đặt cấu hình dành riêng cho WordPress cho Cloudflare.

Xem xét 6 điều chỉnh hiệu suất nhỏ hơn

Các chỉnh sửa này có thể không ảnh hưởng nhiều đên tốc độ như các mẹo ở trên, nhưng chúng vẫn có thể giúp bạn tìm kiếm một số cải tiến hiệu suất hơn tại trang web của bạn.

8. Kích hoạt nén GZIP cho A ~ Giảm 70% Kích thước tệp 

Nén GZIP là cách nén các tệp được gửi từ máy chủ của bạn sang trình duyệt của khách truy cập. Điều này có thể thu nhỏ kích thước của các trang của bạn xuống ~ 70%. Đây là một cải tiến khá lớn. Nó cũng dễ dàng để thực hiện. Giả sử máy chủ của bạn đang sử dụng Apache (đây là phổ biến ở hầu hết các máy chủ), bạn chỉ cần thêm đoạn mã này vào tệp .htaccess của trang web của mình.

Ngoài ra, một số máy chủ cũng cho phép bạn thực hiện điều này thông qua cPanel. Ví dụ, SiteGround bao gồm tùy chọn Tối ưu hóa trang web trong cPanel.

Sau khi bạn đã bật tính năng nén GZIP, bạn có thể kiểm tra xem tính năng này có hoạt động đúng với công cụ nén Kiểm tra GZIP miễn phí hay không.

9. Giảm thiểu yêu cầu HTTP để loại bỏ tắc nghẽn

Bất cứ có ai đó truy cập vào trang web của bạn, trình duyệt web của họ “yêu cầu” (viết tắt của yêu cầu HTTP) một danh sách các tệp cần thiết để tải trang trong trình duyệt của khách truy cập. Các yêu cầu này bao gồm HTML, CSS, hình ảnh, v.v. Và chúng thậm chí bao gồm các tệp và tập lệnh bên ngoài, như mã theo dõi Google Analytics.
Bạn thấy một ví dụ về tất cả các yêu cầu này trong Waterfall phía trên. Mặc dù mỗi yêu cầu có thể mất thời gian nhiều ít khác nhau, một quy tắc chung tốt nhất là càng nhiều yêu cầu HTTP hơn thì càng làm trang web chậm hơn.
Đây là lý do tại sao các công cụ như Pingdom và GTmetrix đặt số lượng yêu cầu ở phía trước và giữa trang web của bạn:

Mặc dù một số nội dung mà chúng tôi đã thảo luận – như sử dụng Autoptimize – sẽ giúp bạn giảm số lượng yêu cầu tại trang web WordPress của mình, bạn cũng có thể thực hiện thêm nhiều thứ bằng cách tiếp cận thủ công hơn.

Chúng ta không muốn đi quá sâu ở đây bởi vì sẽ cần có một bài viết riêng & đầy đủ cho chủ đề này. Nhưng một số mong muốn đạt được nhanh chóng cho hầu hết các trang web WordPress là:

• Không sử dụng phông Google
• Vô hiệu hóa phông chữ Awesome
• Tắt Gravatars

Ví dụ, để tắt phông Google và Phông chữ Awesome trong thiết kế Elementor của bạn, bạn có thể thêm hai đoạn mã này vào một plugin như đoạn mã hoặc chủ đề con của bạn:

add_filter (‘elementor / frontend / print_google_fonts’, ‘__return_false’);

add_action (‘wp_enqueue_scripts’, function () {wp_dequeue_style (‘font-awesome’);}, 50);

10. Thiết lập bộ nhớ đệm trình duyệt

Bộ nhớ đệm của trình duyệt là một loại bộ nhớ đệm khác có thể tăng tốc thời gian tải trang web của bạn. Không giống như phương pháp lưu trong bộ nhớ cache nói trên, bộ nhớ đệm của trình duyệt cho phép khách truy cập lưu trữ một số loại tệp nhất định trên máy tính của khách truy cập.

Sau đó, lần tiếp theo khách truy cập tải một trang trên trang web của bạn, trình duyệt của họ sẽ hiển thị nội dung được lưu trong bộ nhớ cache của máy tính thay vì phải tại lại về từ máy chủ của bạn. Điều đó có nghĩa là thời gian tải sẽ nhanh hơn.

Để bật tính năng tạo bộ nhớ đệm trình duyệt theo cách thủ công, bạn chỉ cần thêm một đoạn mã khác vào tệp .htaccess của trang web của mình:

<filesMatch “.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$”>
Header set Cache-Control “max-age=84600, public”

11. Tối ưu hóa cơ sở dữ liệu trang web của bạn

Cơ sở dữ liệu trang web của bạn là nơi lưu trữ tất cả nội dung và cài đặt của bạn. Theo thời gian, nó sẽ ngày càng nhiều những thứ lộn xộn dưới như:

• Lịch sử sửa đổi
• Bài / nhận xét không còn sử dụng
• Vv

Mặc dù bạn không thể thấy một sự cải thiện lớn trong thời gian tải trang lần đầu từ việc làm sạch cơ sở dữ liệu của bạn, nhưng việc tối ưu hóa cơ sở dữ liệu của bạn đảm bảo rằng cơ sở dữ liệu của bạn chạy hiệu quả hơn. WP-Optimize có thể giúp bạn dọn sạch rác này ra khỏi cơ sở dữ liệu của bạn. Và sau đó plugin mà chúng ta đề cập đến trong phần tiếp theo có thể giúp ngăn không cho nó tích lũy ngay từ đầu.

12. Sử dụng Plugin WP-Disable để loại bỏ nhiều thứ nhỏ khác

WP-Disable là một plugin gọn gàng có thể giúp bạn thực hiện một số chỉnh sửa hiệu suất thậm chí còn nhỏ hơn & với giao diện thân thiện với người dùng. Trong khi bạn có thể chạy với các cài đặt của nó, đây là những gì chúng ta cần làm:

• Tắt biểu tượng cảm xúc. Đây là tệp .js phụ mà WordPress thêm vào. Nếu bạn hoàn toàn không thích biểu tượng cảm xúc, bạn có thể loại bỏ nó một cách an toàn.

• Xóa chuỗi truy vấn. Đây là điều mà rất nhiều công cụ kiểm tra sẽ giúp bạn.

• Thay đổi tần số API Heartbeat thành 60 giây. Điều này làm giảm tải trên máy chủ của bạn trong khi vẫn mang lại cho bạn những lợi ích của API Heartbeat.

• Thay đổi bản xem lại thành 1. Trong khi một số người thích tắt hoàn toàn bản sửa đổi, tôi thấy hữu ích khi vẫn lưu trữ ít nhất một bản sửa đổi. Nó vẫn làm giảm tải, trong khi cũng cung cấp cho bạn ít nhất một bản sửa đổi trong trường hợp có vấn đề với bản nháp hiện tại của bạn.

• Tắt nhúng Google Maps. Nếu bạn thực sự cần dùng đến Google Maps, bạn có thể để nó trên đó. Nhưng hầu hết các trang web có thể không cần nhúng Google Maps trực tiếp. Plugin sẽ cho phép bạn loại trừ các trang nhất định nếu bạn chỉ cần sử dụng Google Maps trên một trang cụ thể.

13. Vô hiệu hóa Hotlinking để ngăn chặn Leechers

Hotlinking là khi người khác sử dụng hình ảnh được lưu trữ trên máy chủ của bạn trên trang web của họ. Vì máy chủ của bạn phải tải hình ảnh cho trang web của người khác, việc liên kết nóng có thể làm giảm tài nguyên của máy chủ của bạn và sử dụng băng thông của bạn. Chúng ta cần chặn liên kết nóng, chỉ cần thêm đoạn mã ngắn này vào tệp .htaccess của trang web. (Thay thế example.com bằng tên miền của bạn)

Công cụ Elementor một phần giúp làm cho trang web hiệu suất hơn, nhưng những mẹo này sẽ giúp chúng ta làm những phần còn lại Elementor được xây dựng giúp nâng cao hiệu suất của trang web của bạn. Nó sẽ:

• Theo code tiêu chuẩn
• Sử dụng các tệp CSS bên ngoài
• Tạo các tệp CSS nhỏ với các quy tắc CSS tùy chỉnh cho mỗi trang
• Sử dụng thuộc tính “srcset” cho tất cả các tiện ích hình ảnh

Tuy nhiên, tất cả những gì Elementor có thể làm là đảm bảo rằng nội dung bạn xây dựng với Elementor là được tải nhanh nhất có thể. Để đảm bảo toàn bộ trang web của bạn tải nhanh, chúng ta cần đảm bảo mọi thứ khác được tối ưu hóa. Bằng cách làm theo các mẹo trong hướng dẫn này, bạn sẽ có thể làm được điều đó.

Biên dịch: Thu Hồng