Hướng dẫn của nhà phát triển không nhằm giảm thời gian tải WordPress xuống còn 2 giây với dữ liệu

Tự hỏi bắt đầu từ đâu khi cải thiện tốc độ trang? Nhà báo Columnist Tom Demers chia sẻ cách ông khắc phục sự cải thiện tốc độ trang trên một số trang web WordPress mà không có đầu vào từ nhiều nhà phát triển.

 

Với việc tiếp tục tập trung vào các số liệu về trải nghiệm và tương tác của người dùng trong các cập nhật thuật toán gần đây , Google sẽ trở nên quan trọng hơn cho các nhà tiếp thị chú ý đến tốc độ trang web của họ. Tốc độ trang từ lâu đã là yếu tố xếp hạng cho kết quả tìm kiếm dành cho máy tính để bàn và cũng sớm ảnh hưởng đến xếp hạng trên điện thoại di động .

Tuy nhiên, những lợi ích của thời gian tải được cải thiện đã vượt quá tác động của chúng tới SEO và các xếp hạng hữu cơ của trang web. Xem xét dữ liệu gần đây của Google, cho thấy rằng " 53% lượt truy cập bị bỏ qua nếu trang web trên thiết bị di động mất nhiều hơn ba giây để tải" hoặc "mỗi lần tải trang trên điện thoại di động thứ hai chậm trễ, các chuyển đổi có thể giảm tới 20% ".

Vì vậy, làm thế nào để bạn thực sự đi về tăng tốc độ trang web của bạn? Đối với nhiều nhà tiếp thị phi kỹ thuật, cố gắng tìm ra cách cải thiện tốc độ trang có thể là một nhiệm vụ khó khăn. Bạn cần thực sự kéo lê nào để tạo ra kết quả? Và làm thế nào để bạn nhận được những thay đổi được thực hiện trên trang web của bạn ?

Tôi không phải là một nhà phát triển. Công ty của tôi sở hữu và điều hành một số trang xuất bản khác nhau (tương đối đơn giản) được xây dựng trên WordPress. Tôi đã thiết lập để cải thiện thời gian tải cho các trang web này  mà không cần bất kỳ sự can thiệp của nhà phát triển để xem loại tác động có thể là kết quả của một số chỉnh sửa đơn giản mà bất kỳ ai (ngay cả tôi!) Cũng có thể thực hiện. Trong bài đăng này, tôi sẽ đi qua từng tối ưu hóa, giải thích tác động trên trang web của chúng tôi và chia sẻ dữ liệu thực tế về thời gian tải, số điểm của Google Speed ​​và hơn thế nữa.

Ba điểm quan trọng tôi sẽ quay lại sau trong bài đăng:

• Như tôi đã nói, đây là những trang web khá đơn giản được xây dựng trong WordPress, vì vậy plugin và giải pháp ở đây là tất cả WordPress cụ thể.
• Một trang web phức tạp hơn được xây dựng trên nền tảng khác với các chức năng khác nhau (ví dụ như các trang web thương mại điện tử, các trang xuất bản phức tạp hơn) sẽ có nhiều mối quan tâm bổ sung, phức tạp hơn và cũng sẽ phản ứng khác với các chiến thuật này so với các trang web của chúng tôi.
• Đừng để sự hoàn hảo là kẻ thù của lợi ích khi nói đến tốc độ trang; các nhà phát triển có thể cho bạn biết rằng để đạt được thời gian tải trang "Thực hành tốt nhất", bạn cần phải thiết kế lại trang web của bạn (có thể không thực tế cho công ty của bạn vào lúc này). Mặc dù có thể xảy ra trường hợp, có thể có một số sự kết hợp của các chiến thuật nêu dưới đây mà bạn có thể thực hiện để giúp cải thiện tốc độ trang. Giúp các nhà phát triển tập trung vào các chỉ số phù hợp (chúng tôi sẽ phác thảo dưới đây) và làm việc để cải thiện.

Tất cả những gì đã nói, bài đăng này (và hiểu được một số đòn bẩy cơ bản có sẵn để cải thiện tốc độ trang) sẽ giúp bạn hiểu rõ hơn về tiềm năng cải tiến tốc độ trên trang web của bạn.

Bạn đang tối ưu hóa cái gì? Chọn chỉ số tốc độ trang phù hợp

