1. Giao diện Butan của Theme Junkie.
2. Hosting VPS của Digital Ocean, gói 5 USD/ tháng, server Singapore.
3. Gói máy chủ LEMP, webserver Nginx, PHP 7.0.
4. Hình ảnh được nén bằng TinyPNG và chuyển qua Web.P bằng Short Pixel.
5. Plugin caching Autoptimize của Frank Goossens.
6. Plugin Complete Analytics Optimization Suite của Daan van den Bergh để tải cục bộ Google Analytics.
7. Chặn WordPress gọi mặc định Google Font và gọi nó từ footer.
8. Plugin WP Deferred Javascripts của LABjs để tải bất đồng bộ JavaScript.
9. Quy định thời gian lưu file tĩnh (js, css, png, jpeg…) ở trình duyệt người dùng.
10. Bật GZIP, Keep Alive và Zend Opcode.

Tuy nhiên, sau khi tối ưu xong, thấy 100 điểm chưa phải là tất cả. Còn nhiều việc phải làm, cụ thể như:
– Tối ưu trên các mã nguồn khác ngoài WordPress như Mangeto, Joomla, OpenCart… hoặc source tự build.
– Tối ưu ở tầng server (back-end) chứ không chỉ ở tầng ứng dụng (front-end).
– Web có lượng truy cập lớn (vài chục ngàn lượt truy cập mỗi ngày) hoặc chạy nhiều web trên cùng một hosting.
– Dùng Chrome DevTool để tối ưu tốc độ tốt hơn dùng Google Speed Insight.
– Tối ưu tốc độ, phải cân bằng với bảo mật và giao diện người dùng (UI).

1. Nó miễn phí. Nếu có tiền, bạn có thể thuê một lập trình viên về tối ưu cho bạn hoặc nâng cấp gói hosting lên. Chắc chắn, website của bạn sẽ nhanh hơn cách mà Quang chỉ bạn làm. Nhưng thuê lập trình viên, bạn định trả họ bao nhiêu tiền? Nâng cấp gói hosting lên, cũng tốt, nhưng một năm bạn tốn thêm bao nhiêu? Nếu bạn không quá khó khăn về tài chính, thì đây là lựa chọn tốt nhất. Nhưng bạn đang tự làm SEO cho mình từ đầu tới cuối để tiết kiệm chi phí, thì bạn có sẵn sang chi tiền cho việc này không?
2. Nó đơn giản. Quang muốn ai cũng làm được những điều này. Chỉ cần cài thêm vài plugin, chọn vài cái nút, thế là xong. Quang biết, can thiệp trực tiếp vào code luôn tốt hơn dùng plugin, vì bạn không phải qua bước trung gian. Nhưng muốn làm được chuyện này, bạn phải biết code. Bạn nghĩ xem, 10 người làm SEO, thì có mấy người biết code? Hơn nữa, dù bạn đã có sẵn nền tảng kỹ thuật rồi, bạn cũng phải bỏ ra cả tháng trời để tìm cách tối ưu. Thời gian, công sức cũng là tiền bạc đấy thôi.
3. Bài viết Việt hóa từ KeyCDN. Đúng, Quang có đọc bài viết của KeyCDN. Thậm chí, đoạn code mà Quang dùng để tối ưu Google Font và can thiệp vào file nginx.conf, Quang cũng lấy từ KeyCDN. Nhưng nếu không có bài của KeyCDN, Quang có làm được không? Quang nghĩ là được. Internet quá rộng lớn mà bạn. Nếu không có KeyCDN, Quang sẽ vào Google Developer để đọc về Google Font, sau đó họ có dẫn nguồn qua TypeKit, và ở TypeKit mới chính là nơi hướng dẫn bạn khai báo code chính xác nhất (code ở KeyCDN cũng lấy ở TypeKit chứ đâu). Nếu không có KeyCDN, Quang sẽ vào trang chủ của Nginx, hay đơn giản hơn là vào Tutorial của Digital Ocean để lấy mã tối ưu cho file nginx.conf. Có vô vàn cách làm để đạt được thứ mình muốn, nếu bạn chịu khó đọc tài liệu tiếng Anh.
4. 100 điểm của Google Speed Insight không có nghĩa lí gì. Đúng. Quang tối ưu lên 100 điểm của GSI chỉ để chứng minh là, việc đạt được 100 điểm GSI là thứ có thể làm được. Nhưng làm được rồi, bạn thấy đấy, GSI cũng chỉ tương đối. GSI không đo được các thông số quan trọng khác như số request, kích thước của từng file, luồng waterfall của các mã HTML, CSS, JS, hình ảnh… Quang cũng có nói ở cuối bài viết, đó là GSI không hẳn là công cụ tốt nhất để đo tốc độ, mà bạn nên dùng thêm Pingdom và đặc biệt là Chrome DevTool đấy thôi.
5. Tốc độ cũng chỉ là cái đinh, nó là gì cả trong SEO. Đúng là tốc độ chỉ là chuyện nhỏ, nhưng nhiều thứ nhỏ nhỏ như vậy, gộp lại mới ra được cái lớn. Bạn còn phải tối ưu trải nghiệm người dùng nữa. Đúng luôn. Tốc độ chỉ là một phần câu chuyện. Muốn làm người dùng hài lòng, từ đó ra quyết định mua hàng, bạn cần phải tạo ra được nội dung tốt và trải nghiệm tốt. Muốn có nội dung tốt, bạn phải học thêm về content marketing. Nếu muốn có trải nghiệm tốt, bạn phải học thêm về bố cục, kiểu chữ, màu sắc, UI, UX, vốn là những thứ của dân thiết kế. Nhưng bạn chỉ là dân SEO, chứ đâu phải là dân content hay thiết kế đâu. Nếu muốn tốt hơn, bạn phải học thêm kiến thức từ các ngành khác, hoặc có người trong team hỗ trợ bạn.

