Hướng Dẫn Tối Ưu Website Đạt 100/100 Google PageSpeed Insights

Tốc độ tải Website là một yếu tố quan trọng để nâng cao trải nghiệm người dùng, và nó cũng là một trong những yếu tố xếp hạng Website trong SEO. Có một sự thật là, với tốc độ phát triển của Internet hiện nay, thật khó để người dùng chấp nhận cảnh phải chờ đợi hơn 5 giây để tải trang. Điều này cũng đồng nghĩa, nếu trang Web của bạn không tải đủ nhanh, thì nguy cơ mất đi khách hàng tiềm năng cũng khá cao.

Với hơn 50% traffic online đến từ thiết bị di động, mọi người đều mong đợi một trang Web sẽ được tải ngay lập tức. Với tiêu chí như vậy, ở bài viết này, Tiện Ích Seo sẽ hướng dẫn người dùng làm thế nào để đạt 100/100 điểm Google PageSpeed Insights Tool cho cả 2 giao diện Desktop và Mobile.

Tiến hành :

Mặc dù Website của chúng tôi đã load khá nhanh, nhưng người viết nhận ra vẫn còn nhiều cách để cải thiện tốc độ này thêm nữa. Điểm số lúc này đang là 87/100. Và dưới đây là kết quả sau khi đã áp dụng một số kỹ thuật mà chúng tôi sẽ tiếp tục chia sẻ.

google pagespeed insight Hướng Dẫn Tối Ưu Website Đạt 100/100 Google PageSpeed Insights

Làm thế nào để giúp Page load nhanh hơn :

Trước khi bắt đầu thực hiện, chúng ta cũng cần xác định rõ ràng rằng, Google PageSpeed Insights Tool chỉ là một tool để test website, đưa ra những lời khuyên để cải thiện hiệu suất Web tốt hơn.

Một số bước thực hiện yêu cầu người dùng cần có kiến thức về kỹ thuật, một số khác thì không. Hầu hết CMS đều có thể làm được những thao tác này.

Bước 1 : Tối ưu hình ảnh :

optimize images Hướng Dẫn Tối Ưu Website Đạt 100/100 Google PageSpeed Insights

Công cụ PageSpeed Insights Tool yêu cầu người dùng giảm kích thước file để tối ưu tốc độ tải trang. Có 2 cách chính để thực hiện :

Nén tất cả hình ảnh sử dụng tool như Compressor.ioTinyPNG. Những tool này đều free và có thể giảm dung lượng hình ảnh đến hơn 80% trong nhiều trường hợp, mà không làm ảnh hưởng đến chất lượng hình ảnh.

Giảm kích thước của Size đến đúng kích thước tối thiểu mà không làm giảm chất lượng hình ảnh. Ví dụ, nếu muốn một bức hình 150×150 pixel hiển thị lên Website, thì độ phân giải cho bức hình đó cũng là 150×150 pixel khi upload lên server. Không nên upload hình ảnh có độ phân giải lớn hơn độ phân giải muốn hiển thị trên website, hoặc dùng HTML hoặc CSS để resize nó.

Với những hình ảnh chưa được tối ưu, chúng tôi đã tải xuống, sau đó resize và nén thủ công. Sẽ thật tốt nếu chúng ta giữ được thói quen tối ưu hóa hình ảnh trước khi upload lên server.

Google cũng cung cấp tùy chọn cho phép download những hình ảnh đã được tối ưu hóa, và bạn chỉ cần upload chúng lên Server. Bạn cũng có thể thực hiện tương tự với CSS và JavaScript.

optimize html Hướng Dẫn Tối Ưu Website Đạt 100/100 Google PageSpeed Insights

Bước 2 : giảm thiểu JavaScript và CSS

minify javascript Hướng Dẫn Tối Ưu Website Đạt 100/100 Google PageSpeed Insights