Giống như rất nhiều SEO bắt đầu, tôi đã tập trung nỗ lực vào tốc độ trang, dựa trên các gợi ý của Công cụ Tìm kiếm Tốc độ PageSpeed ​​Insights miễn phí . Nó được phát trực tiếp từ miệng của Google, mang lại các chỉ số rất dễ hiểu (một cấp, giống như trường học!) Và có các đề xuất hữu ích để tăng thời gian tải trang.

Công cụ này chắc chắn có ích, nhưng khi bạn khai thác tốc độ trang, bạn có thể nhận ra rằng:

• việc phân loại có thể là một chút chao đảo. Đôi khi bạn sẽ đẩy nhanh tốc độ tải trang của mình và điểm số của bạn sẽ giảm. Đôi khi bạn sẽ không làm gì, và điểm số sẽ di chuyển xung quanh một số. Hãy nhớ rằng Chén Thánh ở đây là để tăng tốc độ trang web của bạn cho khách truy cập của bạn , do đó, không chỉ học tập để thử nghiệm!
• dường như Google không sử dụng điểm số này làm tín hiệu xếp hạng như thời gian tải trong Google Chrome so với các trang web khác trong kết quả tìm kiếm mà bạn đang xuất hiện, như Daniel Cristo, người đóng góp của Công cụ Tìm kiếm Đất cho biết .

Điều đó táo bạo hơn về tốc độ của bạn là yếu tố so với các đối thủ cạnh tranh SERP của bạn là rất quan trọng; nếu bạn có một trang web B2B đơn giản, bạn có thể nhìn vào một trang web thương mại điện tử thành công và nói, "Trang web của họ chậm hơn chúng ta và làm tuyệt vời! Chúng ta nên ổn thôi! "Nhưng thực tế là, đó không phải là người mà bạn đang cạnh tranh. Bạn muốn trang web của bạn trở nên nhanh như nó có thể được, vì vậy bạn nên so sánh nó với các trang web được xếp hạng trong các kết quả tìm kiếm quan trọng nhất cho trang web của bạn .

Vì vậy, nếu chúng ta không sử dụng điểm số công cụ PageSpeed Insight Google như be-tất cả và cuối cùng tất cả những nỗ lực tối ưu hóa của chúng tôi, những gì số liệu nên chúng tôi được tập trung vào?

Công cụ Tìm kiếm Land columnist Chris Liversidge thực hiện một công việc tuyệt vời để phá vỡ những chi tiết hơn trong bài viết tuyệt vời của mình trên các sự kiện tốc độ trang khác nhau , nhưng thực sự tập trung vào:

• thời gian để byte đầu tiên (TTFB) - Làm thế nào nhanh chóng sau khi một yêu cầu được thực hiện rằng máy chủ của bạn và / hoặc CDN (mà chúng tôi sẽ nhận được trong một chút) gửi các byte đầu tiên của dữ liệu.
• quan trọng render đường dẫn / render bắt đầu  - Về cơ bản, khi nội dung của bạn "trong màn hình đầu tiên" được rendered.
• làm đầy đủ trang  - Khi toàn bộ trang được tải.

Một lần nữa, chúng tôi muốn tập trung vào trải nghiệm người dùng trên trang của chúng tôi, do đó đảm bảo rằng nội dung trong màn hình đầu tiên được gửi nhanh và toàn bộ trang tải một cách nhanh chóng thực sự là mối quan tâm chính. TT số liệu TTFB (mặc dù không hoàn hảo) có thể hữu ích vì nó cho chúng tôi biết nếu vấn đề thời gian tải của chúng tôi là kết quả của sự cố máy chủ.

Vì vậy, đây là những thước đo của chúng tôi. Làm thế nào để chúng ta biết được liệu các trang của chúng ta có còn chậm chạp?

Công cụ đo tốc độ trang

Trước tiên, chúng ta cần một công cụ để đo chúng. May mắn thay, có rất nhiều công cụ miễn phí tuyệt vời cho các mục đích này. Tôi đã sử dụng Kiểm tra Trang Web , điều này đã đặt ra những điều này khá đơn giản. Dưới đây là kết quả cho Công cụ Tìm kiếm Đất đai, khá tốt cho một trang chủ trực quan và một trang web xuất bản lớn và phức tạp:

Ở đâu có các công cụ, có rất nhiều lựa chọn để đo tốc độ và nhận được các đề xuất, bao gồm:

• Công cụ miễn phí của Pingdom
• GT Metrix
• Công cụ miễn phí của Key CDN
• Công cụ của Varvy