Bạn cũng biết, tốc độ là một yếu tố quan trọng trong SEO.

1. Giao diện. Quang chọn giao diện Butan của Theme Junkie. Nó miễn phí, thiết kế đơn giản, nhưng tinh tế.
2. Hosting. Quang chọn VPS của Digital Ocean, gói 05 USD/tháng, server Singapore. Gói máy chủ Quang cài là LEMP. Quang chọn Nginx, vì nó là webserver gọn nhẹ và nhanh nhất hiện nay (Thiên Địa cũng đang chạy Nginx). Và Quang chọn PHP 7.0, vì nó nhanh ít nhất gấp đôi so với phiên bản ngay trước đó là PHP 5.6.
3. Hình ảnh. Quang dùng TinyPNG để nén ảnh trước khi tải lên web. Kích thước trung bình mỗi ảnh sau khi nén khoảng 50kB. Tiếp đó, Quang dùng plugin ShortPixel để nén ảnh chế độ lossy và chuyển ảnh định dạng JPG, PNG sang Web.P để dùng khi cần. Tại sao, Quang lại quan tâm nhiều tới hình ảnh như vậy? Vì nếu làm nhiều, bạn sẽ thấy, hình ảnh là thứ ngốn dung lượng vô cùng khủng khiếp (như Blog của Quang, nó chiếm từ 70 – 80% dung lượng).
4. Caching. Quang dùng plugin Autoptimize của Frank Goossens. Quang chọn các mục sau.
   a. Optimize HTML Code, Optimize JavaScript Code, Optimize CSS Code, giúp nén file HTML, JS và CSS. Đây là lựa chọn an toàn, bạn nên chọn chúng.
   b. Also aggregate inline JS, Also aggregate inline CSS, Inline all CSS. Nó gộp các file cùng dạng lại với nhau thành một file(aggregate nghĩa là gộp lại) và nhúng mã code CSS trực tiếp vào HTML. Đây là lựa chọn nâng cao. Bạn cần thử-sai (trial and error) khi chọn chúng.
   c. Save aggregated script/css as static files, giúp lưu file CSS và JS đã gộp lại thành file tĩnh. Tuy nhiên, bạn cần bật nén và quy định thời gian lưu file tĩnh cho trình duyệt người dùng trước khi chọn chế độ này.
