BLOG

Tối ưu Website 100 điểm tốc độ để giảm thiệt hại của các đợt tấn công DDOS (phần 1)

Firefly 19.04.2021
218 người theo dõi 2010 bình luận 1293 bài chia sẻ

Bài thứ ba của Tôi chia sẻ các kinh nghiệm nhỏ và các kỹ thuật phân tích để giảm thiệt hại từ các đợt tấn công DDOS hạng nặng.

Tôi thường tự tìm hiểu và tối ưu hoá Website cá nhân để đạt tốc độ tốt nhất và tối ưu nhất.

Nếu bạn truy cập Website của Tôi, bạn sẽ gần như không cảm nhận thấy rằng Website đang tải mà nó tải xong luôn chỉ dưới 1 giây.

Và điều mà Tôi làm chỉ đơn giản là hướng tới sự đơn giản, tập trung vào phần nội dung chính là hồn cốt của Website chứ không phải vẻ bề ngoài.

Tôi sẽ chia sẻ để bạn thấy quá trình tối ưu hoá website có tác dụng thế nào trong việc giảm thiểu các tác động của các đợt tấn công vào Website.

1. Bật CDN miễn phí

Tôi dùng WordPress và chính vì vậy, có nhiều giải pháp để tích hợp CDN.

Ban đầu tôi dùng CDN của Bizfly nhưng sau vài tháng sử dụng với chi phí chỉ khoảng 25-30k/tháng. Có vẻ Bizfly giở trò và chơi trò tối thiểu. Xài tối thiểu 1 tháng là 100GB với giá hơn 100.000VND. Nghĩa là trước đây Tôi chỉ mất 1/3 chi phí.

Cái khó chịu của Bizfly là khi Website của Tôi bị tấn công DDOS và lưu lượng tăng tới 1TB (Chi phí khoảng 1tr) thì Bizfly không hề có cảnh báo gì tới Tôi mà cứ vậy trừ phí.

Chưa kể, ở thời điểm bị tấn công mạnh, CDN của Bizfly cũng quang tèo luôn làm cho Web của Tôi không thể tải được các tài nguyên tĩnh và từ đó sập luôn.

Tôi quyết định từ bỏ CDN của Bizfly để dùng dịch vụ CDN MIỄN PHÍ của jetpack là Photon bằng cách cài Plugin Jetpack

Bật tính năng CDN ở mục Performance trong cài đặt

Enable site accelerator và tích chọn cả Speed up image load times và Speed up static file load times

Với việc dùng CDN miễn phí này, toàn bộ các Request vào hình ảnh và các file tĩnh như css và js sẽ được load qua dịch vụ của Jetpack (Công ty con của Automatic - Chủ quản WordPress dot com)

Điều này giảm thiểu các thiệt hại cho Tôi và Webserver không cần phải đáp ứng các request đó dẫn tới quá tải.

2. Không Combine css và js mà xoá những phần không cần thiết ở những nơi không cần dùng.

Đây là một yếu tố quan trọng nữa để giảm thiểu thiệt hại từ DDOS và giúp Website sống khoẻ mặc dù các đợt tấn công dồn dập không ngừng nghỉ.

Tôi có mua Plugin hỗ trợ Cache là WP-Rocket và có đọc rất kỹ các hướng dẫn.

Website của Tôi theo khuyến cáo của WP-Rocket thì không cần phải combine file css và js.

Lý do là Website của Tôi hỗ trợ HTTP/2.

Lý giải đơn giản: Khác với giao thức HTTP/1.1, giao thức HTTP/2 có cách truyền tải dữ liệu hoàn toàn mới. Nó tương tự như cách chúng ta combine JS, CSS. Các dữ liệu sẽ được gộp chung vào một kết nối TCP (multiplexed) để giảm số lượng HTTP request.

Như vậy, việc combine css và js là không cần thiết.

Tuy nhiên nếu như giữ các file css và js không cần thiết ở trang chủ chẳng hạn, thì nó sẽ làm tăng Page size và cũng phần nào đó ảnh hưởng tới tốc độ tải trang.

Hiểu đơn giản thì việc tải nhiều css và js cũng giống việc bạn phải chở quá nhiều thứ trên một chiếc xe thồ vậy. Càng chất thêm lên thì càng nặng.

Website của Tôi ban đầu theo thống kê của GTMetrix thì có khoảng 62 Request trong đó chủ yếu là JS và CSS.

Tôi phân tích và thấy các phần bổ trợ sau thêm vào các css và js không cần thiết cho các loại trang:

- Trang chủ

- Trang chuyên mục bài viết

- Trang từ khoá

- Trang tác giả

Các Plugin:

- KK Star Rating

- Ultimate membership

- Jetpack

- WooCommerce

- Glossary

Tôi viết các hàm để xoá js và css không cần thiết mà các plugin này thêm vào trang chủ như sau:

/**
* Disable WooCommerce block styles (back-end).
*/
function slug_disable_woocommerce_block_editor_styles() {
wp_deregister_style( 'wc-block-editor' );
wp_deregister_style( 'wc-block-style' );
wp_deregister_style( 'wc-block-style' );
}
add_action( 'enqueue_block_assets', 'slug_disable_woocommerce_block_editor_styles', 1, 1 );
/** Disable Css Unnessesary*/
function totrieu_remove_css_from_home() {
if (is_front_page() || is_category() || is_tag() || is_author()){
wp_dequeue_style( 'kk-star-ratings' ); // style id
wp_dequeue_style( 'kk-star-ratings-inline' );
wp_dequeue_style( 'ihc_front_end_style' );
wp_dequeue_style( 'ihc_templates_style' );
wp_dequeue_style( 'orgseries-default-css' );
wp_dequeue_style( 'wpsm-comptable-styles' );
wp_dequeue_style( 'wpg-main-style' );
wp_dequeue_style( 'wpg-tooltipster-style' );
}
}
add_action( 'wp_enqueue_scripts', 'totrieu_remove_css_from_home', 9999);
//Remove JS
function totrieu_remove_js_from_home() {
if (is_front_page() || is_category() || is_tag() || is_author()){
wp_dequeue_script( 'ihc-jquery-ui' ); // script id
wp_dequeue_script( 'ihc-front_end_js-js-extra' );
wp_dequeue_script( 'ihc-front_end_js' );
wp_dequeue_script( 'wpg-mixitup-script' );
wp_dequeue_script( 'wpg-tooltipster-script' );
wp_dequeue_script( 'wpg-main-script-js-extra' );
wp_dequeue_script( 'wpg-main-script' );
wp_dequeue_script( 'kk-star-ratings-js-extra' );
wp_dequeue_script( 'kk-star-ratings' );
}
}
add_action( 'wp_print_scripts', 'totrieu_remove_js_from_home', 9999);
add_filter( 'jetpack_implode_frontend_css', '__return_false', 99 );

Sau khi thực hiện việc này, Website của Tôi giảm từ 62 Request xuống chỉ còn 25 Request như các bạn có thể xem ở ảnh 05


3. Loại bỏ plugin Cache

Không hiểu WP-Rocket bị xung đột với plugin nào gây ra lỗi khôg hiển thị được nội dung bài viết không thường xuyên, nên tôi bỏ luôn WP Rocket và dùng luôn các tính năng mặc định của Cloudflare:

Tôi bật Auto Minify của Cloudflare với JS, HTML, CSS

Bật chế độ nén Brotli để tăng tốc độ tải trang.

Dùng thêm dịch vụ Automatic Platform Optimization for WordPress $5/tháng để tối ưu hoá điểm tốc độ tải trang.

Và bật luôn tính năng Rocket Loader của Cloudflare (Miễn phí)

4. Loại bỏ Google Font và Font Awesome

Tôi có kiểm tra và nhận thấy rất nhiều Website hiện đại sử  dụng Font Awesome. Nó  nhanh, và rất  tiện nhưng có một vấn đề ở đây là Tôi phải tải cả đống CSS của Font Awesome khoảng 100kb cùng với file font nhưng lại chỉ dùng chưa tới 20 font trong  số đó. Như thế thật là lãng phí.

Để  khắc phục vấn đề này, Tôi đã xem xét lại và nhận  thấy mình chỉ dùng  khoảng 11icon cần thiết cho Website. Tôi quyết định  dùng  icomoon để  thay thế.

Kết quả: Tôi chỉ phải Load 1 file  font khoảng... 10kb giảm tới 10  lần so với việc dùng Font Awesome.

Google font cũng sẽ làm thời  gian tải trang tăng lên và tăng thêm Request. Tôi nghĩ  không cần phải quá màu mè hoa lá cành  và quyết định loại bỏ  luôn google font để sử dụng  font hệ thống.

5. Lời kết

Ngoài việc phân tích cách thức tấn công DDOS, việc quan tâm tới chính website cũng giúp bạn phần nào giảm thiểu thiệt hại của các đợt tấn công.

Theo ý hiểu của Tôi thì Website càng nặng, Request  trực tiếp vào Server càng nhiều thì càng thiệt hại nặng khi bị tấn công DDOS.

Website hiện đại đang cố giống như một cô gái xấu làm đẹp bằng cách dùng quá nhiều mỹ phẩm hoặc vung tiền để phẫu thuật thẩm mỹ. Mà càng làm thế thì càng tốn tiền và thật lòng mà nói thì giảm trải nghiệm người dùng rất nhiều.

Mình chỉ hướng tới sự đơn giản nhất có thể mà thôi.

