Trong thời đại công nghệ thông tin thì tốc độ đóng một vai trò rất quan trọng, mọi thứ đều cần phải có tốc độ cao và blog cũng không phải là ngoại lệ. Một blog có tốc độ load nhanh sẽ giữ chân được nhiều hơn những người dùng khó tính (luôn đòi hỏi mọi thứ phải tốc độ nhanh ). Nhân sự kiện viết lại toàn bộ code của Webzine đồng thời thực hiện các tối ưu để tăng tốc độ load cho blog, Hutek cũng xin viết một bài để chia sẻ những kinh nghiệm của mình đã áp dụng thành công.

Trước khi thực hiện

• Đối tượng áp dụng: Blog trên nền tảng WordPress dùng host Linux.
• Kiến thức: Bài viết này Hutek hướng dẫn các tối ưu bằng cách can thiệp vào code của theme vì vậy đòi hỏi bạn phải có kiến thức cơ bản về javascript, php, css, xhtml… Đặc biệt là phải nắm chắc Yslow User Guide vì chúng ta sẽ tiến hành các tối ưu dựa trên những gợi ý của Yslow.
• Trình duyệt: Firefox 3 (cài đặt sẵn Firebug và Yslow) // Đây là một phần rất quan trọng của quá trình, các bạn có thể tìm 2 extension này trên trang addon của Mozzila. Lưu ý là Yslow chạy không được tốt trên FF 3.5 nên tốt nhất là bạn dùng FF 3 để test blog.
• Editor: Để thực hiện các thay đổi trong theme các bạn cần một editor tốt, Hutek thì dùng Dreamweaver CS4 (có thể kết nối trực tiếp lên host để sửa rất tiện)

Đọc tài liệu về Yslow

Đây là slide rất hay và sẽ giúp ích bạn rất nhiều trong quá trình tối ưu blog

Kiểm tra hiện trạng

Trước khi Trước khi tiến hành các tối ưu chúng ta sẽ tiến hành kiểm tra hiện trạng của blog, đầu tiên là kiểm tra xem đã đạt chuẩn W3C về xhtml và css. Một theme viết đạt chuẩn này cũng sẽ góp phần làm cho tốc độ blog load nhanh hơn đáng kể. Để kết quả kiểm tra mang tính chân thực bạn cần phải deactive tất cả các plugin đang sử dụng vì các plugin sẽ thêm vào blog của bạn vô số các đoạn code phục vụ cho nó và vì vậy có thể ảnh hưởng đến kết quả kiểm tra.

Để kiểm tra cho blog của mình các bạn có thể truy cập vào hai địa chỉ sau:

http://validator.w3.org/ để kiểm tra xem có đạt chuẩn về xhtml không

http://jigsaw.w3.org/css-validator/ để kiểm tra xem có đạt chuẩn về css không

Sau khi kiểm tra nếu đạt thì tốt rồi, chuyển qua bước tiếp theo thôi còn trường hợp xấu là chưa đạt thì chúng ta cần xem xét kỹ bởi vì chưa đạt không hẳn đã là không tốt, nếu có quá nhiều error và warning thì hỏng rồi, phải tìm theme khác ngay hoặc code lại thôi (giống trường hợp của mình đây), nếu số lượng error và warning ít thì cũng có thể chấp nhận được, nếu có thể thì sửa luôn. Thường thì để pass css khá dễ nhưng để pass xhtml thì tuơng đối khó, ví dụ như trường hợp của mình, bắt  buộc phải viết lại toàn bộ code và kiểm tra liên tục, đến chỗ nào invalid là sửa ngay. Việc viết code đạt chuẩn của W3C theo Hutek hoàn toàn không khó nếu bạn chú ý, hơn thế nữa nó còn giúp coder rèn luyện tính cẩn thận cũng như hiểu sâu hơn cả về xhmtl và css, điều này rất có lợi. Để thuận tiện hơn cho việc phát triển theme thì các bạn có thể down về Valid Extension, nó sẽ giúp bạn test mà không cần truy cập vào trang http://validator.w3.org/ rất tiện lợi.

Để lựa chọn một theme tốt bạn có thể xem thêm bài viết này trên blog của Misao

Kết quả Yslow

