Tôi đã tối ưu TTFB như thế nào

Discussion in 'Thảo Luận Chung' started by money, Nov 20, 2020.

  1. money

    money Hương Chủ

    Hôm trước mình có hỏi về tối ưu TTFB với website có xài CF ở link này:
    https://cafemmo.club/threads/hoi-lam-sao-giam-ttfb-khi-add-site-vao-cloudflare.3235/

    Sau 2 ngày mò mẫm thì kết quả khá là khả quan nên khoe với anh em.

    Cũng nói trước bài này khá đặc thù vì nó chỉ áp dụng cho chính site mình tự code, không áp dụng đại trà được. Cũng không có gì là ghê gớm tuyệt chiêu, ai thấy xài dc thì xài nhé.

    Đầu tiên là show kết quả: bây giờ hầu hết url trong web của mình đều có điểm Google Pagespeed như 2 hình dưới đây (trên Mobile và Desktop). So với lúc trước thì điểm số tăng lên 1 chút thôi nhưng hài lòng nhất là phần Cumulative Layout Shift (CLS) cải thiện rõ rệt. Lúc trước CLS của mình gần như chạm sát mức error nhưng giờ đa số CLS = 0 --> hiện đang cảm thấy rất sướng vì điều này :D

    ttfb.01.jpg
    ttfb.02.jpg

    Và cách mà mình đã làm như sau:

    - Tối ưu lại code 1 chút: sau khi xem lại thì mình thấy code phần load data chưa tối ưu nên mình có sửa để nhanh hơn 1 xíu (không đáng kể)
    - Cache: chuyển web sang html tĩnh.

    Tối ưu CLS:

    - Ban đầu mình đọc ở link này để xem cách họ khuyến nghị như thế nào: https://web.dev/optimize-cls/
    - Mình xác định được web mình có 2 vấn đề: #1 là image không cấu hình size cố định mà hiện mình để theo % hoặc resize động (để responsive) và #2 là các div mình cũng để % khá nhiều. Thế là sửa lại css, những chỗ nào cần cố định thì set cứng width/height vào để tránh việc layout bị thay đổi khi page load.
    - Update thêm đoạn này (lúc nãy quên): các file hình ảnh như logo, button, ... lúc trước đa số mình để to hơn display size thì giờ mình resize hết hình ảnh về = đúng với display size. Ví dụ: file logo ban đầu mình thiết kế có kích thước là 500x500 pixels nhưng hiển thị trên web chỉ có 300x300 thì giờ mình resize luôn file logo về 300x300 pixels.

    Và kết quả như đã thấy ở trên.
     
    Last edited: Nov 20, 2020
  2. Thanh Nguyen

    Thanh Nguyen Bang Chúng

    Cái này nghĩa là gì a?. Cache toàn bộ site luôn ạ. như vậy thì nguyên việc lưu trữ cho đống cache này cũng tốn dung lượng quá {beat_brick}{beat_brick}{beat_brick}
     
  3. money

    money Hương Chủ

    Uh, anh cache toàn bộ web thành file html. Server rẻ bèo mà lo gì em. Và dàn web này tuy db thì nhiều (khoảng 85M records) nhưng số page tạo ra chưa đến 1M pages nên nhằm nhò gì đâu.
     
  4. Mr Ghost

    Mr Ghost Sơ Nhập Giang Hồ

    @money anh lỡ show rồi còn che cái domain lại chi anh?
     
  5. command

    command Bang Chúng

    Đỉnh quá, cả Desktop và mobile được 100 hết, layout tối ưu vụ này cao nhất mình chỉ đạt 96 cho Desktop và 92 cho Mobile thôi. Tối ưu được 100 hết, keywork ranking có lên nhiều hoặc traffic có lên nhiều ko anh @money ?
     
  6. money

    money Hương Chủ

    {doubt}{doubt}{doubt}

    Anh vừa mới làm xong chiều nay thôi, chưa biết kết quả thế nào. Nhưng thật sự anh ko nghĩ nó tăng ranking đâu, vì thấy các site khủng điểm của nó thấp lắm. Nhưng mình làm auto thì cứ làm dc cái nào tốt nhất là làm, N cái nhỏ nhỏ mà tốt thì khả năng đẹp trai cao hơn.
     
    Nai likes this.
  7. command

    command Bang Chúng

    Nếu tối ưu phần nào thì quá tốt rồi. Mà a @money sử dụng DB engine nào chứa 85M records thế? Nếu là MariaDB hoặc MySQL, a có thể chia sẻ file cấu hình của DB để tốc độ truy vấn dữ liệu đảm bảo tốt được chứ?
     
  8. firefox

    firefox Bang Chúng

    Bác thử elastic search xem sao, em có db tầm 500m chạy query chưa bao giờ quá 200ms. Ngày trước thấy bác money nhắc tới mà ko biết giờ còn dùng không
     
  9. Nai

    Nai MiddleMan Staff Member

    Của em sao 18đ mf nó cũng báo đạt nữa anh
    upload_2020-11-21_8-13-40.png
     
  10. money

    money Hương Chủ

    ElasticSearch em ơi
    Đúng rồi em, ES query nhanh vãi “lái” luôn :D
    Xanh là em pass các tiêu chí của Core Web Vitals thôi. Em xem phía dưới để biết chi tiết vì sao điểm thấp và cần improve những gì. Mà site anh test là chưa đặt ads mới dc như thế, đặt ads vào rồi thì phải chịu điểm thấp đi.
     
    firefox and Nai like this.
  11. command

    command Bang Chúng

    @firefox @money cấu hình máy chủ hay VPS chạy ES thế nào vậy a? Nghe đồn chạy mấy ứng dụng Java tốn RAM khủng lắm.
     
  12. money

    money Hương Chủ

    Anh đang xài gần chục indexes (gần giống khái niệm DB bên SQL) trên 1 con VPS contabo 19 euro/month loại SSD. Index lớn thì chắc 500 hay 600M documents, nhỏ thì vài chục M documents. Phà phà.
    Chỉ có lúc đầu chưa biết, anh để logstash chạy âm thầm nền thỉnh thoảng crash phải reboot. Sau này anh tắt logstash đi, khi cần mới start lên thì riêng ES nó nhẹ lắm.
     
    Last edited: Nov 21, 2020
  13. firefox

    firefox Bang Chúng

    Em chạy tầm 3 indexes, contabo $5 chạy như hack luôn nhé bác. Mấy con db dạng Lucene này kiểu như nó nhanh không phụ thuộc lắm vào lượng record hay sao ấy.

    upload_2020-11-21_12-30-16.png
     
  14. money

    money Hương Chủ

    Đúng rồi em, cơ chế của ES với index size cỡ 100-200 GB thì không ăn thua.

    VPS như em xài khi request cỡ 1M lần/ngày liệu có chậm không?

    Đây là của 1 bạn trên group ES khoe hàng:
    4989A500-3907-4A62-B85E-7BA3E5C9138F.png
    --- Double Post Merged, Nov 21, 2020, Original Post Date: Nov 21, 2020 ---
    Anh nhầm, đang xài VPS Contabo 14.99 euro, 800GB SSD
     
  15. firefox

    firefox Bang Chúng

    1m thì chắc chắn là sẽ chậm, nhưng đến lúc ấy thì lại dư tiền nâng cấp, em thiết kế để nó chịu tàm 1/3 số đó thôi. Request chủ yếu lặp đi lặp lại theo giờ nên lớp bên trên em rào thêm 1 layer redis nữa thành ra con ES cũng ko quá vã
     
  16. command

    command Bang Chúng

    Thanks a, cấu hình VPS này chịu được bao nhiêu indexes và khoảng bao nhiêu visitors vậy a @money? Contabo có hỗ trợ local IP để kết nối với nhau giữa những VPS của mình ko a? E đọc thông tin package VPS thì ko có nói vấn đề này.

    Thanks bạn, VPS này chạy 3 indexes và chịu được bao nhiêu visitors vậy bạn?
    --- Double Post Merged, Nov 21, 2020, Original Post Date: Nov 21, 2020 ---
    VPS này 4G RAM, mà bạn vừa dùng cho web server, ES và Redis nữa, @firefox phân phối RAM bao nhiêu cho ES và Redis vậy?
     
    Last edited: Nov 21, 2020
  17. firefox

    firefox Bang Chúng

    Con này SSD 8GB đó bác, chạy nginx, netcore 3.1 MVC, redis, tất cả để gần như mặc định không cấu hình tinh chỉnh gì nhiều. Lâu lâu cũng dính 500 Internal nhưng đa số là do bot ghé với cả đồng nghiệp vào cào. Mệt nỗi là traffic dạo này hẻo quá :'(
     
  18. money

    money Hương Chủ

    Index nhiều hay ít tùy mình. Xài ES em ko cần care bao nhiêu index mà chỉ quan tâm đến dung lượng của index là bao nhiêu. Ví dụ như anh thì cái index to nhất khoảng đâu đó gần 100Gb. Với con VPS anh đang xài chỉ cài ES. Lúc nhiều nhất khoảng 350K http requests/ngày (phần lớn do anh tạo request để tạo cache chứ ko phải nhiêu đó visitor thật đâu :D ) + thêm lượng bot vào khá nhiều (khoảng 300-400K bot requests/ngày. Chạy khỏe.
     
    command likes this.
  19. money

    money Hương Chủ

    Tiếp tục tối ưu thêm tí nữa. Test = Lighthouse và GTMetrix

    ttfb-02.jpg
    ttfb-01.jpg
    --- Double Post Merged, Nov 21, 2020, Original Post Date: Nov 21, 2020 ---
    Không hiểu sao cái điểm Best Practices không lên nổi nữa. Anh em nào rành vụ này tư vấn với.
    Best Practices mình bị lỗi như hình. Nó cứ đòi phải có size khác cho hình (mấy cái icon). Không lẽ với mỗi độ phân giải màn hình phải có 1 bộ icon à?
    ttfb-03.jpg
     
    console and firefox like this.
  20. console

    console Bang Chúng

    @command Lâu nay k đi du lịch ghé em chơi nữa ah anh :D
    --- Double Post Merged, Nov 21, 2020, Original Post Date: Nov 21, 2020 ---
    Đỉnh vậy anh :D, lâu rồi không ngó tới mấy con số ni :D, em toàn mở ra thấy mình load đc nghĩ chắc user ok haha