Như đã thấy, Google đã thông báo với chúng ta rằng hãy tối giản lại cho những trang JavaScript and CSS. Qúa trình tối giản sẽ làm giảm kích thước file của bạn bằng cách loại bỏ các khoảng trắng, kí tự, comment không cần thiết khỏi các file CSS và JavaScript.

Các lập trình viên thường để lại nhiều khoảng trống và comment khi viết code. Những thứ dư thừa này thậm chí có thể tăng gấp đôi kích thước tệp CSS và JavaScript của bạn.

optimize css Hướng Dẫn Tối Ưu Website Đạt 100/100 Google PageSpeed Insights

Để giải quyết vấn đề này, chúng tôi đã cài đặt công cụ Gulpjs vào server. Tool sẽ tự động tạo một file CSS mới và bỏ toàn bộ khoảng trắng. Nó cũng tự động tạo một tệp CSS mới cho tất cả các thay đổi mà bạn đang thực hiện. Trong trường hợp của chúng tôi, nó đã giúp giảm kích thước tệp CSS chính từ 300kb xuống 150kb. Điểm khác biệt nằm ở những kí tự không cần thiết.

Nếu đang sử dụng WordPress, người viết đề xuất bạn sử dụng Plugin Autoptimize.

Bạn cũng có thể download file đã tối ưu hóa từ công cụ PageSpeed. Hình dưới là ví dụ cho kết quả tối ưu thành công file CSS và JavaScript.

minify javascript Hướng Dẫn Tối Ưu Website Đạt 100/100 Google PageSpeed Insights

Bước 3 : Tận dụng bộ nhớ đệm trình duyệt :

browser caching Hướng Dẫn Tối Ưu Website Đạt 100/100 Google PageSpeed Insights

Đối với nhiều quản trị Web, thì sử dụng bộ nhớ đệm trình duyệt là một trong những công đoạn khó khăn nhất. Để khắc phục sự cố này, chúng tôi đã chuyển mọi tệp thống kê từ trang web của chúng tôi sang CDN  (mạng phân phối nội dung).

Mạng CDN là một mạng lưới các máy chủ được đặt tại nhiều địa điểm khác nhau trên thế giới. Chúng có khả năng lưu trữ các yếu tố tĩnh của Website, như là hình ảnh, CSS, JavaScript. CDN lưu giữ các bản copy nội dung Website của bạn trên các máy chủ của nó, và khi ai truy cập vào website của bạn, thì phần nội dung tĩnh sẽ được tải từ máy chủ gần họ nhất.

Lấy ví dụ, nếu server chứa Website đặt tại Texas, khi không có CDN, thì người duyệt tại Việt Nam phải đợi để tải file từ Mỹ về. Nếu có CDN, thì website sẽ có thể load từ những máy chủ gần với người dùng nhất. Nhờ thế, cải thiện được tốc độ tải trang của Website.

Chúng tôi đã tiến hành di chuyển tất cả hình ảnh, JavaScript, và CSS file lên CDN và chỉ giữ duy nhất HTML file trên server chính.  Đặt hình ảnh lên CDN sẽ giúp cải thiện rõ rệt tốc độ tải trang.

Sau khi thực hiện, PageSpeed vẫn gợi ý rằng, người quản trị đã sử dụng cache trình duyệt của bên thứ 3. Đây là ảnh chụp màn hình :

cdn Hướng Dẫn Tối Ưu Website Đạt 100/100 Google PageSpeed Insights

Vấn đề social media script này được xử  lý bằng cách thay thế bộ đếm bằng các hình ảnh tĩnh được host trên CDN. Thay vì sử dụng Script của bên thứ 3, cố gắng truy cập data Twitter, Facebook, hoặc Google Plus để đếm số người theo dõi, chúng tôi đã tự lưu trữ chúng và khắc phục sự cố. Và thêm một vấn đề nữa có thể làm chúng ta bực bội, đó là Google Analytics cũng có thể làm chậm trang web.

