Tăng tốc website. Bí kíp tối ưu Web Performance

Tối ưu web performance luôn là một câu hỏi mà bất kỳ lập trình viên nào cũng quan tâm. Có thể nói, công nghệ Web ngày càng phát triển hơn và cho tới ngày hôm nay, chúng ta đã có hàng triệu website trên thế giới và rất nhiều user đang đợi load những website.

Không còn gì khó chịu hơn khi bạn phải ngồi chờ những page này load lâu hơn thời gian dự tính chỉ vì kết nối internet chậm hoặc vì một nguyên nhân nào đó. Theo nghiên cứu, thời lượng quan tâm của user chỉ kéo dài khoảng 5 giây.

Hãy tưởng tượng nếu bạn phải đợi khoảng 3 phút để website đó load, thì chỉ có nghĩa là performance của nó “lởm”, và lượng user chắc chắn sẽ giảm xuống và đó không phải là điều mà chúng ta mong muốn.

Web Performance là tốc độ mà các trang web được tải xuống và hiển thị trên trình duyệt web của người dùng.

Tại sao Performance lại quan trọng?

Web Performance là chủ đề khá thú vị nếu bạn hỏi mình, mình nghĩ nó là một trong những điều và developer nên chú ý, vì sau cùng, chúng ta cũng chỉ build web để user có thể sử dụng bất kể trở ngại hay thách thức nào.

Ngày nay, nhiều user sử dụng Internet với mạng 2G, 3G, 4G và kết nối LTE, còn chúng ta thì phải cố gắng đưa web đến họ trong cùng một tốc độ. Performance cần thiết và quan trọng đối với user của chúng ta vì những lý do sau:

• User là ưu tiên hàng đầu và họ là lý do để chúng ta build lên tất cả từ đầu. Nếu không có user lên webpage, mình chắc chắn là chẳng có lý do gì để lập trình web cả. Vì chúng ta đang làm web cho user, nên user phải là vấn đề để ta cân nhắc trong mọi bước phát triển và mục tiêu hàng đầu là họ có thể sử dụng website của chúng ta một cách thuận lợi nhất.
• Cải thiện tỷ lệ chuyển đổi. Khi website được tối ưu về tốc độ và cách sử dụng, chúng ta sẽ thấy được một lượng traffic duy trì khổng lồ, user sẽ tiếp tục lên web vì họ có trải nghiệm tốt ở lần đầu ghé qua. Nhưng ngược lại, thử nghĩ nếu web của bạn chưa tối ưu Performance, điều gì sẽ xảy ra?

Vậy làm cách nào để đảm bảo được user của mình sẽ vui vẻ lên website của mình và sẽ vui vẻ quay lại vì thích nó và Performance của nó tuyệt vời? Mình sẽ hướng dẫn bạn vài tip và các bước để chúng ta có thể xây dựng web nhanh hơn nhé.

Tăng tốc website

Bỏ bớt HTTP Requests

Có một vài trường hợp, phần lớn thời gian tải web xuất phát từ các HTTP request bên ngoài. Tốc độ tải tài nguyên bên ngoài có thể thay đổi tuỳ theo cơ sở hạ tầng hoặc vị trí máy chủ của nhà cung cấp hosting.

Mục tiêu chung ở đây là đảm bảo rằng chúng ta có thể giảm được các HTTP request bên ngoài, nên chúng ta cần kiểm tra các request này và loại bỏ những tài nguyên không có lợi cho trải nghiệm người dùng như những hình ảnh không cần thiết, code JavaScript và CSS không cần thiết…

Code Splitting và Tree Shaking

Code Splitting và Tree Shaking là 2 kỹ thuật nữa được dùng để cải thiện Performance. Chúng ta phải tách code hay tree shake như thế nào cho đúng? Bạn có thể sử dụng các công cụ như Webpack, Rollup.

Code Splitting là một tính năng cho phép bạn chia code của mình thành nhiều nhóm hoặc thành phần khác nhau, sau đó có thể load theo yêu cầu hoặc load song song, còn Tree Shaking là loại bỏ code không cần thiết hoặc đã chết.

Lazy Loading