Và những người khác. Với mục đích của chúng tôi ở đây, tôi sẽ sử dụng dữ liệu từ Kiểm tra Trang Web.

Mục tiêu của chúng tôi là gì? Tốc độ trang 'tốt' là gì?

Một lần nữa, thời gian tải trang sẽ thay đổi đáng kể từ niche sang niche và SERP tới SERP, vì vậy mục tiêu ban đầu của chúng tôi đơn giản là "trở nên tốt hơn". Nói cách khác, chúng ta hãy xem xét một số hướng dẫn thực tiễn tốt nhất về thời gian mục tiêu cho các sự kiện này:

• TTFB  - Tối thiểu là dưới 200 ms (mili giây), ít nhất dưới 500 ms (nghiên cứu của A Moz từ vài năm trước cho thấy nhiều trang xếp hạng hàng đầu có TTFB là 350 ms, trong khi vị trí thấp hơn thường là gần 650 ms. )
• Bắt đầu render  - Lý tưởng là dưới 1 giây, ít nhất là giữ dưới 2 giây.
• Hiển thị toàn bộ trang  - Lý tưởng dưới 3 giây, ít nhất được giữ dưới 5 giây. (John Mueller của Google khuyến cáo dưới thời gian tải 2- 3 giây và đề cập ở đó rằng ông cũng sử dụng Kiểm tra Trang Web).

Một lần nữa, nếu thời gian tải trang của bạn đầy đủ là 15 giây, và 5 giây trước khi rendering đường dẫn quan trọng hoàn tất, đừng vất tay. Bắt đầu tối ưu hóa và làm việc để có được những con số xuống, thậm chí nếu bạn không thể có được chúng dưới một giây.

Nhanh hơn là tốt hơn!

OK, vậy bạn có thể làm gì để cải thiện tốc độ trang?

Giả sử bạn đo tốc độ trang của bạn, và nó chậm; bạn có thể làm gì để tạo sự khác biệt?

Các gợi ý phổ biến nhất từ ​​công cụ Xem tốc độ trang của Google (và từ các chuyên gia tối ưu hóa) bao gồm:

• giảm thời gian đáp ứng của máy chủ.
• cho phép nén.
• tận dụng bộ nhớ cache của trình duyệt.
• loại bỏ mã chặn hiển thị trên màn hình đầu tiên (CSS và JS).
• minify mã.
• nén và thay đổi kích thước hình ảnh.

Tôi sẽ đi qua đây những tối ưu hóa nào mà tôi có thể thực hiện được trên bốn trang WordPress khác nhau, và thời gian tải trước / sau khi kết quả từ những tối ưu hóa đó. Một lần nữa, những con số này sẽ không đúng đối với tất cả các trang web và không phải mọi thực tiễn tốt nhất sẽ có cùng tác động trên mỗi trang web. Nhưng tôi nghĩ rằng thông qua quá trình này, bạn sẽ thấy một số tối ưu hóa nhanh và đơn giản có thể có tác động lớn đến tốc độ.

Xin lưu ý rằng mặc dù có một số tối ưu hóa bạn có thể thực hiện với sự hiểu biết cơ bản về HTML, nhưng có một số điểm uốn, điều quan trọng là phải có một nguồn tài nguyên kỹ thuật để tìm hiểu cách tốt nhất để cải thiện thời gian tải trang web của bạn.

Bước 1: So sánh các chỉ số tốc độ trang của chúng tôi

Trước hết, tôi đã chụp nhanh số liệu về tốc độ trang của mỗi trang trên trang chủ của trang web và trang bài viết sâu hơn. Tôi đã làm điều này đặc biệt cho các mục đích của bài đăng này. Nếu bạn muốn tối ưu hóa trang web của mình, bạn sẽ muốn xem các chỉ số trên trang web, hoặc ít nhất là trên một mẫu các trang lưu lượng truy cập cao nhất và trên một trang điển hình cho mỗi mẫu trên trang web của bạn.

So với một số trang web, những con số này không phải là khủng khiếp - nhưng đối với các trang nội dung đơn giản được xây dựng trên WordPress mà không có nhiều chuông và còi, chắc chắn sẽ có rất nhiều chỗ để cải tiến.

