Cách tối ưu hóa tốc độ trang web của bạn: Mẹo & công cụ hàng đầu

Các trang web chậm làm nản lòng người tiêu dùng. Thất vọng tốn tiền.

Để làm hài lòng người tiêu dùng, đánh bại các đối thủ cạnh tranh và để làm hài lòng Google, trang web của bạn sẽ cần tải xuống dưới một giây. Và bạn sẽ cần đến đó nhanh, nếu không, đối thủ của bạn có thể đánh bại bạn về đích.

Âm thanh không thể? Hiệu suất web không còn là một nghệ thuật, mà là một khoa học.

Vào ngày 24 tháng 4, tôi đã kiểm duyệt một  hội thảo trực tuyến SEJ ThinkTank do Jono Alderson , Ops đặc biệt tại Yoast trình bày.

Alderson đã chia sẻ các mẹo, thủ thuật, công cụ và chiến thuật hàng đầu mà bạn cần để tăng tốc trang web của mình.
Cách tối ưu hóa tốc độ trang web của bạn: Mẹo & công cụ hàng đầu
Đây là một bản tóm tắt của bài thuyết trình.

Người dùng mong đợi nhanh - một trang web nhanh, một ứng dụng nhanh, trải nghiệm kỹ thuật số nhanh. Mối quan hệ giữa hiệu suất web và hành vi người dùng được hỗ trợ bởi nhiều nghiên cứu.
  • Một nghiên cứu của Google cho thấy sự chậm trễ hơn 3 giây có thể dẫn đến việc từ bỏ hơn 50% .
  • Vào năm 2014, một nghiên cứu đã tiết lộ rằng 47% mọi người mong đợi một trang web sẽ tải trong vòng chưa đầy 2 giây.
  • Radware phát hiện ra rằng 20% người dùng từ bỏ giỏ hàng của họ nếu quá trình giao dịch quá chậm.
Thời gian là tiền bạc và mỗi mili giây có thể khiến bạn mất phí hoặc chuyển đổi. Mọi người thiếu kiên nhẫn và sự chậm trễ làm giảm khả năng họ chi tiêu, chuyển đổi hoặc hành động.

Các số liệu thống kê được đề cập là từ năm 2014. Đó là khoảng thời gian rõ ràng rằng tốc độ trang web là một vấn đề lớn.

Theo logic đó, chúng ta nên đứng đầu về điều này và đóng đinh nó. Nhưng hóa ra, đó không phải là trường hợp thực sự.

Bảng này, hiển thị dữ liệu từ Điểm chuẩn Công nghiệp của Google về Tốc độ trang di động , cho chúng tôi biết số giây cần cho một trang web cho một trang web trung bình ở các lĩnh vực khác nhau và các quốc gia khác nhau để hoàn tất tải trên điện thoại di động trên kết nối 3G.

Giây để tải trên kết nối 3g
Các trang web này mất hơn tám giây để tải, cực kỳ chậm.

Chúng tôi biết người dùng không thích loại trải nghiệm này và mức độ ảnh hưởng của nó đến các chuyển đổi, vì vậy Google đã đưa vấn đề vào tay của chính họ.

Tốc độ trang web của Google
Bây giờ thế giới đang thay đổi chủ yếu bởi vì Google, với tư cách là một cường quốc về ảnh hưởng và quyền lực, đã trở nên rất quan tâm đến tốc độ - và vì một loạt các lý do khác nhau.

Đầu năm 2018, Google tuyên bố họ coi tốc độ quan trọng như thế nào và rằng nó chính thức trở thành yếu tố xếp hạng cho các tìm kiếm di động bắt đầu từ tháng 7 năm đó.

Lời khuyên của công cụ tìm kiếm?
Chúng tôi khuyến khích các nhà phát triển suy nghĩ rộng rãi về hiệu suất ảnh hưởng đến trải nghiệm của người dùng trên trang của họ và xem xét nhiều số liệu về trải nghiệm người dùng.
Những gì Google chủ yếu nói ở đây là tốc độ củng cố trải nghiệm người dùng .

