Tối ưu tốc độ tải trang: “mili giây tạo triệu đô $$$” – Fullstack Station

12Chia sẽ

Facebook

Twitter
Tối ưu tốc độ tải trang pagespeed

  • Tối ưu tốc độ tải trang: “mili giây tạo triệu đô $$$”

Đây là bài viết tổng hợp lại kỹ năng và kiến thức trong thực tiễn tối ưu vận tốc mình đã vận dụng và có những thành quả nhất định trên website https://imitsu.jp ( Một website B2B ra mắt / đấu giá dự án Bất Động Sản số 1 Nhật Bản ). Bên cạnh những giải pháp được vận dụng, bài viết cũng tiềm ẩn những thử thách và khó khăn vất vả phải đương đầu. Hãy cùng Fullstack Station cải tổ vận tốc tải trang ( pagespeed ) nhé .Theo góc nhìn của mình thì pagespeed là “ vận tốc tải trang ” đã gồm có vận tốc phản hồi từ sever luôn nhé. Tốc độ phản hồi từ sever tương quan đến nhiều yếu tố khác không nằm trong khoanh vùng phạm vi bài viết này. Còn Pagespeed nói riêng là những gì xảy ra ở trình duyệt web ( browser ) .

Tại sao tối ưu vận tốc tải trang lại quan trọng ?

Tốc độ kiểm tra tại TestMySite của trang https://imitsu.jp/matome/hp-design/

Người sử dụng website cảm thấy hạnh phúc” là tiêu chí cực kỳ quan trọng! Không những có giá trị trực tiếp lên người dùng mà còn ảnh hưởng đến xếp hạng tìm kiếm của Google. Bởi vì Google cũng muốn người dùng hạnh phúc với kết quả tìm kiếm. Nên những trang web có tốc độ nhanh sẽ được Google ưu ái xếp hạng. Việc cải thiện thứ hạng tìm kiếm trên Google là cái kết cực kỳ đáng giá. Điều đó đồng nghĩa với việc website sẽ được nhiều lượt truy cập hơn, việc kinh doanh sẽ trở nên tốt hơn.

Milliseconds Make Millions“, mili giây tạo triệu đô: cứ 0.1 giây cải thiện được thì tỉ lệ chuyển đổi (conversion rate) tăng 8%. Đây là con số không hề nhỏ, và nếu bạn thực hiện tối ưu tốc độ theo bài viết này, bạn sẽ cải thiện ít nhất 0.5 đến 1.5s, tương đương “tỉ lệ chuyển đổi” tăng từ 40%~80%. Woa!!!

Miliseconds Make Milliions

Chú ý: chạy theo thành tích về điểm số của Google sẽ đánh đổi khá nhiều thời gian và công sức. Và đó là một công việc khá dài hơi và có tính chu kỳ. Tuy nhiên, kết quả thì sẽ rất ngọt ngào!

Fullstack Station Tips

Cho dù bạn có làm nội dung và SEO tốt nhưng pagespeed lại chậm thì sẽ tác động ảnh hưởng rất nhiều đến thứ hạng tìm kiếm, cũng như thưởng thức người dùng. Là nguyên do dẫn đến lượng truy vấn thấp. SEO thì tất yếu quan trọng, nhưng góp vốn đầu tư vào tối ưu vận tốc tải trang pagespeed thì hiệu suất cao lâu bền hơn và chắc như đinh có hiệu quả tốt .

Khó khăn và thử thách

Khó khăn

Một điều khá lạ nhưng cũng thường xảy ra là chẳng ai chăm sóc đến pagespeed khi mới tăng trưởng website cả. Chỉ là sau 1 thời hạn thấy thứ hạng tìm kiếm không tăng nổi, hoặc là truy vấn không đạt chỉ tiêu thì chủ doanh nghiệp mới khởi đầu lôi cổ phòng marketing ra, lúc đó chú ý đến pagespeed .

Rất ít chủ quản website quan tâm đến pagespeed, đó chính là khó khăn cho các bạn làm marketing nói chung và lập trình viên nói riêng. Bởi vì các con số của pagespeed gần như không liên quan đến lượt truy cập và thứ hạng tìm kiếm? Hoặc là để đánh giá KPI thì rất khó khăn. Khi bạn cải thiện tốc độ lên, đồng thời thứ hạng tìm kiếm cũng lên, vậy kết quả là do chiến lược SEO, do Google thay đổi thuật toán tìm kiếm, hay do kết quả của pagespeed?

