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

Đây là ảnh kết quả tốc độ blog Quang Silic đo được ngày 10/09/2017 bằng Google Speed Insight và Pingdom.

Bạn cũng biết, tốc độ là một yếu tố quan trọng trong SEO.
Quang từng bỏ nhiều thời gian để tối ưu yếu tố này.

Dưới đây là những kinh nghiệm nhỏ của Quang, 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 đó, 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ỹ).

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

Tác giả: Quang Sillic

 

Bài này lấy từ wp viet nam đúng k nhỉ

 

Bài này khá hay cho anh em mới làm wp

 

Bài của bạn rất hay. Cảm ơn bạn đã đăng bài

 

Khá hay. Để Em đi check xem site E thế nào hihi!

 

Ai rành về code có nhận tối ưu page lên 100 điểm không

 

Cái này phải là dân kỹ thuật hy vọng mới thành công, dân lơ tơ mơ chắc sẽ không làm được, nên khi đặt website thì nên kêu lập trình tôi ưu hết tất cả

 

không hiểu lắm bạn ơi. tốc độ web mình đang khá là chậm, ngoài tối ưu ảnh ra (ảnh mình dùng pts nén chỉ tầm 20 đến 30kb) với dùng cái Autoptimize. Cache thì mình dùng thêm Litespeed cacche. mà điểm test thỉ chỉ được tầm 60 70 thôi à.

 

Web mình loat thấy khá chậm, check thấy có 65/100.

 

Em tối ưu tẹt bô được có 96 điểm thôi, cơ mà thế là thành công rồi, tốc độ thực khoảng 4 giây gì đó, mất xừ 1 giây lúc đầu không biết thằng nào ngốn mất tìm không ra.

 

Cảm ơn những chia sẻ của anh, nhưng nhờ a cho xin link để test Speed Insight của Google với ah. Bài viết hay mà chưa cụ thể nên ae muốn làm rõ.

 

Của bác đây

Mã:

https://developers.google.com/speed/pagespeed/insights/?hl=vi

 

Đã tối ưu nhưng thứ hạng web bị giảm một cách nghiêm trọng!!!!

 

haha. thế thì b phải xem lại cách làm đi

 

Mình chưa kiểm tra site của mình. Ko biết có gì không ,mình ko hiểu về code lắm

 

khÔNG Biết như thế nào nữa. mình lại back up lại từ đầu!

 

Hihihi. Em chào các bác hân hạnh làm quen các bác a

 

thật tuyệt, mình đang dùng wordpress đây, cảm ơn bạn về những chia sẻ quý báu này

 

mình làm lòi não luôn cũng có 72 điểm wp mà tắt mấy cái js dễ bị lỗi

 

việt nam thì làm gì có ông nào nổi 100/100 70 là max rồi