BlogAbout Me

Web Performance Optimization - Tối ưu tốc độ web ra sao và những kinh nghiệm thực tế

Published in Web Development
February 10, 2021
6 min read
February 10, 2021
6 min read

Trong bài viết này mình sẽ tổng hợp những kinh nghiệm khi tối ưu website cùng với đó là những lưu ý cần thiết khi bắt tay vào tối ưu performance cho website.

Performance của website là gì tại sao cần quan tâm tới performance?

Trong kỷ nguyên internet website là một phần không thể thiếu trong mọi hoạt động số. Từ tin tức tới giải trí, mua bán hàng. Tại thời điểm bài viết này (ngày 19/02/2021) thì có ~1.7 tỷ website tồn tại trên không gian mạng và có hơn nửa triệu websites được tạo mới mỗi ngày. Số liệu tôi tham khảo từ websitesetup.org

Một ngày mỗi người chúng ta truy cập hay tìm kiếm hàng chục thậm chí hàng trăm trang web. Do có quá nhiều thông tin nên người dùng ngày càng trở nên thiếu kiên nhẫn và khó tính hơn. Nếu website mất hơn 5s để load thì phần lớn chúng ta sẽ mất kiên nhẫn và thoát ngay lập tức. Do đó để thu hút và tạo trải nghiệm tốt cho người dùng thì việc tối ưu tốc độ load cũng như trải nghiệm của người dùng là một điều rất cần thiết đặc biệt đối với những website có nhiều lượt người truy cập.

Tối ưu performance đặc biệt quan trọng và cần thiết để đảm bảo người dùng của bạn có thể có trải nghiệm tốt nhất trên cả những thiết bị điện thoại (có CPU và power thấp). Việc số lượng người dùng điện thoại ngày càng nhiều và số lượng người dùng truy cập website thông qua di động thì những website cần được tối ưu tốt hơn để đáp ứng lượng người dùng này.

Việc tối ưu performance website nhằm đạt được những mục tiêu cụ thể:

  • Giảm thời gian load trang và giảm thời gian tối thiểu để người dùng có thể tương tác với trang web.
  • Giảm tối đa dung lượng cần thiết để tải thông tin của trang web như ảnh, javascript, css. Chỉ load những nội dung mà người dùng sẽ cần hiển thị ra cho người dùng. Không load các thông tin thừa.
  • Đảm bảo các tương tác trên website được thực hiện nhanh, không giật lag

Từ những mục tiêu đó chúng ta có thể đưa ra các chỉ dẫn để tối ưu tốc độ của website.

Các thành phần tham gia vào quá trình cung cấp nội dung thông tin cho 1 website

Elements of basic website
Elements of basic website

Các thành phần cơ bản cấu thành một website

  • Server: CPU, Database, Ram
  • Static files: images, css, javascript, html
  • Third Party Services: các dịch vụ bên thứ 3 như google analytics, facebook pixel
  • Browsers: desktop browser như chrome, firefox, safari edge hay mobile browser

Việc tối ưu tốc độ load trang đồng nghĩa với các việc cần phải làm:

Tối ưu ở tầng Server

  • Tăng tốc độ phản hồi cho request của người dùng: mỗi request của người dùng đòi hỏi server tính toán xử lý và truy vấn thôgn tin để trả về HTML cho browser. Do đó tối ưu tốc độ phản hồi Server là điều bắt buộc. Các giải pháp caching cho server luôn được ưu tiên hàng đầu.
  • Sử dụng cơ chế nén dữ liệu để giảm dung lượng nội dung truyền tải qua mạng.
  • Sử dụng CDN. Người dùng trang web ở khắp nơi trên thế giới do đó CDN là giải pháp tối ưu để cung cấp nội dung tĩnh javascript, html, css, images tới người dùng nhanh nhất. CDN cũng là cách để tối ưu kích thước, optimze dung lượng và tùy chỉnh kích thước cho người dùng cuối trên nhiều kích thước màn hình khác nhau.

Tối ưu tầng Frontend

  • Optimize HTML: giảm thiểu số lượng dom 1 trang web. Nếu có quá nhiều thẻ dom thì trình duyệt sẽ tốn nhiều thời gian để render hơn. Do đó cần tối ưu số lượng dom và load động nội dung khi cần thiết.
  • Optimze Images: ảnh hiển thị tới người dùng cần sử dụgn ảnh có chất lượng và kích được đã được tối ưu phù hợp với kích thước hiển thị của người dùng. Lazyload ảnh là cách thức để tối ưu dung lượng tải trang. Chỉ load ảnh khi người dùng scroll tới nội dung chứa ảnh đó. Ưu tiên sử dụng svg thay thể cho ảnh nếu có thể. SVG giúp giảm dung lượng ảnh và cho chất lượng tốt nhất.
  • Optimze Javascript: minify and bundle javascript trước khi tải về, code splitting chỉ load script cần thiết, không load tất cả script. Defer load các script không phục vụ việc render Above the fold content và giúp tránh việc block rendering.
  • Optimize css: Minify và bundle css. Hạn chế dung lượng css cho trang web. Hạn chế các thư viện bên thứ 3. Chỉ load css cần dùng, hạn chế load css không dùng đến. Tối ưu css cho Above The Fold content (load inline) và phần còn lại.
  • Optimize Fonts: fonts là phần chiếm nhiều dung lượng trong 1 trang. Áp dụng các chiến lược tối ưng fonts là việc cần thiết.

Đo lường tốc độ load trang như thế nào

Sau khi áp dụng việc tối ưu các thành phần của trang web thì việc quan trọng không thể thiếu là đo lường tốc độ của trang web.

Có rất nhiều công cụ giúp bạn làm việc này. Một trong số đó là công cụ lighthouse của google giúp developer có thể thử nghiệm và đo kết quả này trên trình duyệt local.

Lời kết

Trên đây là những chỉ dẫn cơ bản để bạn có thể bắt tay vào việc tối ưu performance của website. Chi tiết các bước và cách thức tối ưu cho từng thành phần bạn có thể xem trong các liên kết đính kèm dưới cuối bài viết. Hi vọng bạn đã có được những thông tin hữu ích để bắt tay vào việc tối ưu performance website.

Liên kết tham khảo và chỉ dẫn chi tiết


Tags

performancewebdevelopment
Previous
JAMStack - Hãy quên server đi, tất cả những gì chúng ta cần là Javscript + API

Hien Do

Software Engineer

Topics

Book
Web Development
System Design

Related Posts

Web Accessibility
January 09, 2021
8 min
© 2021, All Rights Reserved.