Tối Ưu Website là gì?

04-08-23 Admin

Tối ưu hóa website là gì ?

"Tối ưu website" là quá trình tối ưu hóa các yếu tố khác nhau trên một trang web nhằm cải thiện hiệu suất, trải nghiệm người dùng và thậm chí cả khả năng tìm thấy trang web trên các công cụ tìm kiếm. Tối ưu hóa website có thể bao gồm nhiều khía cạnh khác nhau, tối ưu website giúp cải thiện trải nghiệm người dùng, tăng tốc độ tải trang, cải thiện tương tác trang web trên các công cụ tìm kiếm và có thể dẫn đến tăng số lượng người truy cập và tiềm năng tăng doanh thu.

Sau đây chúng ta hay cùng xem những cách tối ưu hóa hiệu quả

1.Hosting :

Thời đại của cloud computing, các service hầu hết được đưa lên mây. Việc chọn một hosting service phù hợp với nhu cầu của trang web cũng là một yếu tố quan trọng ảnh hưởng đến tốc độ của trang web.

Nhu cầu nhỏ →　shared hosting.
Nhu cầu vừa phải → VPS hosting.
Nhu cầu lớn → Dedicated server.

Nếu có thể, hãy tham khảo ý kiến từ một lập trình viên, nhân viên quản trị hệ thống hoặc sử dụng dịch vụ của một số nhà cung cấp lớn như Amazon web service, Microsoft Azure, Google cloud,...

2.Cải thiện tốc độ phản hồi của server

Bạn có biết : máy chủ là gì? sever là gì? - Thiết kế web Keyweb.vn

Google rất khó tính, họ cho rằng phản hồi của server nên dưới 200ms. Việc server phản hồi chậm có thể do một trong những lý do sau:

Sử dụng framework, ngôn ngữ không tối ưu

Logic quá phức tạp → việc xử lý chậm

Các components của server tốn nhiều thời gian để liên kết

Ví dụ: sử dụng web server và database server riêng → mất thêm độ trễ của network vào thời gian phản hồi của webserver.

Mạng chậm (lý do khách quan, bỏ tay trả về).

Cách khắc phục

Low level:
- Sử dụng các ngôn ngữ, framework có tốc độ xử lý tốt (không dùng fortran để code web).
- Đơn giản hoá code, sử dụng kiến thức về cấu trúc dữ liệu, giải thuật 😅
- Với website có thể dùng cache (redis, memcached), cache trong database để tăng tốc độ phản hồi (tối ưu cache memory lại là một câu chuyện khác)
High level:
- Xây dựng hệ thống với độ trễ giữa các clusters thấp → việc của quản trị viên hệ thống.

3.Tối giản hoá các tài nguyên

Đưa trang web của bạn trở lại cuộc đua cùng với Minify

Khi load trang web, các file html, css, js, script sẽ được load để hiển thị trên browser. Tuy không quá nặng nhưng việc đơn giản hoá, không sử dụng thừa code trong các tài nguyên được load cũng sẽ cải thiện tốc độ load cho trang web.

Cách khắc phục

Minify HTML
Minify CSS
Minify Javascript
Có thể cài PageSpeed Module của google cho webserver (apache, nginx) và mọi thứ cứ để module lo.
Học sử dụng gulp và viết gulp task cho việc minify tài nguyên (worth it).

4.Tối ưu hiển thị ảnh

Ảnh có thể coi là tài nguyên chiếm nhiều load-time nhất của một trang web, việc tối ưu được hiển thị ảnh đóng vai trò quan trọng trong việc cải thiện load-time của một trang web.

Ngày nay người dùng sử dụng rất nhiều các thiết bị khác nhau để có thể truy cập vào trang web của bạn. Với layout bạn có thể giải quyết bằng responsive design, còn với ảnh câu chuyện sẽ rắc rối hơn một chút.

Cách khắc phục