Xác định được quả thật là rất khó, tuy nhiên bạn hãy tin tưởng vào câu “Miliseconds Make Millions” do chính Google đưa ra. Và cũng có tiêu chí xác định ROI (Return On Investment): với các thông số Lượng truy cập, Tỉ lệ chuyển đổi, Giá trị trung bình đơn hàng thì TestMySite sẽ đưa ra con số doanh thu hàng năm (annual revenue) sẽ tăng lên bao nhiêu nếu bạn cải thiện được pagespeed bao nhiêu giây. Đây là phương pháp xác định con số cụ thể biết có xứng đáng đầu tư vào việc cải thiện pagespeed hay không.

Nhưng bạn phải quán triệt một điều là tốc độ tải trang không phải là chiếc đũa thần. Nếu chất lượng nội dung không tốt thì tốc độ tải trang sẽ không có ý nghĩa gì cả. Khi các trang có chất lượng bằng nhau, thì tốc độ tải trang, trải nghiệm người dùng sẽ được ưu tiên trên hệ thống tìm kiếm. Tóm lại, làm người sử dụng hạnh phúc là tôn chỉ cao nhất!

Thách thức

Như đã nói ở trên thì bạn thường bắt tay vào việc cải tổ pagespeed khi website đã đi vào hoạt động giải trí đã lâu. Và vì cũng phải có lượng truy vấn tương đối khá ( nhưng khởi đầu hụt hơi ? ) thì mới xác lập được ROI mà nên thực thi cải tổ pagespeed hay không. Với lý do đó mà tại thời gian bạn mở màn cải tổ thì mạng lưới hệ thống website đã như 1 bãi chiến trường :)). Đó chính là thử thách .Vì nguyên do tăng trưởng, nên thường thì website sẽ đặt tiềm năng về công dụng trước. Còn những mặt khác đều là thứ yếu. Tất nhiên đó là điều dễ hiểu vì nếu không có quá trình đó thì bạn sẽ không có thời cơ cải tổ pagespeed đâu. Tại thời gian này, những quy tắc pagespeed đều chỉ là 1 thứ triết lý suông mà thôi. Bạn phải vắt óc tâm lý làm thế nào phối hợp những quy tắc đó vào mạng lưới hệ thống hiện tại .

Cải thiện pagespeed với công số thấp nhất mà hiệu quả cao nhất. Đó chính là “State of the art” mà bạn phải đối mặt giải quyết. Và đó cũng chính là điều mình hi vọng giúp được các bạn trong bài viết này.

Cách đơn thuần để tối ưu vận tốc tải trang

Sử dụng mod_pagespeed chính chủ Google

Mình đã từng ra mắt về mod_pagspeed để tăng cường pagespeed cho website. Cách này sử dụng cho hiệu quả tốt mà lại thuận tiện. Tuy nhiên chỉ vận dụng với site tĩnh trọn vẹn. Các website có sử dụng form với crsf-token được tạo ra theo trang thì khó đạt tác dụng như mong đợi .Hơn nữa, khi vận dụng thì bạn gần như phụ thuộc trọn vẹn vào những thiết lập và thiết lập. Khó hoàn toàn có thể tự quản lý những nhu yếu tuỳ biến cao. Mình nghĩ chỉ nên sử dụng so với site nhỏ, hoặc site mới đang trong thời kỳ tiến hành. Vì những tham số khá nhiều nên việc thông số kỹ thuật khá khó khăn vất vả. Qua thời hạn tăng cấp, những tập tin css và js được thêm vào nhiều thì rủi ro đáng tiếc sẽ tăng lên. Bởi vì tự động hóa nên cũng có khi có lỗi ngoài tầm trấn áp .Trang fullstackstation.com có hiệu quả 1.8 s / Good trên testmysite cũng đang sử dụng mod_pagespeed. Mình khá hài lòng tác dụng này. Tuy nhiên điểm trên Pagespeed Insights thì vẫn không được cao. Do Google mới biến hóa thuật toán tính điểm .

Sử dụng những framework / plugins tương hỗ tốt về pagespeed

Plugins cho WordPress

Hiện tại Fullstack Station sử dụng wordpress nên mình dùng Autoptimize ( nén js và css thành 1 file ) và Hyper Cache ( tạo cache trang thành html ), phối hợp với mod_pagespeed. Về cơ bản thì những plugin cho wordpress chỉ giúp cải tổ ở một vài quy tắc. Để tối cải tổ vận tốc tải trang thì plugins là chưa đủ .Có rất nhiều plugins cho wordpress cải tổ vận tốc nói chung, nhưng không nằm trong khoanh vùng phạm vi bài viết này. Đơn giản nhất là chỉ cần sử dụng 2 plugins nói trên. Với những website doanh nghiệp, mình khuyến nghị nên dùng bộ lập trình của https://roots.io/. Sử dụng bộ của Roots để tạo theme cũng như quản trị những plugins 1 cách bảo mật thông tin. Khi bạn tự tăng trưởng theme, thì sẽ thuận tiện quản trị những javascript và css hơn .

Các js framework