Những gì chúng tôi đã làm là thực hiện bốn đề nghị khác nhau thường được đề nghị tối ưu hóa tốc độ. Dưới đây, chúng ta sẽ thấy tác động của mỗi tối ưu hóa khi nó được thực hiện, và sau đó là tác động tích lũy của tất cả các tối ưu hóa.

Vì vậy, chúng ta hãy đào sâu vào những tối ưu hóa.

Bước 2: Làm sạch mã

Công cụ Xem trên trang Chi tiết về Google của Google đã đề nghị chúng tôi "giảm thiểu" CSS, JavaScript và HTML của các trang web. Đối với điều này, chúng tôi đã sử dụng một plugin WordPress miễn phí có tên Autoptimize. Phải mất khoảng 20 phút để thiết lập trên bốn trang web:

Sau khi tối ưu hóa HTML, JS và CSS và tải nội tuyến JS và CSS, công cụ của Google đã di chuyển nhỏ và "Loại bỏ JavaScript chặn hiển thị và CSS trong nội dung trên màn hình đầu tiên" vào cột "Tối ưu hóa được tìm thấy":

Tác động là gì?

Như bạn thấy, phần lớn các trang thấy có sự cải thiện, và một số đã được nâng cấp đáng kể lên tới 20 phần trăm. Nhưng trong một số trường hợp, có rất ít cải thiện tỷ lệ phần trăm, hoặc thậm chí tồi tệ hơn hiệu suất. Có một số khác biệt từ kiểm tra đến thử nghiệm, nhưng những gì bạn thấy là mặc dù những cải tiến này thường cải thiện tốc độ trang, mức độ ảnh hưởng của chúng thay đổi và phụ thuộc vào trang web .

Xin lưu ý: Đây là phiên bản miễn phí của plugin với một "đoán tốt nhất" tại các cài đặt lý tưởng. Cẩn thận khi thực hiện các thay đổi cho mã trang web của bạn và như tôi sẽ đề cập sau trong bài đăng, đây là một khu vực cụ thể nơi bạn có thể muốn tìm một nhà phát triển để được hướng dẫn.

Bước 3: Bộ nhớ cache của trình duyệt

Tiếp theo, chúng tôi muốn sử dụng bộ nhớ cache của trình duyệt. Thông thường, bạn có thể sử dụng các plugin WordPress như WP Super Cache hoặc WP Rocket cho mục đích này, nhưng các trang này đã được lưu trữ trên WP Engine, có một số vấn đề tương thích với một số plugin đó. Vì vậy, chúng tôi chỉ cần bật bộ nhớ đệm đối tượng Công cụ WP Engine:

Tác động là gì?

Như bạn thấy, điều này có tác động đáng kể hơn so với nỗ lực dọn sạch mã của chúng tôi và đối với hai trang web, chúng tôi đã chứng kiến ​​sự cải thiện hiệu suất đáng kể từ 20 đến 30 phần trăm, chỉ với hai trang nhìn thấy sự tăng lên trong thời gian render bắt đầu.

Bước 4: Thực hiện CDN

Một lần nữa, WP Engine có tùy chọn CDN riêng của mình, vì vậy chúng tôi đã cho phép đó, đây cũng là một quá trình cực kỳ đơn giản trong WP Engine:

Tác động là gì?

Đây là lần thực hiện đầu tiên mà chúng ta thực sự thấy một sự giảm hiệu suất trong hoạt động. Một số điều cần lưu ý ở đó:

• Một CDN được thực hiện để cải thiện tốc độ trang cho người dùng ở các vùng khác nhau của đất nước, vì vậy về lý thuyết tác động của nó (tích cực) nên được nhiều hơn cho các trường hợp thử nghiệm khác nhau ở các khu vực khác nhau trên thế giới.
• Một lần nữa, đây chỉ là một thử nghiệm đối với một số lượng nhỏ các trang web - những người khác đã thử nghiệm WP Engine CDN và thấy kết quả tốt hơn, do đó, mileage của bạn có thể thay đổi ở đó.

Việc lấy đi quan trọng ở đây thật sự là một lần nữa, không phải mọi sự tối ưu hóa sẽ có cùng tác động trên mỗi trang web và đôi khi, một số nỗ lực sẽ có tác động thực sự tối thiểu hoặc không có.

Bước 5: Tối ưu hóa hình ảnh