Khi bạn đang duyệt, cố gắng tải trang hoặc kênh của mình hoặc thêm sản phẩm vào giỏ hàng, điều đó xảy ra nhanh như thế nào là một thành phần rất lớn trong tổng thể UX.

Đối với Google, tốc độ = hiệu quả. Và khi các trang web trở nên nhanh hơn, chậm sẽ cảm thấy chậm hơn.

Người tiêu dùng kỳ vọng 'sẽ tăng lên và những trải nghiệm nhanh nhất, tốt nhất mà họ có sẽ trở thành kỳ vọng của họ đối với tiêu chuẩn.

Vậy, chúng ta cần phải làm gì?

Tiếp cận tối ưu hóa tốc độ

Bí mật là không  thực hiện một dự án phát triển web lớn.

Trong tối ưu hóa tốc độ, bạn sẽ giành được hàng ngàn điều chỉnh - bây giờ và mỗi ngày, mãi mãi. Bạn sẽ cần tìm các bit quan trọng và làm cho chúng nhanh hơn.

Tại trung tâm của tối ưu hóa tốc độ, bạn cần hiểu hai sự thật cơ bản:
  • Không có thứ gọi là tốc độ .
  • Điều duy nhất quan trọng là nhận thức về tốc độ.

Không có thứ gọi là tốc độ

Khi bạn bắt đầu khám phá điều này, sẽ rất khó để trả lời câu hỏi, Làm thế nào để bạn đo tốc độ ?

Làm thế nào để bạn đặt một số liệu so với trang web của bạn nhanh như thế nào?

Có lẽ bạn có thể bắt đầu bằng cách nói rằng Thời gian cần bao lâu để một trang hoàn tất tải.

Nhưng điều đó có nghĩa gì?

Điều gì sẽ xảy ra nếu máy chủ phản hồi nhanh chóng, nhưng sau đó phải mất nhiều thời gian để hiển thị nội dung?

Điều gì xảy ra nếu trang có các thành phần chỉ tải khi bạn tương tác hoặc cuộn? Có phải họ đã hoàn thành

Chúng ta cần định nghĩa tốt hơn để hiểu chúng ta đang làm tốt như thế nào.

Hầu hết các số liệu chứng khoán từ các công cụ kiểm tra tốc độ và tối ưu hóa đều thiếu sót và được thiết kế để mang lại cho bạn cảm giác thoải mái giả tạo.

Cho đến gần đây, công cụ PageSpeed ​​Insights của Google cũng vô nghĩa như vậy. Điểm số thực sự không đo được tốc độ và các biểu đồ rất tệ bởi vì việc đo lường đối thủ cạnh tranh chậm khiến bạn tự mãn.

Khi Google cập nhật công cụ, nó đã thêm số liệu Sơn nội dung đầu tiên :
Tiết lộ báo cáo thời gian khi trình duyệt lần đầu tiên hiển thị bất kỳ văn bản, hình ảnh nào (bao gồm cả hình nền), canvas không trắng hoặc SVG. Điều này bao gồm văn bản với các webfont đang chờ xử lý. Đây là lần đầu tiên người dùng có thể bắt đầu tiêu thụ nội dung trang.
Nói cách khác, làm thế nào nhanh chóng chúng ta có thể hiển thị một cái gì đó thú vị?

Bao nhiêu mili giây cho đến khi chúng ta có thể đặt một cái gì đó lên màn hình trông giống như nó đang làm gì đó thay vì có một trang trắng trống chỉ với một biểu tượng quay tròn hoặc tải?

Làm thế nào nhanh chóng chúng ta có thể làm cho nó trông giống như nó đang xảy ra? Đối với nhiều người đó sẽ là hình ảnh anh hùng ở đầu trang, logo hoặc thanh điều hướng.

Nếu bạn có thể tối ưu hóa trang web của mình theo cách bạn tải các bit quan trọng trước với độ trễ tối thiểu (và sau đó lo lắng về việc tải tất cả các nội dung khác sau), thì cảm giác sẽ nhanh hơn nhiều.

Điều này hoạt động bởi vì chờ đợi mà không có phản hồi trực quan là loại chậm nhất tồi tệ nhất.