Với kỹ thuật code splitting, thì những framework hay thư viện tương hỗ dựa trên webpack sẽ giúp vận tốc trang khá tốt. Cơ bản thì sẽ giúp trang tải css và js thiết yếu cho việc render. Ngoài ra còn cải tổ vận tốc rất tốt với kỹ thuật tạo trang html tĩnh và động tương ứng .Điển hình là những js framework như Gatsby. js, Ghost CMS, Next. js, Nuxt. js. Cơ chế trang tĩnh rất quan trọng, để bảo vệ vận tốc tốt nhất. Và cũng cần chính sách tải từng phần như Gatsby để nâng cao thưởng thức người dùng .

Các quy tắc bảo vệ tối ưu vận tốc tải trang tốt

Đơn giản ( nhưng cũng đầy gay cấn ) là bạn sử dụng Lighthouse ngay trên trình duyệt Chrome hoặc dùng Pagespeed Insights để kiểm tra và chẩn đoán từng trang. Các công cụ này sẽ đưa ra những khuyến nghị và chỉ cần làm theo là sẽ cải tổ được .Mình cũng đã phải trải qua hàng trăm lần kiểm tra để đưa ra giải pháp tối ưu nhất cho website imitsu.jp. Và kinh nghiệm tay nghề được rút ra như sau :

  • Tốc độ phản hồi máy chủ nhanh: mỗi request dưới 300ms cho 4G/mobile, 100ms cho desktop, đặc biệt là trang html (Doc).
  • Mỗi request (html, css, js, image): dưới 50kB cho mobile và hạn chế nhất có thể trên bản desktop.
  • Hạn chế số lượng request: dưới 35 requests, càng ít càng tốt
  • Cache Policy: nên để thời gian cache lâu (6 tháng~), khi bạn cần thay đổi thì thêm parameter ở URL hoặc, thay đổi tên file.
  • CDN: những file tĩnh nên sử dụng CDN để tăng hiệu quả tốc độ
  • Sử dụng lazyload: kỹ thuật này giúp browser không tải ảnh khi chưa sử dụng (chưa hiển thị trong viewport)
  • Tối ưu tải css và javascript: css ở head và javascript file thì ở dưới phần footer, inline phù hợp.
  • Sử dụng worker để xử lý các script, tính toán không cần thiết ở main thread.
  • Sử dụng loại định dạng ảnh mới như WebP, JPEG 2000, …

Trên đây là một số ít quy tắc chủ yếu xoay quanh những tiêu chuẩn :

  • Nhanh nhất có thể
  • Nhỏ, nhẹ nhất có thể
  • Sử dụng đúng nơi, đúng chỗ (không thừa)

Tuy những quy tắc thì nhiều, nhưng tựu chung cũng tập trung chuyên sâu cho những tiêu chuẩn trên. Đảm bảo những tiêu chuẩn trên thì dù Goole có đổi khác những tiêu chuẩn nhìn nhận, thì điểm số vẫn sẽ cao .

Core web vitals

Tối ưu tốc độ tải trang với Core Web VitalsCore web vitals sẽ là tiêu chuẩn quan trọng tác động ảnh hưởng đến xếp hạng tìm kiếm. Do dịch corona nên tiêu chuẩn này được dời lại 1 năm. Năm 2021 sẽ vận dụng Core Web Vitals để nhìn nhận xếp hạng tìm kiếm. Tiêu chí này ảnh hưởng tác động trực tiếp đến thưởng thức người dùng. Vì vậy bạn nên chuẩn bị sẵn sàng cải tổ sớm nhất hoàn toàn có thể. Vào những bài viết sau mình sẽ trình diễn cụ thể hơn về Core Web Vitals .

Testmysite và Pagespeed Insight : ưu tiên tối ưu vận tốc bằng cái gì ?

Sơ lược về TestMySite và Pagespeed Insights

Pagespeed Insights là gì ?Pagespeed Insights là công cụ giám sát vận tốc tải trang pagespeed của một site sử dụng tài liệu thực tiễn của người dùng trên Chrome phối hợp tài liệu từ Lab ( công cụ kiểm tra như Lighthouse ). Từ hiệu quả giám sát, Pagespeed Insights sẽ đưa ra những chẩn đoán và khuyến nghị giúp tối ưu vận tốc tải trang / pagespeed .

First Contentful Paint (FCP) 15%
Speed Index 15%
Largest Contentful Paint (LCP) 25%
Time to Interactive 15%
Total Blocking Time 25%
Cumulative Layout Shift (CLS) 5%

Các tiêu chí đánh giá chính của Pagespeed Insights (Lighthouse 6)