5. Google Analytics. Quang dùng plugin CAOS: Complete Analytics Optimization Suite của Daan van den Bergh. CAOS tạo một file analytics.js cục bộ và cập nhật dữ liệu thường xuyên từ Google. Quang điền mã code Google Analytics (như của Quang là UA-101405175-1), và chọn nơi chèn mã code là footer.
6. Google Font. Mặc định, WordPress gọi hàm wp_enqueue_scripts để load font lên header, nên làm chậm hiển thị màn hình. Giải pháp là Quang sẽ chặn WordPress làm việc này, và đưa mã gọi Google Font xuống footer. Đầu tiên, Quang chọn tính năng Remove Google Font trong phần CSS Options của plugin Autoptimize. Sau đó, Quang chèn đoạn code sau vào footer: <link href=’https://fonts.googleapis.com/css… rel=’stylesheet’ type=’text/css’>. Trong đó, Open+Sans:400,400italic,700,700italic là họ font chữ (Open Sans) và các kích cỡ chữ Quang muốn dùng (400, 700 point, dạng thường và in nghiêng).
7. Tải bất đồng bộ JavaScript. Quang dùng plugin WP Deferred Javascripts của LABjs, một mã nguồn mở được phát triển bởi Getify Solutions. Nó chuyển các file javascript xuống footer, rồi tải bất đồng bộ chúng. Quang chỉ cần kích hoạt plugin, và không cần làm gì thêm. Tuy nhiên, nếu dùng, bạn cần kiểm tra lại xem nó có ảnh hưởng tới giao diện không.
8. Nâng cao lưu dữ liệu vào bộ nhớ trình duyệt người dùng. Vì chạy Nginx, nên Quang chèn đoạn code sau vào file nginx.conf: location ~* \.(js|css|png|jpg|svg|jpeg|gif|ico|pdf)$ { expires 7d; add_header Cache-Control “public, no-transform”;}. Giải thích code: js|css|png|jpg|svg|jpeg|gif|ico|pdf: đây là các loại file bạn sẽ lưu vào trình duyệt, bao gồm javascript, css, các định dạng ảnh png, jpg, jpeg, gif, các icon và pdf. expires 7d: là thời gian 07 ngày (d là viết tắt của từ day). Bạn có thể sửa thành số ngày bạn muốn, ví dụ 5d (5 ngày) hoặc 14d (14 ngày).
9. Bật GZIP, Keep Alive và Zend Opcode. Quang dùng hosting của Digital Ocean, nên đã được bật sẵn GZIP và Keep Alive. Tương tự, Quang cài VPS bằng HocVPS Script của anh Luân Trần, nên chương trình cũng tự động cài sẵn Zend Opcode.

100 ĐIỂM, CHƯA PHẢI LÀ TẤT CẢ

Việc tối ưu trên, Quang chỉ mới làm trên nền WordPress, lượng truy cập trung bình, chỉ chạy 01 web / 01 hosting và chủ yếu can thiệp ở tầng ứng dụng (front-end). Mọi thứ chỉ mới bắt đầu, vì bạn sẽ thấy còn nhiều việc phải làm. Cụ thể như:

1. Tối ưu trên các mã nguồn mở khác (như Mangeto, Joomla, OpenCart…) hoặc mã nguồn tự build. Các nền tảng này không có nhiều plugin sẵn có như WordPress, nên bạn phải hiểu được nguyên tắc, để tối ưu cho chính mã nguồn của mình.
2. Tối ưu ở tầng server (back-end). Ở tầng này, ngoại trừ share hosting, sẽ không có giao diện đồ họa cho bạn dùng. Hầu như 100% bạn thực hiện bằng dòng lệnh, bạn phải đọc hiểu và sửa được code là điều bắt buộc.
3. Website có lượng truy cập lớn hoặc chạy nhiều webs trên cùng một hosting. Lúc này, bạn cần tối ưu thêm về caching và cân bằng tải, ví dụ như Memcached, Varnish, Redis, FastCGI… Chúng đều là caching ở tầng server. Bạn cần hiểu được thông số của hệ thống, và cần thử nghiệm xem công nghệ nào là phù hợp nhất với nhu cầu của mình.
4. Google Speeding Insight (GSI) thực chất là công cụ để đo hiệu suất web, chứ không hẳn để đo tốc độ tải trang. Quang từng thấy một số website chỉ đạt 30 – 40 điểm trên GSI, nhưng tốc độ load trang chỉ khoảng 1s. Bạn nên dùng thêm Pingdom và Chrome DevTool để đo lường được chính xác. Bạn có thể đọc thêm bài viết của Ilya Grigorik, một kỹ sư phát triển hiệu suất web cho trình duyệt Chrome để biết thêm.
5. Tối ưu tốc độ, phải cân bằng với bảo mật và giao diện người dùng (UI). Bởi vì, các plugin bảo mật (WordFence, iTheme Security, BBQ…) thường làm web chạy chậm khá nhiều. Ngoài ra, khi gộp và tải bất đồng bộ các file CSS, và đặc biệt là JavaScript, nếu không tương thích, chúng có thể làm vỡ giao diện của bạn. Nó giống như bạn chạy xe máy 80km/h, nhanh vút, nhưng dễ bị tai nạn (bảo mật) té sấp mặt rồi dính sẹo ( mất thẩm mỹ).

Bài viết của tác giả Quang Silic