CÁCH ĐẠT 100 / 100 ĐIỂM GOOGLE SPEED INSIGHT

Bạn cũng biết, tốc độ là một yếu tố quan trọng trong SEO. Dưới đây là những kinh nghiệm nhỏ, hi vọng nó sẽ giúp bạn ít nhiều.

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 đó, ta 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, ta 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.

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. Mình 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. Mình đ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à ta sẽ chặn WordPress làm việc này, và đưa mã gọi Google Font xuống footer. Đầu tiên 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. Chúng ta 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 phải 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. Mình 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ỹ).

Chúc bạn vững bước trên con đường tối ưu tốc độ của mình.