Theo góc nhìn của mình thì pagespeed là “tốc độ tải trang” đã bao gồm tốc độ phản hồi từ máy chủ luôn nhé. Tốc độ phản hồi từ máy chủ liên quan đến nhiều yếu tố khác không nằm trong phạm vi bài viết này. Còn Pagespeed nói riêng là những gì xảy ra ở trình duyệt web (browser).

Tại sao tối ưu tốc độ tải trang lại quan trọng?

“Người sử dụng website cảm thấy hạnh phúc” là tiêu chí cực kỳ quan trọng! Không những có giá trị trực tiếp lên người dùng mà còn ảnh hưởng đến xếp hạng tìm kiếm của Google. Bởi vì Google cũng muốn người dùng hạnh phúc với kết quả tìm kiếm. Nên những trang web có tốc độ nhanh sẽ được Google ưu ái xếp hạng. Việc cải thiện thứ hạng tìm kiếm trên Google là cái kết cực kỳ đáng giá. Điều đó đồng nghĩa với việc website sẽ được nhiều lượt truy cập hơn, việc kinh doanh sẽ trở nên tốt hơn.

“Milliseconds Make Millions“, mili giây tạo triệu đô: cứ 0.1 giây cải thiện được thì tỉ lệ chuyển đổi (conversion rate) tăng 8%. Đây là con số không hề nhỏ, và nếu bạn thực hiện tối ưu tốc độ theo bài viết này, bạn sẽ cải thiện ít nhất 0.5 đến 1.5s, tương đương “tỉ lệ chuyển đổi” tăng từ 40%~80%. Woa!!!

Chú ý: chạy theo thành tích về điểm số của Google sẽ đánh đổi khá nhiều thời gian và công sức. Và đó là một công việc khá dài hơi và có tính chu kỳ. Tuy nhiên, kết quả thì sẽ rất ngọt ngào!

Fullstack Station Tips

Cho dù bạn có làm nội dung và SEO tốt nhưng pagespeed lại chậm thì sẽ ảnh hưởng rất nhiều đến thứ hạng tìm kiếm, cũng như trải nghiệm người dùng. Là nguyên nhân dẫn đến lượng truy cập thấp. SEO thì tất nhiên quan trọng, nhưng đầu tư vào tối ưu tốc độ tải trang pagespeed thì hiệu quả lâu dài và chắc chắn có kết quả tốt.

Khó khăn và thách thức

Khó khăn

Một điều khá lạ nhưng cũng thường xảy ra là chẳng ai quan tâm đến pagespeed khi mới phát triển trang web cả. Chỉ là sau 1 thời gian thấy thứ hạng tìm kiếm không tăng nổi, hoặc là truy cập không đạt chỉ tiêu thì chủ doanh nghiệp mới bắt đầu lôi cổ phòng marketing ra, lúc đó để ý đến pagespeed.

Rất ít chủ quản website quan tâm đến pagespeed, đó chính là khó khăn cho các bạn làm marketing nói chung và lập trình viên nói riêng. Bởi vì các con số của pagespeed gần như không liên quan đến lượt truy cập và thứ hạng tìm kiếm? Hoặc là để đánh giá KPI thì rất khó khăn. Khi bạn cải thiện tốc độ lên, đồng thời thứ hạng tìm kiếm cũng lên, vậy kết quả là do chiến lược SEO, do Google thay đổi thuật toán tìm kiếm, hay do kết quả của pagespeed?

Xác định được quả thật là rất khó, tuy nhiên bạn hãy tin tưởng vào câu “Miliseconds Make Millions” do chính Google đưa ra. Và cũng có tiêu chí xác định ROI (Return On Investment): với các thông số Lượng truy cập, Tỉ lệ chuyển đổi, Giá trị trung bình đơn hàng thì TestMySite sẽ đưa ra con số doanh thu hàng năm (annual revenue) sẽ tăng lên bao nhiêu nếu bạn cải thiện được pagespeed bao nhiêu giây. Đây là phương pháp xác định con số cụ thể biết có xứng đáng đầu tư vào việc cải thiện pagespeed hay không.

Nhưng bạn phải quán triệt một điều là tốc độ tải trang không phải là chiếc đũa thần. Nếu chất lượng nội dung không tốt thì tốc độ tải trang sẽ không có ý nghĩa gì cả. Khi các trang có chất lượng bằng nhau, thì tốc độ tải trang, trải nghiệm người dùng sẽ được ưu tiên trên hệ thống tìm kiếm. Tóm lại, làm người sử dụng hạnh phúc là tôn chỉ cao nhất!

Thách thức

Như đã nói ở trên thì bạn thường bắt tay vào việc cải thiện pagespeed khi website đã đi vào hoạt động đã lâu. Và vì cũng phải có lượng truy cập tương đối khá (nhưng bắt đầu hụt hơi?) thì mới xác định được ROI mà nên thực hiện cải thiện pagespeed hay không. Với lý do đó mà tại thời điểm bạn bắt đầu cải thiện thì hệ thống website đã như 1 bãi chiến trường :)). Đó chính là thách thức.

Vì lý do tăng trưởng, nên thường thì website sẽ đặt mục tiêu về chức năng trước. Còn các mặt khác đều là thứ yếu. Tất nhiên đó là điều dễ hiểu vì nếu không có giai đoạn đó thì bạn sẽ không có cơ hội cải thiện pagespeed đâu. Tại thời điểm này, những quy tắc pagespeed đều chỉ là 1 thứ lý thuyết suông mà thôi. Bạn phải vắt óc suy nghĩ làm sao kết hợp các quy tắc đó vào hệ thống hiện tại.

Cải thiện pagespeed với công số thấp nhất mà hiệu quả cao nhất. Đó chính là “State of the art” mà bạn phải đối mặt giải quyết. Và đó cũng chính là điều mình hi vọng giúp được các bạn trong bài viết này.

Cách đơn giản để tối ưu tốc độ tải trang

Sử dụng mod_pagespeed chính chủ Google

Mình đã từng giới thiệu về mod_pagspeed để tăng tốc pagespeed cho website. Cách này sử dụng cho kết quả tốt mà lại dễ dàng. Tuy nhiên chỉ áp dụng với site tĩnh hoàn toàn. Các trang web có sử dụng form với crsf-token được tạo ra theo trang thì khó đạt kết quả như mong đợi.

Hơn nữa, khi áp dụng thì bạn gần như lệ thuộc hoàn toàn vào các thiết lập và cài đặt. Khó có thể tự quản lý các nhu cầu tuỳ biến cao. Mình nghĩ chỉ nên sử dụng đối với site nhỏ, hoặc site mới đang trong thời kỳ triển khai. Vì các tham số khá nhiều nên việc cấu hình khá khó khăn. Qua thời gian nâng cấp, các tập tin css và js được thêm vào nhiều thì rủi ro sẽ tăng lên. Bởi vì tự động nên cũng có khi có lỗi ngoài tầm kiểm soát.

Trang fullstackstation.com có kết quả 1.8s/Good trên testmysite cũng đang sử dụng mod_pagespeed. Mình khá hài lòng kết quả này. Tuy nhiên điểm trên Pagespeed Insights thì vẫn không được cao. Do Google mới thay đổi thuật toán tính điểm.

Sử dụng các framework/plugins hỗ trợ tốt về pagespeed

Plugins cho WordPress

Hiện tại Fullstack Station sử dụng wordpress nên mình dùng Autoptimize (nén js và css thành 1 file) và Hyper Cache (tạo cache trang thành html), kết hợp với mod_pagespeed. Về cơ bản thì những plugin cho wordpress chỉ giúp cải thiện ở một vài quy tắc. Để tối cải thiện tốc độ tải trang thì plugins là chưa đủ.

Có rất nhiều plugins cho wordpress cải thiện tốc độ nói chung, nhưng không nằm trong phạm vi bài viết này. Đơn giản nhất là chỉ cần sử dụng 2 plugins nói trên. Với các website doanh nghiệp, mình khuyến nghị nên dùng bộ lập trình của https://roots.io/. Sử dụng bộ của Roots để tạo theme cũng như quản lý các plugins 1 cách bảo mật. Khi bạn tự phát triển theme, thì sẽ dễ dàng quản lý các javascript và css hơn.

Các js framework

Với kỹ thuật code splitting, thì các framework hay thư viện hỗ trợ dựa trên webpack sẽ giúp tốc độ trang khá tốt. Cơ bản thì sẽ giúp trang tải css và js cần thiết cho việc render. Ngoài ra còn cải thiện tốc độ rất tốt với kỹ thuật tạo trang html tĩnh và động tương ứng.

Điển hình là các js framework như Gatsby.js, Ghost CMS, Next.js, Nuxt.js. Cơ chế trang tĩnh rất quan trọng, để đảm bảo tốc độ tốt nhất. Và cũng cần cơ chế tải từng phần như Gatsby để nâng cao trải nghiệm người dùng.

Các quy tắc đảm bảo tối ưu tốc độ tải trang tốt

Đơn giản (nhưng cũng đầy cam go) là bạn sử dụng Lighthouse ngay trên trình duyệt Chrome hoặc dùng Pagespeed Insights để kiểm tra và chẩn đoán từng trang. Các công cụ này sẽ đưa ra các khuyến nghị và chỉ cần làm theo là sẽ cải thiện được.

Mình cũng đã phải trải qua hàng trăm lần kiểm tra để đưa ra giải pháp tối ưu nhất cho website imitsu.jp. Và kinh nghiệm được rút ra như sau:

• Tốc độ phản hồi máy chủ nhanh: mỗi request dưới 300ms cho 4G/mobile, 100ms cho desktop, đặc biệt là trang html (Doc).
• Mỗi request (html, css, js, image): dưới 50kB cho mobile và hạn chế nhất có thể trên bản desktop.
• Hạn chế số lượng request: dưới 35 requests, càng ít càng tốt
• Cache Policy: nên để thời gian cache lâu (6 tháng~), khi bạn cần thay đổi thì thêm parameter ở URL hoặc, thay đổi tên file.
• CDN: những file tĩnh nên sử dụng CDN để tăng hiệu quả tốc độ
• Sử dụng lazyload: kỹ thuật này giúp browser không tải ảnh khi chưa sử dụng (chưa hiển thị trong viewport)
• Tối ưu tải css và javascript: css ở head và javascript file thì ở dưới phần footer, inline phù hợp.
• Sử dụng worker để xử lý các script, tính toán không cần thiết ở main thread.
• Sử dụng loại định dạng ảnh mới như WebP, JPEG 2000, …

Trên đây là một số quy tắc chủ đạo xoay quanh các tiêu chí:

• Nhanh nhất có thể
• Nhỏ, nhẹ nhất có thể
• Sử dụng đúng nơi, đúng chỗ (không thừa)

Tuy các quy tắc thì nhiều, nhưng tựu chung cũng tập trung cho các tiêu chí trên. Đảm bảo các tiêu chí trên thì dù Goole có thay đổi các tiêu chí đánh giá, thì điểm số vẫn sẽ cao.

Core web vitals

Core web vitals sẽ là tiêu chí quan trọng ảnh hưởng đến xếp hạng tìm kiếm. Do dịch corona nên tiêu chí này được dời lại 1 năm. Năm 2021 sẽ áp dụng Core Web Vitals để đánh giá xếp hạng tìm kiếm. Tiêu chí này ảnh hưởng trực tiếp đến trải nghiệm người dùng. Vì vậy bạn nên chuẩn bị cải thiện sớm nhất có thể. Vào các bài viết sau mình sẽ trình bày chi tiết hơn về Core Web Vitals.

Testmysite và Pagespeed Insight: ưu tiên tối ưu tốc độ bằng cái gì?

Sơ lược về TestMySite và Pagespeed Insights

Pagespeed Insights là gì?

Pagespeed Insights là công cụ đo lường tốc độ tải trang pagespeed của một site sử dụng dữ liệu thực tế của người dùng trên Chrome kết hợp dữ liệu từ Lab (công cụ kiểm tra như Lighthouse). Từ kết quả đo lường, Pagespeed Insights sẽ đưa ra các chẩn đoán và khuyến nghị giúp tối ưu tốc độ tải trang/pagespeed.

Nhìn vào bảng biểu trên thì dễ dàng nhận ra Largest Contentful Paint (LCP) và Total Blocking Time là 2 tiêu chí có trọng số cao nhất. Đó cũng chính là tiêu chí nên tập trung giải quyết, sẽ được đề cập chi tiết trong các bài viết sau. Pagespeed Insights sử dụng Lighthouse để kiểm tra, nên bạn chỉ cần sử dụng Lighthouse và làm theo các khuyến nghị tối ưu tốc độ là được. Kết quả điểm số ở Lighthouse sẽ có chênh lệch so với Pagespeed Insights, cũng như chính bản thân Pagespeed Insights qua các lần kiểm tra khác nhau. Lý do là tốc độ kết nối vào máy chủ trang web tuỳ thuộc vị trí địa lý mà bị ảnh hưởng, A/B Test hoặc quảng cáo trên trang.

Testmysite là gì?

TestMySite là công cụ đo lường tốc độ tải trang thực tế trên điện thoại di động, đo lường chính ở tốc độ 4G hoặc 3G cho các nước chưa phổ biến 4G, hoặc đối tượng sử dụng trang web đó chỉ sử dụng mạng 3G. TestMySite cung cấp báo cáo dành riêng cho người làm tiếp thị (marketing) hoặc lập trình viên là khác nhau. Với mục đích cho người đọc báo cáo dễ hiểu, chứ các nguyên tắc cơ bản chủ yếu thì vẫn như phần trên mình đã trình bày.

Ngoài thông số tốc độ tải trang cho toàn site (thống kê theo tháng), TestMySite có 3 chức năng chủ yếu như sau:

• Cho phép kiểm tra tốc độ tải trang ở kết nối 4G từng đường dẫn URL riêng biệt, tối đa 10 đường dẫn
• So sánh số liệu với trang web đối thủ
• Cung cấp số liệu tính toán ROI

Nên ưu tiên Testmysitehay Pagespeed Insights?

Về cơ bản thì 2 công cụ này cùng phản ánh kết quả của pagespeed. Mặc dù thông số có khác nhau, nhưng mình đánh giá TestMySite tốt hơn ở góc độ thống kê hàng tháng theo thời gian (giây). Bạn sẽ biết được site của mình trong tháng trước đó nhanh hơn hay chậm hơn. Còn Pagespeed Insights cũng có thống kê nhưng là có đạt chuẩn của “Core web vital” hay không.

Theo chiến lược “Mobile First” mà hầu hết mọi người đang hướng tới, thì TestMySite đánh đúng trọng tâm hơn. Còn Pagespeed Insights không có kết quả toàn site, nên cũng ít ý nghĩa hơn. Hơn nữa thì kết quả của Pagespeed Insights cũng trùng lắp với Lighthouse, nên nếu bạn đã cải thiện theo Lighthouse thì kết quả tối ưu tốc độ cũng sẽ được phản ánh tốt trên Pagespeed Insights. Và cũng phản ánh lên TestMySite.

Fullstack Station Tips

• Bóp băng thông: thông số 4G dùng để test của Google là 1,638.4 Kbps, với độ trễ là 150 ms. Vì vậy khi bạn test phiên bản mobile, phải dùng thông số này thì mới chính xác. Mặc dù tốc độ xử lý của CPU vẫn mạnh hơn nhiều so với Moto G4.
• Tốc độ của máy chủ, dung lượng từng tập tin và số lượng request là rất quan trọng. Thông số tối ưu là dưới 100ms cho trang (HTML) với dung lượng ~50kB, và ~35 requests cho toàn bộ hình ảnh, css, js. Mỗi tập tin đều dưới 50kB là lý tưởng, dưới 100kB là chấp nhận được.

• Đừng quá phụ thuộc vào bất kỳ 1 công cụ nào để đánh giá hiệu suất website. Luôn sử dụng các công cụ kiểm tra tốc độ khác nhau như Pingdom hay GTMetrix để kiếm tra chúng ta áp dụng có hiệu quả hay không.
• Điểm số tầm 75~ cho mobile và 85~ cho desktop là một kết quả khá tốt. Nếu bạn tập trung vào điểm số quá nhiều, chỉ để lên 90~ mà bỏ qua các cơ hội phát triển các chức năng khác cho dịch vụ thì không nên cho lắm. Nếu có nhiều nhân lực thì triển khai, không phải suy nghĩ.

Bài viết này đã sơ lược hầu hết các quy tắc cần thiết để tối ưu tốc độ tải trang pagespeed. Các bài viết sau mình sẽ trình bày chi tiết và các thủ thuật để cải thiện. Các bạn nhớ đăng ký theo dõi để xem bài mới sớm nhất nhé.

The post Tối ưu tốc độ tải trang: “mili giây tạo triệu đô $$$” appeared first on Fullstack Station.

Để 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: (Thời điểm dùng domain businesscard.vn)

Đâ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ử:

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

=> 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

sudo yum install wget curl unzip gcc-c++ pcre-devel zlib-devel

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

NGINX_VERSION=1.9.9 #khai báo phiên bản Nginx đã xác định ở trên
cd /usr/src #Mình có thói quen build source từ thư mục này 
sudo wget http://nginx.org/download/nginx-${NGINX_VERSION}.tar.gz 
sudo tar zxvf nginx-${NGINX_VERSION}.tar.gz

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:

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

NPS_VERSION=1.10.33.2 #dòng này khai báo phiên bản của Pagespeed
cd /usr/src
sudo wget https://github.com/pagespeed/ngx_pagespeed/archive/release-${NPS_VERSION}-beta.zip -O release-${NPS_VERSION}-beta.zip
unzip release-${NPS_VERSION}-beta.zip
cd ngx_pagespeed-release-${NPS_VERSION}-beta/
wget https://dl.google.com/dl/page-speed/psol/${NPS_VERSION}.tar.gz
tar -xzvf ${NPS_VERSION}.tar.gz  # extracts to psol/

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

cd /usr/src/nginx-${NGINX_VERSION}/
# vì nên bật http/2 và ssl luôn
./configure --add-module=/usr/src/ngx_pagespeed-release-${NPS_VERSION}-beta --with-http_v2_module --with-http_ssl_module
make
sudo make install
# Sau khi chạy xong, kiểm tra lại:
ls /usr/local/nginx
#Nếu thấy: "conf html logs sbin" có nghĩa là đã build xong

Bước 7: tạo script init

sudo nano /etc/init.d/nginx

Copy script này vào:

#!/bin/sh
#
# nginx - this script starts and stops the nginx daemon
#
# chkconfig:   - 85 15
# description:  NGINX is an HTTP(S) server, HTTP(S) reverse 
#               proxy and IMAP/POP3 proxy server
# processname: nginx
# config:      /etc/nginx/nginx.conf
# config:      /etc/sysconfig/nginx
# pidfile:     /var/run/nginx.pid

# Source function library.
. /etc/rc.d/init.d/functions

# Source networking configuration.
. /etc/sysconfig/network

# Check that networking is up.
[ "$NETWORKING" = "no" ] && exit 0

nginx="/usr/sbin/nginx"
prog=$(basename $nginx)

NGINX_CONF_FILE="/etc/nginx/nginx.conf"

[ -f /etc/sysconfig/nginx ] && . /etc/sysconfig/nginx

lockfile=/var/lock/subsys/nginx

make_dirs() {
   # make required directories
   user=`$nginx -V 2>&1 | grep "configure arguments:" | sed 's/[^*]*--user=([^ ]*).*/1/g' -`
   if [ -z "`grep $user /etc/passwd`" ]; then
       useradd -M -s /bin/nologin $user
   fi
   options=`$nginx -V 2>&1 | grep 'configure arguments:'`
   for opt in $options; do
       if [ `echo $opt | grep '.*-temp-path'` ]; then
           value=`echo $opt | cut -d "=" -f 2`
           if [ ! -d "$value" ]; then
               # echo "creating" $value
               mkdir -p $value && chown -R $user $value
           fi
       fi
   done
}

start() {
    [ -x $nginx ] || exit 5
    [ -f $NGINX_CONF_FILE ] || exit 6
    make_dirs
    echo -n $"Starting $prog: "
    daemon $nginx -c $NGINX_CONF_FILE
    retval=$?
    echo
    [ $retval -eq 0 ] && touch $lockfile
    return $retval
}

stop() {
    echo -n $"Stopping $prog: "
    killproc $prog -QUIT
    retval=$?
    echo
    [ $retval -eq 0 ] && rm -f $lockfile
    return $retval
}

restart() {
    configtest || return $?
    stop
    sleep 1
    start
}

reload() {
    configtest || return $?
    echo -n $"Reloading $prog: "
    killproc $nginx -HUP
    RETVAL=$?
    echo
}

force_reload() {
    restart
}

configtest() {
  $nginx -t -c $NGINX_CONF_FILE
}

rh_status() {
    status $prog
}

rh_status_q() {
    rh_status >/dev/null 2>&1
}

case "$1" in
    start)
        rh_status_q && exit 0
        $1
        ;;
    stop)
        rh_status_q || exit 0
        $1
        ;;
    restart|configtest)
        $1
        ;;
    reload)
        rh_status_q || exit 7
        $1
        ;;
    force-reload)
        force_reload
        ;;
    status)
        rh_status
        ;;
    condrestart|try-restart)
        rh_status_q || exit 0
            ;;
    *)
        echo $"Usage: $0 {start|stop|status|restart|condrestart|try-restart|reload|force-reload|configtest}"
        exit 2
esac

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

sudo chmod +x /etc/init.d/nginx

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

#backup phiên bản nginx đang chạy
sudo mv /usr/sbin/nginx /usr/sbin/nginx.yum

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

sudo ln -fs /usr/local/nginx/sbin/nginx /usr/sbin/nginx

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

sudo ln -s /usr/local/nginx/conf/ /etc/nginx
# dùng để server tự bật nginx lên sau khi restart sudo chkconfig nginx on

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

sudo mkdir -p /var/ngx_pagespeed_cache
#user nginx được lấy trong file /etc/nginx/nginx.conf, có thể của bạn là nobody
sudo chown -R nginx:nginx /var/ngx_pagespeed_cache

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

##
# Pagespeed main settings

pagespeed on;
pagespeed FileCachePath /var/ngx_pagespeed_cache;

# Ensure requests for pagespeed optimized resources go to the pagespeed
# handler and no extraneous headers get set.

location ~ ".pagespeed.([a-z].)?[a-z]{2}.[^.]{10}.[^.]+" { add_header "" ""; }
location ~ "^/ngx_pagespeed_static/" { }
location ~ "^/ngx_pagespeed_beacon" { }

 # Filter settings
pagespeed RewriteLevel CoreFilters;
pagespeed EnableFilters collapse_whitespace,remove_comments,combine_css,rewrite_css,combine_javascript,rewrite_javascript;

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

sudo service nginx start

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

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%“

The post Tối ưu tốc độ website bằng module pagespeed cho Nginx appeared first on Fullstack Station.