Tối ưu hóa cho Sơn nội dung đầu tiên sẽ làm cho trang web của bạn trông và cảm thấy nhanh hơn.

Điểm số của bạn có thể không thay đổi nhiều, nhưng mục tiêu không phải là tối ưu hóa cho điểm số. Chỉ cần làm cho nó nhanh hơn.

Điều duy nhất có vấn đề là nhận thức về tốc độ

Tài liệu riêng của Google nói điều này nhiều.
Tải không phải là một khoảnh khắc duy nhất trong thời gian - đó là một trải nghiệm mà không một số liệu nào có thể nắm bắt được. Có nhiều khoảnh khắc trong quá trình trải nghiệm tải có thể ảnh hưởng đến việc người dùng có cảm nhận được đó là một cách nhanh chóng hay không.
Tuy nhiên, bất kể trang web của bạn là gì, bạn thuộc lĩnh vực nào hoặc hoạt động như thế nào, có một khoảnh khắc vàng mà bạn có thể muốn đo lường. Đã đến lúc tương tác .

Số liệu Thời gian để Tương tác (TTI) đo lường mất bao lâu để một trang trở nên tương tác.

Nói một cách đơn giản, làm thế nào nhanh chóng chúng ta có thể làm cho nó cảm thấy sẵn sàng ?

Nếu có một điều cơ bản quan trọng cần hiểu ở đây là không có khả năng Google đang đo cụ thể tốc độ trang thực tế.

Điều họ quan tâm hơn nhiều là nhận thức về tốc độ. Nếu bạn tạo một trang web nhanh như chớp mà tải chậm, bạn đã lãng phí rất nhiều thời gian và tiền bạc.

Cần nhấn mạnh vào:
  • Làm thế nào để chúng tôi hiển thị một cái gì đó nhanh chóng?
  • Làm thế nào để chúng ta làm cho nó cảm thấy sẵn sàng?
Thách thức là tốc độ nhận thức rất khó để định lượng. Có rất nhiều bộ phận chuyển động trong hệ sinh thái đó.

Nhưng tin tốt là tối ưu hóa hiệu suất bây giờ là một khoa học. Có các quy tắc cứng, quy trình, hướng dẫn và kỹ thuật bạn có thể làm theo để đạt được điều này.

Mỗi trang web trên thế giới có thể tải trong chưa đầy một giây. Bạn chỉ cần làm theo các quy tắc.

Rất may, Google cung cấp một loạt các tài liệu vào chủ đề.

Bạn bắt đầu từ đâu?

Bạn cần bắt đầu bằng cách tìm những thứ chậm. Mặc dù các công cụ không tốt để cung cấp cho bạn các số liệu theo thời gian, nhưng chúng thực sự tốt trong việc phát hiện các vấn đề.

Điều có ảnh hưởng nhất mà bạn có thể tìm hiểu về tối ưu hóa tốc độ là xem xét cách tải trang và tìm hiểu những gì đang chờ đợi những thứ khác.

Nếu bạn có thể loại bỏ các nút thắt đó, thay đổi thứ tự cách mọi thứ tải vào và khiến chúng tải cùng một lúc thay vì một lần, thì mọi thứ khác sẽ xảy ra sớm hơn.

Một điều khác cần nhớ là Google đang theo dõi, đo lường và phân tích các trang web theo cách đầu tiên trên thiết bị di động. Nhiều người dùng của chúng tôi đang sử dụng thiết bị di động và đó là điểm đau đặc biệt chậm.

Không có viên đạn nhiệm màu. Chúng tôi đang trên hành trình của 1.000 điều chỉnh.

Đây là những gì bạn có thể bắt đầu làm ngày hôm nay, thay vào đó.

Mẹo hàng đầu để cắt ngắn tốc độ

Tải ít thứ hơn

Bạn có thể muốn xem xét giảm bớt các yếu tố trang web của bạn.

Một số điều cần xem xét:

Khái niệm cơ bản
  • Plugin, tiện ích mở rộng và tích hợp
  • Byte được chuyển
  • Độ phức tạp DOM
  • Phông chữ
  • Màu sắc, chi tiết, biểu tượng, đường, viền, bóng
  • JavaScript