Lazy Loading là một mẫu Web Performance làm chậm quá trình load hình ảnh trên trình duyệt cho tới khi nào user cần nhìn hình đó và nó cũng là một cách tuyệt vời để tối ưu Performance. Nó đảm bảo website của bạn không quá cồng kềnh, và user của bạn có thể nhanh chóng download hình mà họ muốn xem.

Xem thêm Lazy Loading là gì.

Defer Scripts

Trì hoãn (defer) một script có nghĩa là chặn nó load đến khi nào mà các phần tử khác đã load hết. Khi bạn defer những file lớn hơn, như Javascript, bạn phải đảm bảo rằng phần còn lại của nội dung của bạn có thể load mà không bị chậm do chờ đợi các file lớn hơn load. Để thực hiện bạn chỉ cần thêm defer trong thẻ script như bên dưới:

  <script defer></script>

Tối ưu hình ảnh

Tối ưu hình ảnh trên web rất quan trọng. Theo HTTP Archive, 61% dung lượng page của website đến từ hình ảnh. Giờ chúng ta không muốn tất cả hình của mình chiếm hết chỗ trống đúng không nào.

CDN

Chúng ta có thể tối ưu đáng kể thời gian load page trên website bằng cách sử dụng Content Delivery Network. Một CDN có thể sử dụng để lưu trữ tài nguyên như hình ảnh và video mà chúng ta thường xuyên load trực tiếp vào webpage.

Khi bạn sử dụng CDN, bạn link nội dung tĩnh trên website của bạn đến một mạng lưới máy chủ mở rộng trên toàn cầu. CDN cho phép người truy cập site của bạn load dữ liệu từ server gần nhất của họ.

Nếu bạn sử dụng CDN, các tệp trên site của bạn sẽ tự động nén để chạy nhanh trên toàn cầu.

Xài Caching

Caching là một kỹ thuật được sử dụng để lưu trữ tạm thời các page của web để giảm băng thông và cải thiện performance. Khi một user ghé qua website của bạn và page đó đã được lưu trữ vào cache.

Một trang được lưu trữ tương tự sẽ hiển thị đến user khi người đó quay lại lần nữa trừ khi nó được đổi kể từ lần lưu trữ cuối cùng. Việc này giúp tiết kiệm thời gian user phải đợi cho page load và làm mọi thứ nhanh hơn.

Prefetch Resources (tìm nạp trước tài nguyên)

Tìm nạp trước tài nguyên có thể cải thiện trải nghiệm dùng web của user và cải thiện đáng kể performance bằng cách tìm nạp các tài nguyên cần thiết và dữ liệu có liên quan trước khi cần đến chúng. Có 3 cách prefetch chính:

• Link Prefetching: Nếu bạn chắc chắn là user sẽ click vào link riêng để điều hướng đến một vài trang, bạn có thể áp dụng cách prefetch này. Phương pháp này hữu ích cho những user có tương tác ổn định, như là chuyển đến trang shopping cart sau khi đã chọn một hoặc một vài món đồ.

<link rel="prefetch" href="/img/cat.png">

• DNS Prefetching: Phương pháp này cho phép trình duyệt phân giải trước tên miền thành địa chỉ IP. Điều này giảm độ delay khi người dùng click vào link với DNS đã được prefetch, họ không cần phải đợi quá trình DNS tra cứu như thông thường.

<link rel="dns-prefetch" href="https://www.keycdn.com">

• Prerendering: Phương pháp này là hiển thị toàn bộ trang hoặc một số yếu tố của nó trước.

<link rel="prerender" href="/second-page.html">

Các công cụ để đo lường tốc độ Web

Biết cách đo lường tốc độ website cũng quan trọng như việc cải thiện tốc độ nếu chúng ta không thoả mãn với tốc độ page hiện tại. Có thể sử dụng các công cụ chuyên dụng có sẵn để kiểm tra tốc độ. Một vài cái mình xin liệt kê bên dưới:

• WebPagetest
• Pagespeed Insights
• Lighthouse
• KeyCDN Speed Check

Kết luận

Tối ưu Web Performance có thể cải thiện đáng kể trải nghiệm người dùng trên web của bạn và quan trọng hơn nữa cho phát triển web của bạn khi mà các ứng dụng càng lớn và phức tạp.

Xem thêm việc làm web developer cực kỳ hấp dẫn tại TopDev