Bạn có muốn tăng tốc độ trang web WordPress của bạn? Bạn muốn biết 8 cách tối ưu hóa WordPress có thể giúp bạn giảm thời gian tải trang web? Trong bài viết này, chúng tôi sẽ cho bạn thấy làm thế nào để tăng tốc độ WordPress bằng cách tối ưu hóa hiệu năng của trang WordPress lên đến 256%

Bạn đã biết tốc độ WordPress là rất quan trọng đối với SEO. Một trang web nhanh hơn đồng nghĩa với việc trang web có sự tham gia của người dùng tốt hơn, nhiều lượt xem trang web, và bán hàng tốt hơn. Nghiên cứu trường hợp strangeloop, họ nhận thấy nếu chậm trễ một giây nào có thể mất 7% doanh thu, số lượt xem trang ít hơn 11%, và giảm 16 % sự hài lòng của khách hàng. Ngoài ra tốc độ tải cũng ảnh hướng đến thứ hạng Website trên công cụ tìm kiếm.

Vậy làm như thế nào và những thủ thuật tăng tốc độ WordPress là gì?

Vâng, thay vì chỉ chia sẻ một danh sách các mẹo tăng tốc độ, chúng tôi quyết định làm một nghiên cứu đầy đủ để cho bạn thấy kết quả tăng tốc độ trang web và cách thực hiện

Tổng quan

Trên trang web chủ yếu là hình ảnh và video chiếm nhiều terabytes, do đó việc tối ưu hóa tốc độ tổng thể là rất quan trọng để giảm chi phí, giảm thiểu các trang web bị bỏ đi và cải thiện thời gian trên trang web

Trước khi bắt đầu tối ưu hóa, ta sẽ mất 2,21 giây để tải. Sau khi được thực hiện tối ưu hóa WordPress, thời gian tải trang giảm xuống còn 1,21 giây (~ nhanh hơn 45%).

Trong quá trình tối ưu hóa WordPress, chúng tôi có thể tăng tốc độ phản ứng của máy chủ, cải thiện hiệu suất tốc độ trang web, làm giảm số lượng requests, và cải thiện thời gian tải trang.

Chúng ta hãy cùng theo dõi các kỹ thuật tối ưu hóa WordPress đã giúp tăng tốc độ trang web và cải thiện trải nghiệm của người dùng.

Tối ưu hóa WordPress Hosting

Một máy chủ tốt là rất quan trọng cho tốc độ tải trang web của bạn. Trang web của tôi đã có nhiều lượt truy cập hơn, chúng tôi đã vượt quá giới hạn có thể xử lý được của hosting cũ (HostGator).

Các máy chủ của họ chỉ đơn giản là không thể xử lý một trang web lớn có rất nhiều lượt truy cập hàng ngày. Những HostGator vẫn là hosting rất tốt cho các website nhỏ, nhưng không phải cho một trang lớn có lượt truy cập hàng triệu.

Chúng tôi đã thử nhiều tùy chọn Managed WordPress Hosting, và cuối cùng chúng tôi lựa chọn Vultr vì họ cung cấp các giá trị tổng thể tốt nhất cho trang web này.

Bạn có thể thấy sự cải thiện thời gian phản hồi máy chủ ngay lập tức. Thời gian phản hồi tối đa từ 442ms đến 172ms. Đó là một sự cải thiện lên tới 256%.

Thay vì phát triển các nền tảng hỗ trợ WordPress, Vultr chỉ tập trung vào các server của họ – làm nhanh hơn, mạnh hơn và rẻ hơn. Không như các hosting khác, Vultr cung cấp cho bạn một Unmanaged Hosting, cho phép bạn thoải mái cài đặt những phần mềm cần thiết. Vậy nên mọi tài nguyên của máy chủ, chỉ để tập trung phục vụ website thay vì những phần mềm không cần thiết lắm như FTP, Cpanel…

Caching Plugin

Khi nói đến việc tăng tốc WordPress, bộ nhớ đệm là yếu tố quan trọng thứ hai sau khi lưu trữ web của bạn.

Thông thường khi một người truy cập đến trang web WordPress của bạn, máy chủ yêu cầu PHP với cơ sở dữ liệu MySQL, điều này giúp tìm thấy các trang đang được yêu cầu, và hiển thị nó cho người truy cập.