Tất nhiên triết lý này khó để áp dụng với các bạn đánh đổi giữa cái đẹp và tốc độ, cũng như các bạn đang duy trì các Website thương mại điện tử được.

Website của mình là https://www.tohaitrieu.net và các bạn có thể check PageSpeed Insight khoảng 96-99 điểm. GTMetrix khoảng 98-100 điểm tốc độ.


18 Bình luận
  • tienvy

    Nhiều thông tin bổ ích, đặt biệt đoạn không cần combine css, js.

    • Firefly

      @tienvy request đã giảm xuống quá nhiều nên việc combine css nếu có thực sự cũng không cần thiết thật

  • motbit

    Cảm ơn bác, 1 bài viết rất quý giá

  • min02

    Đo thử của bác mobile thấp chỉ có 74 thôi, desktop thì 99

    ké trang truyện của em https://toptruyenfull.com ko dùng yii2, compile all css, js vào 1 file tối ưu, pagespeed tầm 90-99

    • Firefly

      @min02 mình không combine vì có thể gây Broken và nó cũng không quá cần thiết khi request đã giảm tới mức khó tin 😅

  • hoidulich

    Còn tuỳ thuộc nhiều yếu tố lắm, site nhỏ ít lượng truy cập thì đúng chứ nhiều là wordpress nó nặng kinh khủng. Bên mình có site mà giờ bỏ thì tiếc mà làm tiếp thì mệt quá thôi đành bỏ đó

  • firstlove87

    WP nhiều sp nó nặng lắm, quá nhiều post meta

    • hoidulich

      @firstlove87 chưa kể bị spam comment nữa. Không hiểu sao mà tụi nó auto spam nhiều kinh khủng toàn là mail có đuôi .ru

    • quatangdogia

      @hoidulich dùng mấy plugin chống spam + recaptcha cũng không ăn thua hả bác?

    • firstlove87

      @hoidulich công nhận, spam nhiều, nhưng bt mình disable comment thì nó vẫn còn nên đành phải tắt luôn bằng code

    • Firefly

      @hoidulich dùng Jetpack askimet chống Spam tốt.


      Nói thật với bác, mình từng để comment và Web mình comment rất tốt. Nhưng cuối cùng mình nhận thấy các comment đó không có ý nghĩa. Chua kể nếu load Gravatar thì nặng thêm nặng nên mình bỏ luôn comment tập trung chủ yếu vào trải nghiệm đọc bài.


      Kể từ lúc đó bớt được vấn đề Trả lời email, và cũng bán được nhiều gói đọc bài hơn. Mình thì ra được nhiều bài chất lượng hơn.

  • ndnhan

    Có nhiều vấn đề tác động đến Page Speed Insight lắm chủ thớt ơi. Nhiều thứ ng này làm thì được nhưng áp dụng site khác sẽ không được, làm page này được nhưng landing page khác lại quang tèo. Ví như site WP của bạn là ổn nhưng với site ecommerce thì không thể đánh đổi nhiều thứ như ecommerce tracking, heatmap, analytics để giẩm bớt js, vấn đề định dạng, chất lượng và dung lượng hình ảnh cũng có tác động lớn đến speed, ngoài ra còn có 1001 thứ khác nữa tùy theo từng site không thể tối ưu tuyệt đối (mở Lighthouse ra mà xem nhé).


    Nói chung đây cũng là một vài kiến thức cơ bản cho bạn nào quan tâm đến optimize page speed.

    Tiếp tục đi bạn : https://prnt.sc/10bszk0

    • firstlove87

      @ndnhan theo mình thấy thì google page speed insight hướng đến trải nghiệm người dùng nhiều hơn là tốc độ. Thực tế để optimize 1 site WP ecommerce thì rất cực

    • Firefly

      @ndnhan bác chắc không đọc lời kết rồi. Vấn đề nằm ở chỗ bác phân tích Website như thế nào. Và đây là những bước cơ bản, nhưng lại cực kỳ hiệu quả cho Website WordPress và mình có ghi là "phần 1" tức là còn nhiều phần nữa.


      nếu bác xài Ecommerce thì bác sẽ phải xem là trang Home có thực sự cần thiết Show sản phẩm không. Theo mình quan sát cơ bản, thì trang Home không nên Show quá nhiều sản phẩm, hoặc thậm chí không cần Show Sp. Như vậy hoàn toàn có thể loại bỏ js và css của các Plugin như Ecommerce hay Woccommerce.


      Cai mình chia sẻ bên trên bao gồm cả 1 số nguyên lý và cái cốt lõi là phải phân tích kỹ Website cần gì, ở đâu, cái gì cần bỏ, ở những khu vực nào. Mình cũng phải phân tích rồi đưa ra quyết định.


      Và các qd còn phụ thuộc và nhu cầu của Website nữa.

  • cmcc

    Quá hay bác ơi

Website liên kết