Những điều cần biết về tối ưu hóa website

Ảnh đại diện

Tại sao phải tối ưu hóa website?

Theo số liệu thống kê của Google:

User facts:

  • 47% người dĂšng muốn trang web load dưới 2 giây vĂ  40% sáş˝ bỏ cuộc náşżu trang web mẼt trĂŞn 3 giây để load.
  • 79% người dĂšng sáş˝ khĂ´ng ghĂŠ thăm lấi một website cĂł performance tồi.
  • 52% người dĂšng cho ráşąng website load nhanh ảnh hưởng tráťąc tiáşżp đến độ trung thĂ nh cᝧa họ.
  • 44% người dĂšng than phiᝁn vᝁ tốc độ web cᝧa bấn với họ.
  • 1 giây tăng lĂŞn trong load-time giảm 16% độ hĂ i lòng cᝧa người dĂšng.

mobile page speed new industry benchmarks 01 2 width 800

Website facts:

  • 79% cĂł kĂ­ch thước trĂŞn 1MB, 53% trĂŞn 2MB vĂ  23% trĂŞn 4MB.
  • Mobile load-time đã giảm 7 giây nhĆ°ng vẍn tốn khoảng 15 giây, 53% websites tốn hĆĄn 3 giây để hiᝃn thị.
  • Mobile traffic chiáşżm hĆĄn một náť­a web traffic trĂŞn toĂ n tháşż giới, nhĆ°ng tᝡ lệ chuyᝃn đổi thĂ nh lᝣi nhuáş­n lấi thẼp hĆĄn trĂŞn cĂĄc thiáşżt bị mĂĄy tĂ­nh.

Ở Việt Nam, website của Thế giới di động được giao KPI dưới 3s, còn Tiki và đặc biệt là Sendo có vẻ không quan tâm đến vấn đề này lắm. Cho nên là việc trải nghiệm người dùng ở đâu tốt hơn thì ở đó mọi người mua đồ nhiều hơn. Trong tương lai, các website chắc chắn sẽ phải để ý đến việc optimize webservice. Đây vừa là cơ hội, vừa là thách thức đối với lập trình viên.

Vậy làm sao để tối ưu hóa website?

Đầu tiên hãy xem website của bạn đang có vấn đề gì bằng công cụ Pagespeed của Google Tham khảo các rules của Google cho việc tăng tốc độ load trang:

Google là công cụ tìm kiếm lớn nhất thế giới, nên khi việc làm mọi thứ theo chuẩn của họ thì chắc chắn không phải là lựa chọn tồi. Để đầy đủ hơn thì mình sẽ chia thành 4 loại tương đương với từng giai đoạn khi người dùng truy cập website.

Loại 1: User → Internet

Hoàn toàn nằm ngoài khả năng của chúng ta, tuy nhiên vẫn có thể đảm bảo việc khách hàng có được trải nghiệm đủ tốt với tốc độ mạng cực chậm bặng việc xây dựng Progressive web app (PWA) cho trang web của bạn.

Loại 2: Internet → Server

1. S᝭ d᝼ng DNS server

Việc chuyển từ URL sang địa chỉ IP do DNS server cảm nhận, và nó cũng chỉ là một máy tính. Các nhà dịch vụ cung cấp host thường cũng sẽ có kèm theo dịch vụ cung cấp DNS, tuy nhiên tốc độ có thể khác nhau → tốc độ load cũng bị phụ thuộc Cách khắc phục

  • Đᝃ tiáşżt kiệm được khoản 20-30ms load-time, bấn nĂŞn cân nhắc chuyᝃn qua dĂšng DNS server cᝧa một số nhĂ  cung cẼp khĂĄc.
  • Một số nhĂ  cung cẼp dịch v᝼ DNS (nhĆ° cloudflare) cho phĂŠp bấn sáť­ d᝼ng DNS service miễn phĂ­, tuy nhiĂŞn hĂŁy tĂŹm hiᝃu xem ở khu váťąc địa lĂ˝ mĂ  website cᝧa bấn hay được sáť­ d᝼ng DNS nĂ o cĂł tốc độ nhanh nhẼt.

2. S᝭ d᝼ng CDN

Content Delivery Network (CDN) là hệ thống các edge servers được đặt tại các vị trí địa lý khác nhau để có thể truyền tải nội dung từ một origin ở khoảng cách xa nhanh chóng hơn nhờ cơ chế cache.

Thay vì đến tận server (origin, ở xa) để lấy các tài nguyên thì người dùng có thể lấy ngay tại CDN (distribution, ở gần), chính vì thế load-time sẽ được giảm đáng kể.

Loấi 3: Server

3. 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,...

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

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

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.

5. Tối giản hóa các tài nguyên

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:

6. 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
  • Upload ảnh lĂŞn CDN

7. Tối ưu hóa 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ĂŹ load tᝍng file 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.

8. 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

  • Tổ chᝊc html tháş­t tốt, quyáşżt định đâu lĂ  phần quan trọng cần load trước (html load theo thᝊ táťą tᝍ trĂŞn xuống dưới). Náşżu sidebar vĂ  nội dung cĂšng đặt song song thĂŹ Ć°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ị

9. Xóa 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.

10. 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

Cåch khắc ph᝼c

  • Học cĂĄch thiáşżt káşż một giao diện responsive vĂ  hấn cháşż việc redirect.
  • Náşżu buộc phải redirect, tham khảo hướng dẍn cᝧa Google

Loại 4: Server → User

11. Sử dụng nén dữ liệu

Hầu hết các browser hiệnt tại đều hỗ trợ và sử dụng gzip cho việc nén dữ liệu, nhờ lượng dữ liệu truyền tải qua network ít đi → tăng tốc độ tải trang.

Cåch khắc ph᝼c

  • Config server cho phĂŠp dᝯ liệu được nĂŠm nháşąm giảm, một số config mẍu cho cĂĄc web server:

12. Tận dụng bộ nhớ cache của browser

Mỗi lần người dùng truy cập một trang nào đó, toàn bộ tài nguyên của trang sẽ được load. Điều đó có nghĩa là nếu trang web của bạn không sử dụng cache, mỗi lần load trang sẽ load lại toàn bộ các file css, script dù nó có thể giống y hệt trang trước đó → tăng load-time.

Cåch khắc ph᝼c

Như vậy là mình vừa mới nêu ra 12 cách để tối ưu hóa website của bạn. Nếu bạn có bất cứ vấn đề gì về website hay bạn muốn tạo một trang web của bạn hoặc cho doanh nghiệp của bạn. Đừng ngần ngại liên hệ với chúng tôi nhé !

Đội ngũ của Devjoy!

SẾn sàng thảo luận vᝁ d᝹ ån
cᝧa bấn?

Liên hệ với chúng tôi