Nâng cao
  • Tải nhanh, tải chậm hoặc không đồng bộ tài nguyên
  • Giảm tài nguyên tên miền
  • DNS và tải trước tài sản / tải trước
Dọn dẹp CMS của bạn
Sử dụng plugin, tiện ích mở rộng và tích hợp để đo lường.

Sử dụng gì:  Màn hình truy vấn , Di tích mới

Bolt trên CDN (Cloudflare)

Nâng cao
  • Quy tắc trang
  • Công nhân cạnh
  • Đẩy máy chủ
Sử dụng gì: https://www.cloudflare.com/

Nhận Hosting tốt

Bạn cần thực hiện nghiên cứu của riêng mình để tìm một công ty lưu trữ tốt nhưng dưới đây là một vài đề xuất:

Sử dụng bộ đệm trang tĩnh
Thay vì mọi người dùng kích hoạt trang web của bạn tải lên để yêu cầu tất cả các chủ đề và plugin của nó trải qua quá trình đó để thao túng kết quả, tại sao bạn không lưu trang đó và kết quả hoặc lưu truy vấn cơ sở dữ liệu đó và bất cứ điều gì nó nói.

Điều này không dành cho tất cả mọi người. Nếu bạn muốn có một chiến thắng dễ dàng và bạn đang ở trên một trang web đơn giản, đây có thể là một sửa chữa tốt cho bạn.

Sử dụng gì:  WP Rocket hoặc Total Cache cho WordPress, Redis , Varnish Cache

Tối ưu hóa tài nguyên của bạn
Cân nhắc tối ưu hóa hình ảnh của bạn bằng các công cụ như TinyPNG hoặc Squoosh .

Bạn cũng có thể làm một số điều nâng cao, chẳng hạn như:
  • Giảm tải phương tiện, ví dụ, Amazon S3.
  • Sử dụng CDN hình ảnh như Cloudinary hoặc Imgix.
  • Mô-đun CSS và JavaScript.
Sử dụng AMP (?)
Dự án AMP, cốt lõi, là một nỗ lực để khắc phục sự cố và chậm Internet như thế nào, đặc biệt là web di động.

Thay vì xây dựng mẫu của bạn với HTML, JavaScript và CSS bình thường, bạn có thể muốn sử dụng khung AMP. Trang web của bạn sẽ nhanh, tuy nhiên, bạn sẽ bị hạn chế bởi các nguyên tắc và hạn chế của họ.

Về mặt kỹ thuật phức tạp hơn để tùy chỉnh đặc biệt thông qua JavaScript tùy chỉnh nên tất cả quảng cáo, phân tích, v.v. của bạn sẽ bị hạn chế.

Điều đó nói rằng, nó đáng để xem xét.

Sử dụng gì: Phần mềm bổ trợ chính thức của WordPress AMP WordPress

Những việc khác bạn có thể làm
Ngoài các mẹo và thủ thuật được đề cập ở trên, bạn cũng có thể thử:

Canonical AMP
Cải thiện tương tác sau tải
Những cách nghĩ mới về CSS
Hỏi và đáp
Đây chỉ là một số câu hỏi của người tham dự được trả lời bởi Alderson.

H: Google đang đẩy các trang AMP cho thiết bị di động nhưng với tư cách là nhà thiết kế, tùy chọn này khá hạn chế. Bạn có đề nghị rằng chúng tôi cho tuyến AMP cho các tùy chọn tải di động không?

Trả lời : Như chúng tôi đã đề cập, việc áp dụng AMP là một quyết định lớn .

Về những hạn chế trong thiết kế, tôi sẽ xem amp.dev (được xây dựng bằng mã AMP!) Và đọc một số thông báo gần đây của họ cho AMPConf.

Họ đã xóa một số hạn chế trước đây (giờ đây, JS tùy chỉnh đã được hỗ trợ) và họ thậm chí còn có kế hoạch linh hoạt hơn về các giới hạn CSS 50kb.

Hiện tại cũng có rất nhiều thành phần sẵn có cho các yếu tố UI thực hành tốt nhất, v.v. Thật đáng để đi và khám phá.

Q: WordPress so sánh với các nền tảng khác như Wix như thế nào?

