1. Hãy dành vài giây Đăng nhập hoặc Đăng ký tài khoản để truy cập và sử dụng TBit hiệu quả nhất.
    Ẩn thông báo
  2. Bạn hãy like trang Facebook của TBit để nhận được tin tức công nghệ nhanh nhất từ chúng tôi.
    Ẩn thông báo

Tối ưu Website - Thách thức mới trong thời đại thời đại của Mobile-first (P3)

Thảo luận trong 'Thiết kế web' bắt đầu bởi Phạm Đạt, 17/6/18.

0/5, 0 phiếu

    1. Phạm Đạt TBit-Mod

      Tuyệt vời ! Chúng ta sắp hoàn thành công việc tối ưu website rồi. Hãy cố lên vì mục tiệu webisite siêu tối ưu. Và hôm nay là bài học cuối cùng về các công đoạn tiếp theo bạn cần làm với website của mình.

      [​IMG]

      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

      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)
      9. 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

      [​IMG]
      • 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/
      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á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.

      Loại 4: Server → User

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

      Hầu hết các browser hiện 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:
      • Apache: Use mod_deflate
      • Nginx: Use ngx_http_gzip_module
      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.

      [​IMG]

      Các browser đều có bộ nhớ cache nên hãy tận dụng nó để tăng tốc độ load trang của bạn, nhưng tuyệt đối không dùng máy của khách để đào bitcoin.
      -> Cách khắc phục

      • Sử dụng Cache-Control và ETags để thiết lập cache-policy cho trang web của bạn.
      • Sử dụng service-worker trong progressive web app để precache tài nguyên trong lần load đầu tiên.
      * Lời kết:
      Load-time của website ảnh hưởng rất lớn đến trải nghiệm người dùng, từ đó cũng ảnh hưởng đến lợi nhuận, vị trí trên google và tỉ lệ quay lại trang.Quá trình tối ưu hoá load-time của website có rất nhiều bước, đòi hỏi nhiều công sức nhưng đáng để được quan tâm.

      Keep everything simple at first, hãy cố gắng phát triển ứng dụng web có tâm, không sử dụng những gì không cần, tư duy mobile-first và trong sáng nhất có thể.

      Tài liệu tham khảo:
      • Google pagespeed
      • Speed up your website
      • Google webspeed
      • Sử dụng CDN để giảm tải cho Server
      • Find out how you stack up to new industry benchmarks for mobile page speed
       
      Đang tải...

Chia sẻ trang này

Đang tải...