Điều này mất rất nhiều tài nguyên. Khi bạn có bộ nhớ đệm, thì nó giúp tiết kiệm thời gian và nguồn lực hơn.

Biểu đồ dưới đây sẽ nêu bật quá trình caching của trang web. Thông thường, bộ nhớ đệm giống như tạo ra một shortcut trên desktop để cho bạn truy cập vào nhanh hơn.

Chúng tôi đang sử dụng WP Rocket, một plugin được đánh giá hàng đầu hiện này về hiệu suất. Và bộ nhớ đệm Varnish mang lại hiệu quả vô cùng tối ưu cho website.

Khi ngày càng nhiều công ty lưu trữ chuyên cho WordPress, sẽ có càng nhiều các giải pháp tùy chỉnh bộ nhớ đệm. Flywheel và WPEngine cũng đều cung cấp những giải pháp của riêng họ

CDN

Content Networks Delivery (CDN) có thể giúp bạn tăng tốc độ trang web của bạn.

CDN cho phép phục vụ tất cả các CSS, Javascript và hình ảnh từ một Content Delivery Network. Điều này hoạt động bằng cách xác định vị trí các trang web truy cập, và phục vụ nội dung từ một máy chủ gần nhất với khách hàng.

Nếu bạn đang không sử dụng một giải pháp CDN nào cả, thì bạn có thể sử dụng KeyCDN giống như Diều hâu đang dùng, nó thực sự hoạt động rất hiệu quả.

Kết hợp file để giảm bớt HTTP request

Khi bạn thêm các plugin, họ thường thêm các file JavaScript và CSS. Mỗi tập tin bổ sung là một HTTP request mới.

Chúng tôi kết hợp các file JavaScript và CSS vào một tập tin duy nhất cho mỗi yêu cầu giảm và tăng tốc thời gian tải.

Trong khi chúng ta tải một số chức năng nhỏ mà chúng ta có thể không cần trong một phần cụ thể của trang web, mã này sẽ được lưu trữ trên CDN, và kết quả cho thấy rằng càng ít yêu cầu cho các tập tin thì càng cung cấp hiệu suất tốt hơn so với tải nhiều file JS nhỏ hơn.

Bạn phải làm một cách thường xuyên vì các plugins bạn sử dụng thường xuyên thay đổi giờ.

Image Sprites

Chúng tôi sử dụng những image sprites kết hợp từ các biểu tượng của các trang mạng xã hội thành 1 hình ảnh đơn

* CSS Image Sprites là cách gộp nhiều ảnh nền cần sử dụng vào một file hình duy nhất và sử dụng thuộc tính background-position trong CSS với 2 vị trí Left, Top để  xác định vị trí thành phần ảnh cần làm nền, nhằm giảm tải Request (yêu cầu) đến Server, và giảm dung lượng file hình, tăng tốc độ tải trang, tiết kiệm tài nguyên hệ thống.

Bất cứ khi nào cần hiển thị một biểu tượng cụ thể, chúng ta sẽ sử dụng CSS để:

• Tải hình ảnh dưới dạng hình nền
• Xác định chiều rộng và chiều cao của các yếu tố chúng ta muốn làm biểu tượng
• Đặt vị trí nền cho hình ảnh để tải lên các biểu tượng cần thiết

Ví dụ, để tải các biểu tượng mạng xã hội của sidebar, chúng ta sử dụng:

li.widget_social_icons ul li { float: left; width: 36px; height: 36px; margin: 0 10px 10px 0; padding: 0; background: url(../images/sprite.png) no-repeat; }
li.widget_social_icons ul li.twitter { background-position: 0 -50px; }
li.widget_social_icons ul li.facebook { background-position: -36px -50px; }
li.widget_social_icons ul li.pinterest { background-position: -72px -50px; }
li.widget_social_icons ul li.google { background-position: -108px -50px; }
li.widget_social_icons ul li.rss { background-position: -144px -50px; }
li.widget_social_icons ul li.youtube { background-position: -180px -50px; }

Các background-position, chiều rộng và chiều cao của CSS sẽ giúp chúng ta biết được mục tiêu các phần cụ thể của hình ảnh mà chúng ta muốn đưa ra.

Kết quả là, chỉ có yêu cầu đầu tiên cho file ảnh này là sử dụng băng thông. Yêu cầu tiếp theo để các CDN cho hình ảnh sẽ làm cho phiên bản cache được tải (thường là mạng cục bộ), cũng như chỉ cần yêu cầu một hình ảnh so với 6 biểu tượng mạng xã hội khác nhau.