Nhìn vào bảng biểu trên thì dễ dàng nhận ra Largest Contentful Paint (LCP) Total Blocking Time là 2 tiêu chí có trọng số cao nhất. Đó cũng chính là tiêu chí nên tập trung giải quyết, sẽ được đề cập chi tiết trong các bài viết sau. Pagespeed Insights sử dụng Lighthouse để kiểm tra, nên bạn chỉ cần sử dụng Lighthouse và làm theo các khuyến nghị tối ưu tốc độ là được. Kết quả điểm số ở Lighthouse sẽ có chênh lệch so với Pagespeed Insights, cũng như chính bản thân Pagespeed Insights qua các lần kiểm tra khác nhau. Lý do là tốc độ kết nối vào máy chủ trang web tuỳ thuộc vị trí địa lý mà bị ảnh hưởng, A/B Test hoặc quảng cáo trên trang.

Testmysite là gì ?

TestMySite là công cụ đo lường tốc độ tải trang thực tế trên điện thoại di động, đo lường chính ở tốc độ 4G hoặc 3G cho các nước chưa phổ biến 4G, hoặc đối tượng sử dụng trang web đó chỉ sử dụng mạng 3G. TestMySite cung cấp báo cáo dành riêng cho người làm tiếp thị (marketing) hoặc lập trình viên là khác nhau. Với mục đích cho người đọc báo cáo dễ hiểu, chứ các nguyên tắc cơ bản chủ yếu thì vẫn như phần trên mình đã trình bày.

Ngoài thông số kỹ thuật vận tốc tải trang cho toàn site ( thống kê theo tháng ), TestMySite có 3 công dụng hầu hết như sau :

  • Cho phép kiểm tra tốc độ tải trang ở kết nối 4G từng đường dẫn URL riêng biệt, tối đa 10 đường dẫn
  • So sánh số liệu với trang web đối thủ
  • Cung cấp số liệu tính toán ROI

Nên ưu tiên Testmysitehay Pagespeed Insights ?

Về cơ bản thì 2 công cụ này cùng phản ánh kết quả của pagespeed. Mặc dù thông số có khác nhau, nhưng mình đánh giá TestMySite tốt hơn ở góc độ thống kê hàng tháng theo thời gian (giây). Bạn sẽ biết được site của mình trong tháng trước đó nhanh hơn hay chậm hơn. Còn Pagespeed Insights cũng có thống kê nhưng là có đạt chuẩn của “Core web vital” hay không.

Theo kế hoạch “ Mobile First ” mà hầu hết mọi người đang hướng tới, thì TestMySite đánh đúng trọng tâm hơn. Còn Pagespeed Insights không có hiệu quả toàn site, nên cũng ít ý nghĩa hơn. Hơn nữa thì hiệu quả của Pagespeed Insights cũng trùng lắp với Lighthouse, nên nếu bạn đã cải tổ theo Lighthouse thì tác dụng tối ưu vận tốc cũng sẽ được phản ánh tốt trên Pagespeed Insights. Và cũng phản ánh lên TestMySite .

Fullstack Station Tips

  • Bóp băng thông: thông số 4G dùng để test của Google là 1,638.4 Kbps, với độ trễ là 150 ms. Vì vậy khi bạn test phiên bản mobile, phải dùng thông số này thì mới chính xác. Mặc dù tốc độ xử lý của CPU vẫn mạnh hơn nhiều so với Moto G4.
  • Tốc độ của máy chủ, dung lượng từng tập tin và số lượng request là rất quan trọng. Thông số tối ưu là dưới 100ms cho trang (HTML) với dung lượng ~50kB, và ~35 requests cho toàn bộ hình ảnh, css, js. Mỗi tập tin đều dưới 50kB là lý tưởng, dưới 100kB là chấp nhận được.
  • Đừng quá phụ thuộc vào bất kỳ 1 công cụ nào để đánh giá hiệu suất website. Luôn sử dụng các công cụ kiểm tra tốc độ khác nhau như Pingdom hay GTMetrix để kiếm tra chúng ta áp dụng có hiệu quả hay không.
  • Điểm số tầm 75 ~cho mobile và

    85~

    cho desktop là một kết quả khá tốt. Nếu bạn tập trung vào điểm số quá nhiều, chỉ để lên 90 ~ mà bỏ qua các cơ hội phát triển các chức năng khác cho dịch vụ thì không nên cho lắm. Nếu có nhiều nhân lực thì triển khai, không phải suy nghĩ.

Bài viết này đã sơ lược hầu hết những quy tắc thiết yếu để tối ưu vận tốc tải trang pagespeed. Các bài viết sau mình sẽ trình diễn chi tiết cụ thể và những thủ pháp để cải tổ. Các bạn nhớ ĐK theo dõi để xem bài mới sớm nhất nhé .

ĐÁNH GIÁ post
Bài viết liên quan

Tư vấn miễn phí (24/7) 094 179 2255