Trả lời: Tôi rõ ràng là một mọt sách WordPress và tôi sẽ vui vẻ nói rằng đó là CMS và sự lựa chọn tốt nhất cho hầu hết mọi trường hợp sử dụng.

Nó không hoàn hảo, nhưng nó kém hơn nhiều so với bất kỳ thứ gì khác ngoài đó. Đừng đi trong vòng một dặm của Wix nếu bạn coi trọng doanh nghiệp, khách hàng hoặc SEO của mình.

H: HTTP / 2 Server Push ổn định như thế nào đối với các trang web sản xuất?

Trả lời : Nó được hỗ trợ rộng rãi và ổn định, tuy nhiên, có một số thách thức và đánh đổi thú vị với bộ nhớ đệm. Bạn cần phải khá cẩn thận khi bạn sử dụng nó, và bạn sử dụng nó để làm gì. Có một bài viết tuyệt vời bạn có thể đọc ở đây .

H: Làm thế nào để chúng tôi chọn những gì tải đầu tiên cho Thời gian để tương tác?

Trả lời : Bạn không thể dễ dàng chọn những gì tải đầu tiên (chắc chắn không phải với một trang web hiện có), nhưng bạn có thể chọn những gì không tải trước.

Bạn có thể sử dụng các kỹ thuật như lười tải hình ảnh của mình (Chrome sẽ sớm nhận được hỗ trợ gốc!), Trì hoãn JavaScript hoặc tải các tập lệnh không đồng bộ. Điều đó sẽ di chuyển chúng ra khỏi đường cho tải ban đầu.

Thật thú vị, các trình duyệt cũng ngày càng thông minh hơn trong việc tự động hóa việc này. Chrome thực hiện tốt việc ưu tiên những thứ có thể nhìn thấy, những thứ có tầm quan trọng cao, v.v.

Tất nhiên, không phải lúc nào nó cũng đúng, vì vậy, đáng để kiểm tra lại cách tất cả CSS, tập lệnh và phông chữ của bạn tải.

H: Có thể kiểm tra xem bạn có trên HTTP2 hay không?

A : Vâng, đúng vậy! https://http2.pro/check?url=https%3A//yoast.com/

Q: Việc sử dụng hình ảnh ở các định dạng thế hệ tiếp theo quan trọng như thế nào?

A: Câu hỏi tuyệt vời! Các định dạng hình ảnh mới thường nhỏ hơn, nhanh hơn và tốt hơn. WebP là một ví dụ tuyệt vời; nó thường tốt hơn JPG hoặc PNG. Nhưng, hỗ trợ không phải là phổ quát.

Có những kỹ thuật bạn có thể sử dụng để phát hiện xem người dùng có hỗ trợ hay không, và nếu không, hãy quay lại định dạng bình thường. Nhưng điều đó có nghĩa là bạn phải tạo, lưu trữ và duy trì hai phiên bản của mọi tài sản. Ngoài ra, Cloudflare thực hiện tất cả điều này một cách tự động!

Q: Bạn có thể vui lòng nói thêm một chút về cách tự động lưu trữ các trang không? Điều gì có lợi thế lớn khi làm điều đó?

A: Khi bạn tải một trang, một tấn các quá trình xảy ra. CMS của bạn thức dậy, thực hiện các truy vấn đến cơ sở dữ liệu, tính toán nội dung cần thiết để hiển thị cho bạn, v.v ... Tất cả điều này cần có thời gian.

Nhưng đối với hầu hết khách truy cập của bạn và hầu hết thời gian, kết quả của tất cả các tính toán này là như nhau. Bộ đệm trang tĩnh chỉ lưu đầu ra - trang HTML cuối cùng - và thay vào đó phục vụ cho người dùng.

Nếu bạn thay đổi điều gì đó về trang của mình (ví dụ: bạn cập nhật một bài đăng trong WordPress), bộ đệm được cấu hình tốt sẽ 'thanh lọc' phiên bản tĩnh của trang đó và cập nhật nó với một bài mới.