Tất nhiên, chúng ta sẽ không thể xóa mã Google Analytics, vì vậy cách giải quyết là phải tìm ra một phương án khác. Trung bình mỗi năm, mã Analytics được Google điều chỉnh từ một đến hai lần. Do đó, Razvan đã tạo một script chạy mỗi tám giờ để xác minh khi mã Analytics được điều chỉnh lần cuối. Đoạn Script sẽ download mã Analytics xuống và so sánh với mã cũ để tìm ra sự thay đổi. Bằng cách này, chúng ta có thể lưu trữ mã JavaScript của Google Analytics trên server của mình mà không phải tải về từ Google server mỗi khi load trang.

Nếu không có thay đổi nào xảy ra, thì mã Analytics sẽ load từ CDN Server. Khi Google có điều chỉnh JavaScript một lần nữa, thì server của chúng ta sẽ tự động download và upload nó lên server của CDN.

Dưới đây là một Screenshot chụp từ Pingdom Tools, hiển thị tất cả mọi thứ được load từ CDN, bao gồm cả Analytics code. File duy nhất được load từ server của chúng ta, là file Homepage, với dung lượng chỉ 15,5 KB.  Loại bỏ tất cả các tập lệnh của bên thứ ba cải thiện đáng kể tốc độ tải tổng thể.

Pingdom Tools Hướng Dẫn Tối Ưu Website Đạt 100/100 Google PageSpeed Insights

Bước 4 : Loại bỏ render-blocking resources above the fold :

render-blocking  Hướng Dẫn Tối Ưu Website Đạt 100/100 Google PageSpeed Insights

Loại bỏ render-blocking cũng là một trong những bước phức tạp nhất để cải thiện tốc độ load page, vì nó đòi hỏi nhiều kiến thức về kỹ thuật. Vấn đề mà chúng ta cần giải quyết đó là loại bỏ toàn bộ code JavaScript nằm ở header, body chuyển sang cho footer trên toàn trang Web.

Nếu sử dụng WordPress, thì Plugin Autopmize mà người viết đã đề xuất ở trên sẽ giúp bạn thực hiện công việc này. Kiểm tra phần setting của Plugin, sau đó bỏ check “Force JavaScript in <head> “ và check vào “Inline all CSS.”

Bước 5 : Enable compression :

enable compression Hướng Dẫn Tối Ưu Website Đạt 100/100 Google PageSpeed Insights

Triển khai enable compression có thể được thực hiện một cách đơn giản trên phần cài đặt của Server. Nếu không rành về kỹ thuật, bạn có thể nhờ bộ phận kỹ thuật hỗ trợ nén GZIP cho server.

Bước 6 : Tối ưu trải nghiệm mobile :

Trải nghiệm di động có thể hiểu nôm na là website của bạn có thể hiển thị tốt trên tất cả các kích thước, độ phân giải của màn hình thiết bị di động, font chữ chính xác, và hệ thống điều hướng tốt.

web reponsive Hướng Dẫn Tối Ưu Website Đạt 100/100 Google PageSpeed Insights

Bạn có thể test xem website của mình hiển thị như thế nào trên di động bằng cách sử dụng Google Chrome. Bấm vào menu 3 chấm bên góc phải phía trên màn hình, di chuyển đến “More Tools – Developer Tools.” Ở  bên trái, bạn có thể xem website của mình trông như thế nào trên các phiên bản mobile.

Tổng kết :

Trên đây là một số bước quan trọng mà chúng tôi đã thực hiện để đạt được điểm số 100/100 trên hệ thống đánh giá của Google’s Speed Tool. Ba thao tác quan trọng nhất mà chúng tôi đã thực hiện để cải thiện Website, đó là :

  1. Sử dụng CDN (content delivery network).
  2. Giaỉ quyết vấn đề render-blocking ( Tránh sử dụng JavaScript ở phần body khi code. Phần code JavaScript này nên được chuyển xuống phía footer )
  3. Tối ưu kích thước và dung lượng file, hình ảnh.

Xem thêm : Những Công Cụ Hỗ Trợ Đo Lường Tốc Độ Website Tốt Nhất