Cuối cùng, chúng tôi đã làm việc để nén và thay đổi kích thước hình ảnh trên mỗi trang web. Trong một số trường hợp, các hình ảnh trên các trang web đã được nén, và thủ phạm lớn nhất là (như bạn thấy) trang chủ cho trang web bốn. Tôi thấy rằng trên các trang web đã bỏ qua nó, tối ưu hóa hình ảnh thường là nhanh nhất, dễ dàng nhất và ảnh hưởng đến tốc độ cao nhất.

Để làm điều này, chúng tôi sử dụng một plugin nén hình ảnh được gọi là Optimus. Chúng tôi cũng đã nén và định lại kích thước mỗi hình ảnh trên các trang "bằng tay" để đảm bảo nén không ảnh hưởng đến chất lượng và các tệp đó càng nhỏ càng tốt:

Có một số bổ sung tối ưu hóa hình ảnh cho WordPress bao gồm, nhưng không giới hạn:

• Optimus
• WP Smush
• EWWW nén hình ảnh
• Chụp ảnh điểm ảnh ngắn

Bất cứ khi nào bạn sử dụng các loại plugin này, bạn phải nhận thức được các vấn đề chất lượng hình ảnh / rendering tiềm ẩn ở một nơi nào đó trên trang của bạn nếu bạn đang áp dụng chúng cho tất cả các hình ảnh hiện có trong thư viện phương tiện truyền thông của bạn. (Sau khi một số kiểm tra bổ sung / đề xuất từ ​​các chuyên gia về tốc độ trang - chúng tôi đã chuyển sang Short Pixel.)

Ngoài ra còn có một số công cụ có sẵn để nén hình ảnh cá nhân trước khi bạn tải chúng lên, bao gồm:

• Optimizilla
• Compressor.io
• Tiny PNG

Và có rất nhiều người khác nữa.

Tác động là gì?

Như bạn thấy từ một vài trang chủ, nén hình ảnh có thể dẫn đến một số chiến thắng tải trang lớn nhất. Hơn hết, nén hình ảnh và thay thế các phiên bản không nén là một công việc mà bạn sẽ không cần bất kỳ loại trợ giúp phát triển nào.

Một lần nữa, mức độ cải tiến phụ thuộc vào địa điểm. Các trang web nơi hình ảnh đã được nén và thay đổi kích thước (hoặc chỉ xảy ra khi nhỏ hơn) sẽ rõ ràng là ít thấy được từ bước này.

Vì vậy, tác động tích lũy của những nỗ lực của chúng tôi là gì?

Như bạn thấy, kết quả ở đây thay đổi theo từng trang. Tuy nhiên, chúng tôi đã cạo khoảng 2 giây so với thời gian tải bằng cách làm theo các bước này và trong hầu hết mọi trường hợp, chúng tôi đã cải thiện tốc độ mà khách truy cập thấy nội dung trong đầu của chúng tôi.

Nhưng một số lần tải thực sự tồi tệ hơn cho tất cả các nỗ lực của chúng tôi và có vẻ như đối với một trang web đơn giản, chúng tôi sẽ có thể đánh bại rất nhiều lần tải này. Vì vậy, bạn có thể làm gì khác?

BONUS STEP: Thuê một chuyên nghiệp!

Sau khi nhận được một sản lượng đáng kể từ một số nỗ lực DIY nghiệp dư của tôi, tôi quyết định đi trước và thuê một nhà phát triển chuyên về tối ưu hóa tốc độ trang. Chuyên gia của chúng tôi đã làm việc về thời gian tải lái xe xuống thậm chí còn hơn nữa. Cụ thể, họ:

• gỡ bỏ hoặc thay thế các plugin trong cấu hình WordPress của tôi mà họ xác định làm chậm trang web xuống.
• mã tinh chỉnh, cấu hình máy chủ và cấu hình của các plugin tối ưu hóa tốc độ mà tôi đã cài đặt.

Quá trình này thực sự cắt giảm thời gian tải (cải thiện) của chúng tôi trong một nửa . Đây là một ví dụ tuyệt vời về cách nhà phát triển thạo các phương pháp hay nhất về tốc độ trang có thể cải thiện đáng kể kết quả của bạn.

Nếu bạn có nguồn tài nguyên phát triển nội bộ, hãy truyền đạt các mục tiêu của mình (giảm thời gian tải trang và tốc độ mà người dùng thấy các yếu tố quan trọng, trong màn hình đầu tiên) và nếu cần, chia sẻ tài nguyên để đảm bảo họ biết các phương pháp hay nhất để đẩy nhanh lên một trang web.