Tối ưu hiệu suất phần 3: Tối ưu JS, CSS.

Như mình có đề cập ở phần một, một hệ thống có hiệu suất thấp còn ảnh hưởng đến cả SEO ranking của hệ thống đó. Vậy làm thế nào để biết được hệ thống đang gặp vấn đề về điểm SEO như thế nào và cách để tối ưu hiệu suất giúp tăng điểm SEO.

Công cụ giúp xác định điểm SEO.

Có nhiều công cụ để xác định điểm SEO của một hệ thống, có thể kể đến như Google PageSpeed, SEO SiteAudit, … một số công cụ thì sẽ đi sâu cả vào những kỹ thuật SEO nằm ngoài phạm vi nôi dung bài viết đề cập đến. Do đó, mình sẽ giới thiệu về công cụ Google PageSpeed.

Giao diện công cụ đơn giản, chỉ cần nhập đường dẫn của hệ thống cần kiểm tra, Google sẽ trả về kết quả phân tích những vấn đề mà hệ thống đang gặp phải, và từ đó chúng ta sẽ có những cách để tối ưu lại hiệu suất về mặt frontend.

Kết quả trả về từ phân tích của Google một số vấn đề nổi bật như:

  • Eliminate render-blocking resources
  • Reduce unused JavaScript
  • Reduce unused CSS
  • Serve images in next-gen formats
  • Ensure text remains visible during webfont load

Phân tích một hệ thống khác, chúng ta có thể thấy được những vấn đề khác như:

  • Reduce initial server response time (phần này liên quan đến việc tối ưu lại backend)
  • Defer offscreen images
  • Reduce the impact of third-party code
  • Does not use passive listeners to improve scrolling performance
  • Reduce JavaScript execution time

Một số hướng xử lý để tối ưu frontend.

Về mặt phát triển nếu sử dụng framework Laravel, chúng ta có thể sử dụng package Laravel mix để build code JS và CSS thành những file build minimize trên môi trường production giúp giảm bớt size của các file JS và CSS sử dụng.

Ngoài ra, trong từng vấn đề mà Google phân tích trả về đều có hướng dẫn chi tiết về cách xử lý các vấn đề đó, chúng ta có thể tham khảo:

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *