Mod PageSpeed - Tổng hợp các bài viết về Mod PageSpeed

Mọi người đều biết tốc độ tải trang web không chỉ ảnh hưởng đến người dùng, mà còn là yếu tố ảnh hưởng trực tiếp đến việc xếp hạng của Google, như họ đã khẳng định từ 2010. 
 
Bài viết này sẽ giúp các bạn tối ưu hóa máy chủ để làm SEO tốt hơn thông qua Module Page Speed được Google phát triển. Giúp tăng tốc và cải thiện thời gian tải website nhanh hơn, Module Page Speed đã giúp tối ưu hóa hơn 350000 website trên thế giới, các nhà cung cấp dịch vụ nổi tiếng như <a href="http://blog.dreamhost.com/2010/11/04/mod_pagespeed-now-available/">DreamHost</a>, GoDaddy, EdgeCast, SiteGround họ cũng sử dụng mod_pagespeed này của Google. 
 
 
<div style="text-align: center;">
<img src="http://www.manseo.com/wp-content/uploads/2013/07/apache_pagespeed.jpg" /></div>
 
 
Qua việc tối ưu hóa máy chủ bạn không cần cài thêm bất kỳ plugin nào để hỗ trợ SEO (ngoài trừ All in one SEO Pack,WordPress SEO ra nhé) tốt hơn về mặt kỹ thuật. 
 
Google giới thiệu mod_pagespeed tại địa chỉ: <a href="https://developers.google.com/speed/pagespeed/mod">https://developers.google.com/speed/pagespeed/mod</a> 
 
Video clip giới thiệu: 
 
Để đơn giản hóa việc cài đặt Module này, mình giới thiệu website: <a href="http://www.prajith.in/?s=pagespeed">http://www.prajith.in/?s=pagespeed</a> để các bạn tham khảo thêm. 
 
Đầu tiên, bạn cần cài đặt chương trình hỗ trợ SSH, ở đây mình demo thông qua <a href="http://www.dartmouth.edu/comp/soft-comp/software/downloads/windows/ssh-sftp/install.html">SSH Secure Shell</a> 
 
Bước 1: Đăng nhập tài khoản Root vào Server. 
 
Bước 2: Tải tập tin cài đặt về server bằng mã lệnh sau: 
 
Code:wget http://prajith.in/scripts/mod_pagespeed-cust-opts.tar.gz 
 
<div style="text-align: center;">
<a href="http://www.manseo.com/wp-content/uploads/2013/07/pagespeed_1.jpg"><img height="336" src="http://www.manseo.com/wp-content/uploads/2013/07/pagespeed_1.jpg" width="640" /></a></div>
 
Bước 3: Sau khi tải xong tiến hành cài đặt bằng lệnh sau: 
Code:tar -C /var/cpanel/easy/apache/custom_opt_mods -xzf mod_pagespeed-cust-opts.tar.gz 
 
<div style="text-align: center;">
<a href="http://www.manseo.com/wp-content/uploads/2013/07/pagespeed_2.jpg"><img height="368" src="http://www.manseo.com/wp-content/uploads/2013/07/pagespeed_2.jpg" width="640" /></a></div>
 
Bước 4: Cài đặt thì có 2 cách, bạn có thể sử dụng tiếp command bên dưới đây để chạy: 
 
Code:/scripts/easyapache 
 
Hoặc cài đặt thông qua EasyApache trên WHM (nếu server bạn sử dụng): 
 
Đây là toàn cảnh của EasyApache, tại đây bạn cũng có thể cập nhật Apache, PHP,… lên phiên bản mới nhất. 
 
<div style="text-align: center;">
<a href="http://www.manseo.com/wp-content/uploads/2013/07/pagespeed_3.jpg"><img height="515" src="http://www.manseo.com/wp-content/uploads/2013/07/pagespeed_3.jpg" width="640" /></a></div>
Bấm chọn Start customizing based on profile để tiến hành build thêm Module mới này. 
Sau đó bấm next để bỏ qua 2 bước Apache Version và PHP Version như giới thiệu bên trên, bạn có thể cập nhật lên phiên bản mới nhất, hoặc không chắc thì cứ bấm Next. 
 
Đến bước 4 (Short Options List), bạn bấm chọn thêm Mod PageSpeed (Customized By Prajith). Còn lại để mặc định, hoặc bạn có ý định cài đặt thêm thì có thể chọn thêm. Ví dụ trong ảnh dưới có Xcache cũng rất phổ biến. 
 
<div style="text-align: center;">
<a href="http://www.manseo.com/wp-content/uploads/2013/07/pagespeed_4.jpg"><img height="640" src="http://www.manseo.com/wp-content/uploads/2013/07/pagespeed_4.jpg" width="606" /></a></div>
Cuối cùng bấm chọn Save and Build để hoàn tất. 
 