Sau khi kiểm tra xong bước 1 chúng ta sẽ đưa ra quyết định là sẽ tiếp tục dùng theme, code lại hay thay mới theme, tiếp theo là kiểm tra bằng Yslow, dựa vào số điểm mà Yslow đánh giá chúng ta có thể biết được là blog của mình đang ở mức độ nào, nếu blog của bạn được điểm A (90-99) thì không còn gì phải bàn, bạn đã thực hiện quá tốt các tối ưu rồi nhưng số blog này là như lá mùa thu đa phần các blog đều không đạt được số điểm này và như thế thì mới có bài viết này.

Để kết quả chính xác thì chúng ta cũng cần deactive tất cả các plugin.

Tiếp theo là chúng ta cần phân tích kết quả do Yslow trả ra, nhìn vào hình thì có thể thấy Yslow dùng 22 tiêu chí để đánh giá và phân thành 6 mục lớn. Những tiêu chí nào được đánh điểm A thì chúng ta không cần quan tâm mà chỉ cần quan tâm đến những tiêu chí bị điểm thấp thôi. Bằng cách click vào những tiêu chí này chúng ta sẽ biết được những gợi ý và lý giải mà Yslow đưa ra.

Tiến hành tối ưu

Theo Hutek thì những tối ưu về Gzip là đem lại kết quả rõ rệt nhất và trong phần 1 này Hutek sẽ hướng dẫn những thủ thuật cho tối ưu về Gzip. Sau khi thực hiện tối ưu với Gzip, dung lượng tải về của blog của bạn sẽ giảm đi đáng kể (từ 50% đến 90%). Hầu như mọi thành phần trong blog của bạn đều có thể gzip, từ html, css đến js. Việc tiến hành Gzip cũng không quá khó, để Gzip cho phần html bạn chỉ cần thêm đoạn code sau vào phần trên cùng của file header.php

<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>

Để kiểm tra xem blog của mình đã được Gzip hay chưa bạn có thể truy cập địa chỉ sau:
http://www.gidnetwork.com/tools/gzip-test.php
Tiếp theo là Gzip cho css và js, phần này khó hơn, có nhiều cách nhưng theo Hutek thì cách dưới đây là tương đối dễ thực hiện.

Để Gzip cho css các bạn làm như sau:

- Thay file style.css thành style.css.php. Mục đích là để chèn code php vào
- Chèn đoạn code sau vào trên cùng của file vừa đổi tên

<?php 
ob_start ("ob_gzhandler");
header("Content-type: text/css; charset: UTF-8");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 ;
$ExpStr = "Expires: " . 
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);
?>

- Sửa lại trong header.php để gọi lại style.
Thay đoạn này

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url');type="text/css" />

bằng

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style.css.php" type="text/css" />

Như vậy là chúng ta đã Gzip cho css.
Để gzip cho js thì chúng ta cũng làm tương tự, ví dụ như ở đây để gzip thư viện jquery (jquery.js) Hutek sẽ làm như sau.
- Đổi tên file jquery.js thành jquery.js.php. Mục đích là để chèn code php vào
- Chèn đoạn code sau vào phần trên cùng của file vừa đổi tên

<?php 
	header("Content-type: text/javascript");
	ob_start ("ob_gzhandler");
	header("Content-type: application/x-javascript; charset: UTF-8");
	//header("Cache-Control: must-revalidate");
	$offset = 60 * 60 ;
	$ExpStr = "Expires: " .
	gmdate("D, d M Y H:i:s",
	time() + $offset) . " GMT";
	header($ExpStr);
?>

- Gọi lại js
Thay

<script type='text/javascript' src='http://yourdomain.com/wp-content/themes/yourtheme/js/jquery.js' ></script>

bằng

<script type='text/javascript' src='http://yourdomain.com/wp-content/themes/yourtheme/js/jquery.js.php' >

- Nếu blog của bạn có nhiều file js thì một cách tối ưu là gom chúng lại, tốt nhất là để duy nhất một file js (của Hutek là 2 file), nếu vì lý do nào đó mà không thể gộp lại thì làm tương tự cho các file còn lại.
Ok, như vậy là chúng ta đã tiến hành Gzip cho toàn bộ các thành phần chính của blog, bây giờ các bạn có thể kiểm tra lại bằng Yslow, nếu như điểm tăng lên và các file css, js không còn hiện trong phần gợi ý của yslow nữa là thành công.