Tối ưu tốc độ website là gì?

Để một website có nội dung động (như blog Fullstack Station này) trải qua rất nhiều bước: Viết code PHP/Python/Ruby, kết nối cơ sở dữ liệu, process engine sẽ kết hợp dữ liệu từ cơ sở dữ liệu với HTML cho ra web với giao diện hoàn thiện. Sau đó, web server sẽ trả kết quả HTML/CSS/JS đã được biên dịch này về trình duyệt web (browser). Mỗi công đoạn trong quá trình trên cần được tối ưu để website đạt tốc độ tốt nhất.

Có nhiều kỹ thuật để tối ưu tốc độ website (nén file, nén hình ảnh, lazy load…), và tối ưu web server là một trong những thành phần quan trọng nhất. Mình giới thiệu đến các bạn cách cài đặt module pagespeed (mod_pagespeed) cho nginx trên Centos 7.

Chú ý: nếu bạn muốn dùng Centos nhưng chưa tự tay cài server bao giờ hoặc muốn cài đặt nhanh, mình khuyến nghị dùng CentMin Mod để cài đặt Nginx, Maria Mysql DB, PHP-FPM, Opcache, Memcached…

Giới thiệu module PageSpeed

Module PageSpeed là một dự án của Google, ở Google việc tối ưu tốc độ website là cực kỳ quan trọng. Họ luôn phát triển các công cụ, kỹ thuật để làm cho website chạy nhanh nhất có thể, có thể kể ra một vài dự án như: Google Chrome (tất nhiên có nhiều mục đích khác nữa, nhưng ít nhất nó cũng có tốc độ tải trang nhanh hơn các trình duyệt khác), Pagespeed Insights (Công cụ kiểm tra các yếu tốc tốc độ của website), mod Pagespped

Các kỹ thuật tối ưu tốc độ sẽ được giới thiệu trong loạt bài “Tối ưu tốc độ cho website”.

Nếu bạn sử dụng website bằng WordPress, thì có lẽ plugin [W3 Total Cache] cũng đủ dùng, tuy nhiên nếu bạn dùng nền tảng khác không có plugin tương tự hoặc website là do bạn viết thì bài viết này sẽ giúp ích nhiều cho bạn. Ngay cả khi dùng WordPress với W3 Total Cache thì nếu dùng thêm mod pagespeed vẫn hiệu quả hơn bạn nhé, ngoài ra còn có rất nhiều tính năng rất hay.

 

Kiểm tra trước khi tối ưu tốc độ

Đây là điểm số của blog trên Pingdom:

businesscard-blog-before-pagespeed

Đây là thông số hệ thống:

  • Nền tảng: WordPress 4.4
    • Plugin cache (ví dụW3 Total Cache): không hoạt động. Để dễ dàng đánh giá nên mình không bật chức năng này lên.
  • Máy chủ: Centos 7
  • Máy chủ web: Nginx 1.9.9
  • Preprocessor: PHP7 với Zend OPcache
  • HTTP/2 + SSL: hoạt động. (SSL của mình đã tối ưu mức A+ tại SSLLabs)

Mặc dù đã dùng ZendOpcache và HTTP/2 mà như bạn thấy ở hình test ở trên, chậm hơn 78% website khác đã test tại Pingdom, hix hix. Sao mà chậm quá vậy !!!

View source xem thử:

bc-blog-script-source

=> Rất nhiều file Css và Js sẽ làm cho website tải lâu hơn

businesscard-blog-source

=> Còn rất nhiều khoảng trắng và các dòng ghi chú (comment) => website sẽ nặng nên chậm hơn, đó là những thứ không cần thiết cần phải được loại bỏ.

Yah, phải khắc phục thôi!!!!!!!!!

Bắt đầu tối ưu tốc độ

Yêu cầu để thực hiện theo bài viết:

  • Máy chủ Centos 6 hoặc 7, có quyền root.
  • Máy chủ web: Nginx (Đối với các bạn dùng Apache, sẽ có bài viết khác nhé)

Bước 1: cài đặt các thư viện cần thiết

Bước 2: tìm phiên bản mới nhất

Vào trang chủ chính thức của Nginx, bạn sẽ nhìn thấy phiên bản mới nhất, nhớ chọn phiên bản đầu tiên của Mainline version nhé. Nhớ số phiên bản này, hiện tại là 1.9.9

Bước 3: tải mã nguồn Nginx

Bước 4: xác định phiên bản mã nguồn PageSpeed mới nhất

Vào Github Repo, vào mục Branch/Tag, sẽ thấy phiên bản mới nhất:

pagespeed-git

Theo hình trên thì phiên bản mới nhất là: v.1.10.33.2-beta [chỉ cần nhớ 1.10.33-2]

Bước 5: tải & giải nén pagespeed

Bước 6: bắt đầu build

 

Bước 7: tạo script init

Copy script này vào:

Cho phép script quyền thực thi:

Nếu trường hợp bạn đang sử dụng nginx đã cài bằng lệnh yum rồi:

Cài đặt vào thư mục sbin:

Cài đặt cấu hình:

Sau bước này, bạn đã cài đặt xong Nginx + mod Pagespeed, bây giờ chỉ việc kích hoạt lên

Bước 8: Kích hoạt mod pagespeed

Thêm các dòng sau vào trong block server của nginx.conf:

Nếu bạn add như trên vào nginx, thì tất cả các website đều được bật pagespeed, nếu bạn muốn chỉ một vài website đặc biệt chạy mod pagespeed thì đừng thêm vào nginx.conf mà thêm vào file config của website đặc biệt đó ví dụ: /etc/nginx/conf.d/www.example.conf

Start nginx

Cuối cùng kiểm tra thành quả:

 

bc-after-ps

Oh, đã nhanh hơn 46% rồi đó. (Phần nội dung website đã giảm từ 1.6MB xuống ~900KB)

Để hiểu hết ý nghĩa của các bộ lọc này, bạn đọc thêm bài viết Ý nghĩa của các bộ lọc trong module Pagespeed và cách sử dụng để tối ưu hóa tốc độ website

Kết luận:

Từ chậm hơn 78% lên mức nhanh hơn 46% quả là không tệ phải không bạn? Tuy nhiên đây chưa phải là mức cao mà Fullstack Station nhắm đến, nếu các bạn thực hiện hết tất cả các tiêu chuẩn kỹ thuật mà seri “Tối ưu hóa tốc độ website” mang lại, mình đảm bảo tốc độ sẽ nằm ở mức “nhanh hơn 80%

Comments