Nó cũng sẽ phát hiện nếu bạn đăng nhập và bỏ qua các trang được lưu trong bộ nhớ cache của nó nếu có. WP Rocket và W3 Total Cache thực hiện tất cả những điều này thực sự tốt, khá nhiều.

H: Có bao nhiêu plugin có quá nhiều plugin trên WP hoặc nhiều hơn về chất lượng / kích thước của plugin? Ngoài ra, suy nghĩ của bạn về việc sử dụng Trình xây dựng trang trong WP, cụ thể là Elementor là gì?

A: Đó chắc chắn là về chất lượng / kích thước / tác động. Tôi đã thấy các trang web chạy hơn 50 plugin, tất cả đều phục vụ mục đích và tất cả đều là mục đích hoạt động.

Các plugin không phải là xấu hay chậm - chúng chỉ là các thùng chứa mã và chức năng. Chỉ khi chúng được mã hóa kém hoặc khi có sự chồng chéo giữa chúng (ví dụ: hai plugin làm những việc tương tự, không hiệu quả) thì đó là một vấn đề.

Các nhà xây dựng trang như Elementor có xu hướng thêm rất nhiều trọng lượng, nhưng, họ cung cấp rất nhiều chức năng. Nó luôn luôn là một sự đánh đổi!

H: Chúng tôi sử dụng Sucuri Website Security Pro bao gồm CDN cơ bản. Liệu kết hợp nó với Cloudflare lý tưởng? Một số bài báo nói có, và những người khác thì không nhưng có rất ít người nói về hai công cụ này.

Trả lời: Tôi không quen với cách CDN của họ hoạt động, nhưng thông thường, không nên kết hợp nó.

Cloudflare có thể sẽ ngồi 'trước' trang web của bạn / CDN Sucuri của bạn, điều đó có nghĩa là nó có thể hoạt động như mong đợi và chỉ quay lại Sucuri khi Cloudflare 'bỏ lỡ'. Giá trị thử nghiệm, mặc dù!

H: Chiến lược tốt nhất để thử và dọn sạch các trang web WordPress cồng kềnh là gì? Tải tài sản thậm chí không được sử dụng trong lựa chọn mẫu dường như là một vấn đề tốc độ không đổi.

A: Hoàn toàn; thật đáng để đi qua và xem các plugin đang tải những thứ không cần thiết (ví dụ: plugin biểu mẫu liên hệ tải CSS hoặc JS trên các trang mà không có biểu mẫu liên hệ)

Asset CleanUp là một plugin gọn gàng để quản lý các loại kịch bản đó, nếu bạn không muốn lội vào mã.

H: Tôi biết điều này chủ yếu là về các trang riêng lẻ - nhưng tối ưu hóa cấu trúc trang web thì sao? Các trang CSS và JS nặng hơn trước tiên hay không? Ngoài ra, những gì về chuyển hướng?

A: Câu hỏi tuyệt vời - đây là điều tôi nghĩ về rất nhiều. Trong thực tế, tôi đã viết một bài báo gần đây đề xuất (những gì tôi nghĩ là) một cách tiếp cận thực tiễn tốt nhất để tác giả cấu trúc CSS cho các trang web. Đó là - hãy cho tôi biết những gì bạn nghĩ!

H: Nếu tôi sử dụng tên lửa CloudFlare và WP, tôi nên giảm thiểu dịch vụ nào? Cả hai đều có tùy chọn.

Trả lời: Tôi sẽ rời Cloudflare để thực hiện việc thu nhỏ; sau đó bạn sẽ không gây thêm căng thẳng cho máy chủ của bạn.

Trong khi WP Rocket tăng tốc trang web của bạn thông qua một loạt các tối ưu hóa, sẽ tốn thời gian / tài nguyên để làm điều đó - vì vậy, bất cứ điều gì bạn có thể giảm tải cho Cloudflare là một quá trình ít gây căng thẳng cho trang web của bạn!

Q: Chúng tôi có thể nhận thêm thông tin về AMP không?

A: Hoàn toàn, mặc dù tôi khuyên bạn nên đi và thực hiện nghiên cứu của riêng mình, vì đó là một chủ đề khá rộng!

Mời các bạn viết lời bình cho bài viết!

Nhấp bài bình luận SEO