xác thực google maps

12 cách tối ưu hoá website - thời đại của mobile-first

Thảo luận trong 'Kiến thức Onpages' bắt đầu bởi Ganoipho6, 14 Tháng mười hai 2018.

Lượt xem: 10,259

  1. Ganoipho6

    Ganoipho6 ⚡| Moderator Staff Member

    Bài viết:
    1,489
    Đã được thích:
    937
    Tại sao phải tối ưu hoá website?
    Theo số liệu cung cấp bởi google
    1.jpg
    User facts:
    • 47% người dùng muốn trang web load dưới 2 giây40% 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 với bạn của họ.
    • 1 giây tăng lên trong load-time giảm 16% độ hài lòng của người dùng.
    2.png
    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. → speed equals revenue
    • 70% landing page mất hơn 5 giây để hiển thị.
    • Google sử dụng một deep neural network với độ chính xác 90% để cho ra kết quả sau:
      • giảm load-time được 10 giây, tỷ lệ người dùng tiếp tục sử dụng website tăng 123%
      • ngược lại, số lượng elements trên trang web tăng từ 400 lên 6000, tỷ lệ chuyển đổi thành lợi nhuận giảm 95%faster is better and less is more
    • Thử nghiệm thực tế:
      1. Walmart:
        • Mỗi 1 giây load-time giảm, số lượng đặt hàng tăng 2%
        • Mỗi 100ms load-time giảm, lợi nhuận tăng 1%
        • Tỉ lệ đặt hàng có thể giảm 25% với mỗi 1 giây tăng trong load-time.
      2. Amazon A/B Test:
        • Chỉ 100ms load-time có thể khiến lợi nhuận giảm đáng kể.
      3. Google
        • Traffic giảm 20% nếu load-time tăng thêm 0.5 giây
        • Google đã rank các website theo mobile-first index, tốc độ load trang trên di động sẽ ảnh hưởng trực tiếp đến kết quả index trên Google search engine.
    SPEED DOES MATTER
    3.jpg
    Load-time tăng 1 giây:
    • Giảm 11% lượng pageviews
    • Giảm 16% sự hài lòng của khách hàng
    • Giảm 7% lợi nhuận
    Ở Việt Nam, website của Thế giới di động (thegioididong.com) được giao KPI hiển thị dưới 3000ms, còn tiki và đặc biệt là sendo có vẻ không quan tâm đến việc này lắm. Các bạn có thể dễ dàng thấy trải nghiệm người dùng ở đâu tốt hơn, ở đâu mọi người mua đồ nhiều hơn.

    Dù sao thì 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à cũng là thách thức với các lập trình viên. Liệu tất cả những lý do trên đã khiến các bạn phải ngồi vào bàn và bỏ thời gian ra làm một website chạy nhanh hơn 1-2 giây?

    Long story short: > Hãy làm trang của bạn chạy thật nhanh trên các thiết bị di động và bắt đầu tư duy theo hướng mobile-first.

    Cùng nhìn lại một chút quá trình vào một trang web của người dùng theo một flow đơn giản:
    4.jpg
    1. người dùng nhập địa chỉ web → chuyển đến mạng Internet
    2. DNS server (Domain Name Service server) chuyển từ URL thành địa chỉ IP → trỏ đến server có IP yêu cầu
    3. server nhận request, xử lý request
    4. chuyển lại response cho người dùng → browser hiển thị kết quả.
    Tin tốt là chúng ta có thể optimize trang web ở tất cả các bước còn tin xấu là ở mỗi bước, thời gian cải thiện có thể chỉ được tính bằng ms (1/100 giây ). Có nên thực sự quan tâm?
    • Nếu trang web của bạn là một blog cá nhân, không có giá trị kiếm tiền, có < 50 người truy cập cùng lúc (như blog này) thì việc optimize không mang lại nhiều giá trị.
    • Bạn kiếm tiền từ trang web của bạn và có trung bình vài nghìn hoặc vài trăm nghìn lượt truy cập cùng lúc. Ngoài lý do về lợi nhuận, nếu không optimize web service, server có thể bị quá tải do requests của khách hàng → bottle neck → load-time kéo dài, thậm chí out of service. Thay vì bỏ tiền mua server khủng hơn, hãy bỏ chút thời gian để sắp xếp và thiết kế lại service để đem lại performance ổn định với chi phí rẻ hơn.
    Làm thế nào?
    Sau tất cả, google là công cụ tìm kiếm lớn nhất thế giới, làm mọi thứ theo chuẩn của họ chắc chắn không phải một lựa chọn tồi.

    Để đầy đủ hơn, mình sẽ thêm một số phương pháp và 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á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
    5.jpg
    Phân tích tốc độ của các DNS provider

    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
    6.jpg
    Phân tích tốc độ của các CDN provider

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

    Để hiểu rõ hơn những lợi ích của việc sử dụng CDN bạn có thể đọc bài viết vô cùng có tâm của sempai Đinh Hoàng Long về CDN.

    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.

    Cloud CDN (của google) mà mình đang dùng ở vị trí nào đó không xuất hiện trong bảng xếp hạng

    Loại 3: Server
    3. Hosting
    7.png
    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,...

    qmau.me đang được host với 300$ free của Google cloud VPS, CPU trung bình khoảng 1%

    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 (VD: sử dụng web server và database ở hai máy chủ xa về mặt địa lý → 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.
    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
    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é
    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

    • 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ác 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:
    • Dữ liệu được nén
    8.png
    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á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
    Challenge
    • Lighthouse audits của qmau.me đạt 100.
    • Tìm hiểu về AMP - công nghệ mới của google để load trang nhanh chóng.
    • KPI load-time qmau.me < 500ms
    • Viết một bài cụ thể hoá tất cả những kiến thức ở trên.
    TL;DR
    • 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ể.
    References

    ____________​
    Cảm ơn anh Mầu Hà Quang đã đóng góp nội dung và đồng í chia sẻ!
    Nguồn (Bài viết gốc tại blog cá nhân): https://qmau.me/blog/post/12-cach-toi-uu-hoa-website-thoi-dai-cua-
    mobile-first​
     
  2. laongoandong

    laongoandong Thành viên tích cực

    Bài viết:
    308
    Đã được thích:
    91
    :) Cảm ơn kiến thức của bro đã chia sẻ. Nhưng thực tế responsive mình cảm thấy không phù hợp. Thực tế khái niệm responsive đó là việc trang web của bạn hiển thị phù hợp, thích ứng với mọi loại thiết bị.
    Nếu đơn vị thiết kế web của bạn "ổn" thì chắc đó không phải là vấn đề. Nhưng nếu bạn đang sử dụng một CMS nào đó (phổ biến như WP) thì sử dụng responsive chưa phải là giải pháp tối ưu.

    Bạn cứ để ý, ở website WP có responsive khi với 1 kích thước màn hình khác nhau thì các đối tượng được ẩn đi để giúp cho việc hiển thị được phù hợp hơn. Nhưng thực tế nó vẫn được gọi ra và hiển thị. Nó chỉ được ẩn đi với người dùng bằng CSS (thuộc tính display:none;)

    Chính vì thế việc sử dụng responsive là chưa ổn.

    Việc redirect thì không hẳn là không tốt, bởi không tự nhiên mà họ redirect về 1 phiên bản web nào đó, ví dụ từ www. domain . com → m.domain.com .

    Thực tế redirect chỉ 1 bước không làm trải nghiệm người dùng kém đi, nếu redirect từ 1 website chưa tối ưu thiết bị người dùng sang 1 website tối ưu với thiết bị của người dùng thì đó là điều nên làm
     
    pacesharevn and Ganoipho6 like this.
  3. Ganoipho6

    Ganoipho6 ⚡| Moderator Staff Member

    Bài viết:
    1,489
    Đã được thích:
    937
    Đúng là vậy.
    - Về redirect thì nó quá nhỏ để gây ảnh hưởng. Nhưng đối với trường hợp hosting ko tốt mạng yếu (3G) hoặc có quá nhiều chuyển hướng trong file thì nó cũng đáng để cân nhắc.

    Về responsives web design (*RWD) thì mình cũng đang dần hướng theo suy nghĩ mà google hiện ưu tiên.

    Thực tế ngày nay càng ngày càng nhiều thiết bị với đủ dạng màn hình, thói quen - cách sử dụng trình duyệt cũng đang ngày một vô cùng đa dạng. Vì vậy RWD vẫn là lựa chọn hàng đầu cũng như là các trang web hiện chưa áp dụng nên có cập nhật thay đổi để phù hợp hơn.

    Google cũng đã cam kết trên trang giới thiệu về khả năng truy cập, thưởng thức web bình đẳng trên mọi thiết bị. Dù không phủ nhận các cách làm khác nhưng google đang tiên phong áp dụng RWD cho toàn bộ các trang của họ.

    Vì thế mình nghĩ là các DESIGNER + SEO và DEV nên có một cuộc họp !! ;;) hihe
     
    pacesharevn thích bài này.
  4. Nội-Thất-ST

    Nội-Thất-ST Thành viên tích cực

    Bài viết:
    345
    Đã được thích:
    134
    Cá nhân không phản đối Mobile-first nhưng có vẻ tối ưu này phục vụ cho đường truyền kết nối mobile đời cũ nhiều hơn hay sau ấy! Chứ các thiết bị di động mới có khả năng xử lý khá khủng rồi việc tối ưu sẽ đạt đến một mức nào đó có thể chấp nhận thôi ! Chứ thiết kế, kiến trúc mà ảnh ít nét quá thì cũ kho thieest phục người xem ạ!
     
    pacesharevn and Ganoipho6 like this.
  5. trirangsunn

    trirangsunn Thành viên

    Bài viết:
    111
    Đã được thích:
    31
    Giờ người người, nhà nhà sử dụng thiết bị di động để cập nhật tin tức (đơn giản, tiện lợi), hiện tại check thì có tới trên 90% traffic là từ mobile. Vậy nên tối ưu "Mô bồ phớt" thì cũng cần thiết, Tuy nhiên tối ưu như thế nào thì mấy ông phải HỌP thật, chứ load nhanh mà trải nghiệm như (...) thì cũng chả ăn thua.
     
    pacesharevn thích bài này.
  6. shopdep

    shopdep Dự bị

    Bài viết:
    1
    Đã được thích:
    1
    thông thường dân seo ít biết chỉnh sữa những vấn đề trong này, chỉ có dân code hay biết hơn nhé, nhưng có 1 số anh chị seo cũng xuất thân từ code thì quá pro rồi
     
    pacesharevn thích bài này.
  7. PhongVuong

    PhongVuong Thành viên

    Bài viết:
    113
    Đã được thích:
    20
    vừa biết code vừa có kiến thức về seo thì tuyệt
     
    pacesharevn thích bài này.
  8. tuannguyenkute

    tuannguyenkute Thành viên nhiệt tình

    Bài viết:
    567
    Đã được thích:
    110
    Tốc độ load web chỉ là một phần thôi chứ không phải là tất cả, một số bài viết hay mà load chậm khách họ vẫn đợi để vài xem. Đó là yếu tố mà thực tế cho thấy tốc độ load web chỉ 50% và 50% còn lại là nội dung bài viết.
     
    pacesharevn thích bài này.
  9. Ganoipho6

    Ganoipho6 ⚡| Moderator Staff Member

    Bài viết:
    1,489
    Đã được thích:
    937
    Google DEV có giới thiệu công cụ này: https://squoosh.app/ để nén ảnh khá ngon. Nó hoạt động theo thuật toán mới nên nén tốt hơn, giữ nguyên kích thước mà dung lượng hình nhỏ đi được đáng kể.
    Sử dụng định dạng ảnh .webp cũng giúp bạn cải thiện nhiều về tốc độ vì thường nó nhẹ hơn JPG tới 30% với chất lượng tương đương.

    Dù sao tối ưu trang web, trải nghiệm người dùng và công cụ tìm kiếm là 3 phía quan trọng nhất chúng ta hướng tới. Vì vây·mình nghĩ vẫn nên tối ưu tối đa có thể mang tới những điều tốt nhất có thể ;;)
     
    pacesharevn and Nội-Thất-ST like this.
  10. Ganoipho6

    Ganoipho6 ⚡| Moderator Staff Member

    Bài viết:
    1,489
    Đã được thích:
    937
    Hừmm... Vậy giờ đơn giản là..! Nếu 1 trang khác cùng nội dung mà tối ưu hình tốt hơn bạn chẳng hạn.

    Điều tệ nhất là "xuống hạng" chẳng phải sẽ diễn ra sao :3
     
    pacesharevn thích bài này.

Chia sẻ trang này