Bằng cách kết hợp Javascript, CSS và hình ảnh lại với nhau, chúng tôi giảm số lượng yêu cầu đáng kể.

Thu gọn code

Việc thu gọn code liên quan đến việc loại bỏ khoảng trắng và dấu ngắt dòng để giảm kích thước tập tin và làm cho nó tải nhanh hơn.

Chúng tôi sử dụng SCSS, một kiểu cú pháp cơ bản. Điều này cho phép cấu trúc hóa các file CSS trên một số lĩnh vực phát triển để giúp vệc thiết kế và chỉnh sửa trở nên dễ dàng:

Sử dụng CodeKit để biên dịch các tập tin SCSS thành một tập tin đơn CSS. CodeKit cũng loại bỏ khoảng trắng và dấu ngắt dòng để đảm bảo các tập tin là càng nhỏ càng tốt:

Kết quả là, chúng tôi đã có thể giảm kích thước tập tin CSS tới 28%.

Tối ưu hóa hình ảnh

Chúng tôi tối ưu hóa hình ảnh trong hai lĩnh vực: WordPress theme và nội dung tải lên.

Đối với WordPress theme, chúng tôi sử dụng CodeKit để đảm bảo rằng tất cả các hình ảnh được nén. Điều này đảm bảo rằng kích thước tập tin là càng nhỏ càng tốt, mà không làm giảm chất lượng. Xem hướng dẫn của chúng tôi về 6 plugin nén ảnh tốt nhất hiện nay.

Chúng tôi cũng đào tạo tất cả các tác giả về tầm quan trọng của việc tiết kiệm hình ảnh tối ưu hóa WordPress.

Tối ưu javascript chia sẻ mạng xã hội

Cũng như các trang web khác, chia sẻ bài viết trên các mạng xã hội là thực sự quan trọng. Tuy nhiên nhiều nút chia sẻ trên mạng xã hội quá có thể làm chậm trang web của bạn.

Trong khi tích hợp bốn mạng xã hội không ảnh hưởng gì đến thời gian tải trang trong những lần thử nghiệm của chúng tôi, và trang web sẽ bị chậm khi xem trên thiết bị di động. sẽ mất một vài giây để xuất hiện nút chia sẻ trang web trên các mạng xã hội, mặc dù nguyên bản tải không đồng bộ, dẫn đến nội dung bài di chuyển như các nút tải vào xem.

Để giải quyết vấn đề này, chúng tôi dùng đến giải pháp Javascript miễn phí. Mỗi nút chia sẻ của mạng xã hội được đưa ra bởi tùy chỉnh WordPress plugin của chúng tôi, và Javascript của chủ đề chỉ được sử dụng để mở cửa sổ trình duyệt web khi người dùng nhấp chuột.

Tuy nhiên, chúng tôi vẫn muốn hiển thị tổng số lượt chia sẻ một bài viết đã có trên tất cả các mạng xã hội. Để làm điều này, chúng tôi cho ra một tùy chỉnh WordPress Plugin nho nhỏ để lấy và lưu trữ số lượng phần được chia sẻ trên các mạng xã hội vào bảng meta. Các tính toán được cập nhật trong vòng 24 giờ, đảm bảo thời gian truy vấn không ngừng chạy.

Bạn có thể sử dụng API như là Sharre hoặc khảo sát Floating Social Bar cho khách hàng.

Sử dụng RUM của Pingdom (Real User Monitoring), công cụ chia sẻ mới này làm giảm thời gian tải trang từ 6 giây xuống còn 2 giây. Nó cũng đảm bảo rằng chúng tôi giảm số lượng yêu cầu làm cho các nguyên bản thứ ba.

 Kết luận

Bạn có thể thấy rằng một trang web tải nhanh hơn có thể cải thiện sự tham gia của khách truy cập. Các kỹ thuật chúng tôi thảo luận đã đề cập đến nhiều cải thiện mà bạn có thể thực hiện để tối ưu hóa WordPress.

Chúng tôi hy vọng bài viết này giúp bạn tăng tốc độ trang web WordPress của bạn. Bạn cũng có thể xem thêm bài viết làm thế nào để tối ưu hóa robots.txt wordpress cho seo.