Sử dụng ảnh phù hợp với kích cỡ màn hình người dùng. Tham khảo các best practices cho việc hiển thị ảnh responsive để tiết kiệm tài nguyên.
Sử dụng các phương thức nén ảnh phù hợp:
- GIF, PNG là phương thức nén lossless, ảnh sau khi nén sẽ có chất lượng gần như ảnh gốc, tỉ lệ nén thấp.
- JPEG là phương thức nén lossy, ảnh sau khi nén có chất lượng giảm so với ảnh gốc tuy nhiên tỉ lệ nén có thể gấp 10 lần GIF và PNG.
- Sử dụng các phương thức nén hiện đại hơn như JPEG 2000, JPEG XR hoặc WebP để tăng tốc độ load.

5.Tối ưu hoá việc load CSS

Một trang web sẽ được hiển thị khi load đầy đủ html, css, js. Nếu file css, js có kích thước quá lớn sẽ khiến trang web bị render-blocking, khiến tốc độ load trang tăng đáng kể.

Cách khắc phục

Inline các file css hoặc js nhỏ bằng thẻ <style> trong phần <head>. Các code này sẽ được load cùng html thay vì phải load từng file nhỏ. ps: khai báo ở đầu trang chứ không phải khai báo trong html tag (<p style=...>) nhé 😅
Nên nhớ rằng việc chia css, javascript thành các file nhỏ sẽ giúp project có cấu trúc code tốt hơn, tuy nhiên với mỗi file, browser sẽ tốn thêm 1 request đến server của bạn, đôi khi đọc code thấy css hay script inline thì đừng vội chửi dev ngu nhé 😅

6.Tổ chức thứ tự load

Trong Lighthouse audits của Chrome, tốc độ hiển thị first page của trang web là một trong nhưng tiêu chí được đánh giá rất cao trong mục Performance. Để người dùng có trải nghiệm tốt nhất thì việc ưu tiên hiển thị những nội dung cơ bản (above-the-fold - ATF) của trang web là rất quan trọng.

Cách khắc phục

Hãy tổ chức html thật tốt, quyết định đâu là thành phần quan trọng cần load trước (html load theo thứ tự từ trên xuống dưới)
- Chia css thành 2 phần, 1 phần inline dành cho các nội dung ưu tiên hiển thị để tăng tốc độ load, 1 phần dành cho các nội dung còn lại
- Nếu sidebar và nội dung cùng đặt song song, ưu tiên hiển thị nội dung trước khi hiển thị sidebar
Giảm lượng tài nguyên cần load xuống bằng cách:
- Minify tài nguyên
- Sử dụng css thay cho ảnh khi có thể
- Sử dụng nén
Sử dụng lazy load cho các tài nguyên chưa cần được hiển thị (vd: các ảnh chưa có trong khung hình)

7.Xoá bỏ các Javascript gây ra render-blocking

Trong khi browser tạo ra các DOM tree, nếu gặp một script, nó sẽ dừng lại và thực hiện xong script đó rồi mới tiếp tục tạo ra các DOM. Chính vì thế javascript có thể coi là một nguyên nhân khiến tốc độ tải trang bị chậm đi rất nhiều.

Cách khắc phục

Inline script giống như đã làm với css, tuy nhiên hãy chắc chắn được các script được inline có tốc độ thực hiện nhanh và không gây ra render-blocking.
Sử dụng asynchronous (không đồng bộ) cho javascript, khi gặp script, browser sẽ không dừng lại thực hiện mà sẽ tiếp tục parse HTML đồng thời thực hiện script → tránh bị render-blocking.
Mạnh hơn nữa chúng ta có thể defer javascript, các script sẽ được thực hiện khi trang được load xong 😂
Cơ chế load javascript:
- Nếu có async: script sẽ được thực hiện song song với parse html.
- Nếu có defer: script sẽ được thực hiện sau khi parse html.
- Nếu không có: script sẽ được thực hiện ngay, sau đó mới tiếp tục parse html.

8.Hạn chế redirect tại landing page

Việc redirect người dùng tại landing page sẽ đem lại trải nghiệm xấu và tăng thời gian load time của trang/ Ví dụ:

example.com sử dụng thiết kế responsive không đòi hỏi redirect, nhanh và tối ưu.
example.com → m.example.com/home - sẽ tốn thời gian cho multi-roundtrip.
example.com → www.example.com → m.example.com - người dùng mobile sẽ có trải nghiệm rất tệ do load time quá lâu.

Các khắc phục