<div style="text-align: center;">
<a href="http://www.manseo.com/wp-content/uploads/2013/07/pagespeed_5.jpg"><img height="555" src="http://www.manseo.com/wp-content/uploads/2013/07/pagespeed_5.jpg" width="640" /></a></div>
Quá trình cài đặt đang diễn ra, chú ý không tương tác gì thêm. 
Sau đó, để tiến hành cấu hình bộ lọc (Filters) để Mod_PageSpeed vận hành theo ý mình, bạn cấu hình tập tinpagespeed.conf nằm ở: 
 
Code:/usr/local/apache/conf/pagespeed.conf 
 
<div>
Để tìm hiểu rõ hơn về cơ chế hoạt động, cũng như cách vận hành của từng bộ lọc mời bạn truy cập địa chỉ:<a href="https://developers.google.com/speed/pagespeed/module/filters">https://developers.google.com/speed/pagespeed/module/filters</a> 
 
Ngoài ra, Google cũng tạo website so sánh về các bộ lọc tại địa chỉ: <a href="http://modpagespeed.com/">http://modpagespeed.com</a> 
 
Tổng quan bộ lọc của Mod_PageSpeed, phần này đặc biệt rất quan trọng, đòi hỏi người sử dụng phải am hiểu từng Module của Page Speed mới tiến hành cấu hình chuẩn được. 
 
<div style="text-align: center;">
<a href="http://www.manseo.com/wp-content/uploads/2013/07/pagespeed_6.jpg"><img height="565" src="http://www.manseo.com/wp-content/uploads/2013/07/pagespeed_6.jpg" width="640" /></a></div>
 
Mình ví dụ 1 cái là lazyload_images, cái này rất phổ biến, khi bạn load website tới đâu nó sẽ hiển thị hình ảnh tới đó, WordPress cũng có plugin này, ví dụ cái Lazy Load này nhé <a href="http://wordpress.org/plugins/lazy-load/">http://wordpress.org/plugins/lazy-load/</a> nhưng mình có thể đảm bảo với bạn khi đã sử dụng Mod_PageSpeed rồi, thì mấy cái plugin đại loại thế này rất nhạt <img src="http://www.manseo.com/wp-includes/images/smilies/icon_biggrin.gif" /> 
 
Để sử dụng Lazyload, bạn thêm mã: 
 
Code:ModPagespeedEnableFilters lazyload_images 
 
 
 
 
Hoặc đối với đoạn code bên trên chỉ cần thêm dấu phẩy sau các module khác. 
Google giải thích về Lazyload Images: <a href="https://developers.google.com/speed/pagespeed/module/filter-lazyload-images">https://developers.google.com/speed/pagespeed/module/filter-lazyload-images</a> 
 
Demo về lazyload_images: <a href="http://modpagespeed.com/lazyload_images.html?ModPagespeed=off">trước khi sử dụng Page Speed</a>, <a href="http://modpagespeed.com/lazyload_images.html?ModPagespeed=on&ModPagespeedFilters=lazyload_images">sau khi sử dụng Page Speed</a> (để có kết quả tốt nhất, bạn nên lướt web ẩn danh để tránh bị lưu cache). 
 
Sau khi cấu hình và save tập tin pagespeed.conf, bạn phải Restart (khởi động lại) Apache thì mới có hiệu lực. 
 
<div style="text-align: center;">
<a href="http://www.manseo.com/wp-content/uploads/2013/07/restart_apache_1.png"><img height="160" src="http://www.manseo.com/wp-content/uploads/2013/07/restart_apache_1.png" width="640" /></a></div>
Nhập vào khung tìm kiếm HTTP Server (Apache), sau đó nhấn Yes để xác nhận. 
 
<div style="text-align: center;">
<a href="http://www.manseo.com/wp-content/uploads/2013/07/restart_apache_2.png"><img height="155" src="http://www.manseo.com/wp-content/uploads/2013/07/restart_apache_2.png" width="640" /></a>Apache đã được khởi động lại thành công.</div>
 
Các bạn muốn nhanh hơn 1 chút nữa, thì thêm đoạn này vào tập tin .htaccess nó sẽ lấy cache trình duyệt (chú ý đặt tại thư mục root) nội dung sau: 
 
PHP: 
SetOutputFilter DEFLATE 
Header set Expires “max-age=29030400, public” 
Header unset ETag 
FileETag None 
ExpiresActive On 
ExpiresDefault A600 
ExpiresByType image/x-icon A2592000 
ExpiresByType application/x-javascript A604800 
ExpiresByType text/css A604800 
ExpiresByType image/gif A2592000 
ExpiresByType image/png A2592000 
ExpiresByType image/jpeg A2592000 
ExpiresByType text/plain A1200 
ExpiresByType application/x-shockwave-flash A2592000 
ExpiresByType video/x-flv A2592000 
ExpiresByType application/pdf A2592000 
ExpiresByType text/html A600 
 
Nếu có thắc mắc hoặc không hiểu vấn đề nào vui lòng post tại đây để mình giúp đỡ. Hãy thử và cảm nhận tốc độ của website mình nhanh như thế nào nhé.</div>