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 (P2)

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

0/5, 0 phiếu

    1. Phạm Đạt TBit-Mod

      Ok, Hôm nay chúng ta lại gặp nhau để giải quyết nhiệm vụ của các lập trình viên hiện này. Một vấn đề không mới nhưng lại ngày càng quan trọng. Nhất là khi các bạn đã đọc bài viết hôm qua của mình. Không dài dòng nữa, chúng ta cùng bắt đầu và thực hiện tối ưu cho website ngày này !

      [​IMG]

      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ác 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 và sử dụng service-worker cho trang web của bạn.

      Loại 2: Internet → Server
      1. Sử dụng DNS server

      [​IMG]

      Việc chuyển từ URL sang địa chỉ IP server do DNS server đảm nhận, và nó cũng chỉ là một máy tính, nhanh chậm khác nhau. Các 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 trang cũng bị phụ thuộc.
      -> Cách khắc phục
      Để tiết kiệm được khoảng 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

      [​IMG]

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

      Theo cdnperf.com, tính đến thời điểm này JSDELIVR đang dẫn đầu trong việc cung cấp dịch vụ CDN trên toàn cầu. Ở châu Á, vị trí quán quân thuộc về CDNetworks. Cloudflare CDN, Azure và CloudFront của AWS cũng lọp top 10.

      Loại 3: Server
      3. Hosting

      [​IMG]

      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.

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

      5. Tối giản hoá 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:
      • 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.
      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: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.
      7. 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 thấy đọc code thấy css hay script inline thì đừng vội chửi dev ngu nhé !

      * Tạm kết: Thế đã nhé, mỗi hôm một chút "Tích tiểu thành đại", các bạn cừ từ từ, bình tĩnh nghiên cứu và tối ưu hóa website của mình theo các phương pháp trên nhé. Một lần nữa hãy ủng hộ mình để mình post những bài viết tiếp theo nhé ! Đặc biệt là đừng quên đón chờ bài viết cuối trong bộ bài viết tối ưu Website của mình.
       
      Admin thích bài này.
      Đang tải...

Chia sẻ trang này

Đang tải...