100 điểm cho GTmetrix, Pingdom và PageSpeed Insights

Dưới đây là các bước để bạn có thể đạt được 100 điểm tuyệt đối cho GTmetrix, Pingdom và PageSpeed Insights với hệ thống chạy WordPress và WooCommerce

1. Thời gian phản hồi của máy chủ dưới 200ms

Ta nên biết rằng, dù có đạt điểm số tối ưu, nhưng hosting chậm thì cuối cùng vẫn chậm thôi, hosting vẫn là cái quan trọng nhất của việc tăng tốc độ cho website

Thời gian phản hồi thường là giá trị đầu tiên khi bạn kiểm tra tốc độ trên các trang như GTmetrix, Pingdom, gọi chính xác nhất thì gọi nó là TTFB (time to first byte) con số này phải đạt < 200 ms thì mới được cho là một hosting có độ phản hồi tốt

Để kiểm tra thì bạn có thể vào bytecheck.com để kiểm tra cho nhanh cũng được, có điều con số này nó cũng không hẳn đúng với trường hợp của chúng ta, những người sống tại Việt Nam, trong khi các trang check đó phần nhiều ở nước ngoài, cụ thể nhất thì bạn cứ vào bằng trình duyệt, xong ấn F12, vào phần Network, thấy chỉ số TTFB < 200 ms là được (cái con số 200 ms này là theo khuyến cáo của Google hé)

Trong lúc tìm hiểu, mình đã thấy có dịch vụ, con số này đạt gần như là min, thấp tới hoang đường 😀 Dịch đó tên là Pantheon, nó có thể đạt tới 22 ms cho chỉ số TTFB (bạn có thể check domain live-ngoirungdui.pantheonsite.io (trang này mình demo thử dịch vụ của họ) nếu thích :D)

Tuy thế, giá nó cao, ~$25/month, nó cam đoan là 10.000 lượt truy cập 1 tháng chạy xé gió 😀 Ụ móa, chúng nó, 10k lượt truy cập 1 tháng, là 1 ngày cỡ 333 lượt truy cập, tính làm lol ghề thế, người ta 1 phút 300-500 người online cũng chỉ $10-15/month là kịch, chưa kể nó không có server tại châu Á, thành ra nó tốt thì tốt thật, nhưng mình nghĩ không ai ở Việt Nam có nhu cầu dùng nó 😀 có điều dùng nó thì cứ tự tin trang của bạn sẽ là những trang có tốc độ truy cập nhanh nhất thế giới :]]

Hotsing thèng ngoirungdui.com đang dùng gói FREE TRIAL của Google mà cũng được ~ 400 ms, trong khi nó server tại Sing, và cái trang check toàn là US, Canada không á ^_^

Nói chung cái con số về TTFB là để bạn tham khảo một cái hosting, cứ ở vị trí của bạn (Việt Nam chẳng hạn), dùng trình duyệt kết nối vào xong nhìn TTFB, nếu < 200 ms là một con số hoàn hảo, còn không thì ~ 1s cũng được rồi, vì thật ra ta không cảm nhận nổi 22ms và 1000 ms đâu :]]  để hình dung thì chỉ số TTFB trên web nó như chỉ số ping khi bạn chơi game ấy, càng nhỏ càng tốt, thành ra mình thấy trang tocdo.net đang dùng cách tính theo download từ server tới server để kiểm tra speed là không hoàn toàn chính xác, speed download nó phần nhiều liên quan tới chịu tải và băng thông hơn là tốc độ

2. Sử dụng CDN

Bạn có thể dùng bất cứ dịch vụ CDN nào phù hợp với bạn, tùy giá và nhu cầu, có điều kiện dùng MaxCDN thì vẫn là bá đạo nhất rồi, nó gần như có đủ các server ở các nước, và đặc biệt là có cả server tại Việt Nam, nên gần như dùng MaxCDN là số 1 ở điều kiện hiện tại 😀 tuy thế nó khá là mắc, không nhiều người thừa tiền chỉ vì cái CDN này đâu, bạn có thể kết hợp KeyCDN (free trial 30 day) và Jetpack, lý do tại sao thì do Jetpack chỉ CDN được images và nó FREE, truy cập ở Việt Nam rất tốt (ping khoảng ~4x), KeyCDN trong vài trường hợp đứt cáp quốc tế, mình thấy nó phải load 2-3s mới xong tấm hình, còn Jetpack thì luôn luôn là < 1s 😀

2.1 Bạn có thể sử dụng tính năng CDN của WP Rocket để kết hợp làm chuyện này 😀 config thì như nhìn thôi 😀 tuy thế Jetpack nó chỉ CDN được file ảnh, nên bạn phải thêm các font khác vào phần Exclude files, như ở đây cái theme Flatsome mình đang dùng thì điền dòng đó

/wp-content/themes/flatsome/assets/css/icons/(.*).woff2

2.2 Kèm theo phải set cookie cho mấy file font này, nếu server chạy Nginx thì set như bên dưới

location ~* .(?:ttf|ttc|otf|eot|woff|woff2)$ {
expires 1M;
access_log off;
add_header Pragma public;
add_header Cache-Control “public”;
}

2.1 và 2.2 bạn không cần làm nếu chỉ dùng 1 dịch vụ CDN thuần túy cho toàn bộ site, do ở đây mình dùng FREE, nên phải tận dụng cả Jetpack vào thôi, còn dịch vụ CDN bình thường họ tự cache tất cả các thứ rồi, không cần làm gì nữa cả, bài này mình đang nói chuyện là để được 100 điểm hoàn toàn ở tất cả các trang GTmetrix, Pingdom và PageSpeed Insights nên mới nói thêm thế thôi 😛

Việc dùng CDN cho ảnh, mình hoàn toàn đồng tình, vì nó hiệu quả, vừa nhanh vừa giảm tải cho server, tuy thế cache file CSS và JavaScript nó hơi máy móc, vì khi bạn vào trang web lần đầu, trình duyệt đã tự cache lại file rồi, không phải load lại, nó lại nhẹ hều, toàn vài chục kb hay 200-300kb là kịch, thật sự không cần thiết phải dùng, chưa kể nếu trường hợp server và mạng khách chập chờn, load bị chậm đơ, hình ảnh và bố cục dễ bị vỡ lắm

Tuy thế dùng Jetpack nên chú ý là nó không hỗ trợ xóa cache, thành ra nếu bạn upload 1 file tên là name222.jpg lên, nó cache xong rồi là từ đó về sau cố định luôn, bạn có tăng giảm chất lượng ảnh cái file name222.jpg ở server nó cũng không tự đổi đâu nhé, muốn thì phải đổi tên ảnh ở server lại, xong nó coi như tấm mới thì mới thấy khác

Chú ý thêm là chuyện dùng 1 dịch vụ CDN + và Jetpack cho hình ảnh, css và js nó không phải là ý hay cho các cuộc chiến về speed, làm thế thì cơ bản mỗi lần load 1 trang, nó phải kết nối tới 3 cái domain khác nhau, trong các cuộc chiến về tốc độ kiểu thi thố < 200 ms nó sẽ lỗ hơn là đi thẳng, cái này mình nói thêm cho vui thôi, vì thực tế cũng chỉ mấy công ty hosting dám so TTFB tới ms với nhau thôi, người thường hiếm ai đú nổi :))

Tất nhiên, lựa chọn tuyệt vời nhất cho CDN vẫn là MaxCDN, không việc gì phải tranh luận 😀 tuy thế giá nó trên trời dưới biển quá, rẻ hơn tẹo có CDN.NET, bạn nào nhà có điều kiện có thể vào test thử ^_^

Do có server tại Việt Nam, thành ra cái server demo của nó ping tới min có … 7ms à :]]

3. Tối ưu ảnh

Bạn có thể dùng bất cứ plugin nào bạn muốn và thích hay thấy hợp nhu cầu Kraken.ioImagify … nói chung là dùng thèng nào cũng được, vì thật ra cơ chế tạo thumbnails của WordPress nó hơi bựa, ví dụ bạn có 1 tấm ảnh 1500 x 1500 px nặng khoảng 50kb, thì khi tạo thumbnails ra 1 cái ảnh nhỏ hơn, còn 1000 x 1000 px thì dung lượng lại lên tới … 80kb =)) nói chung là bách nhục

Ngày xưa thì mình nghĩ tối ưu ảnh là cần thiết, tuy thế với việc dùng CDN, các server ngày càng gần Việt Nam, chuyện này nó mang tính máy móc hơn là hiệu quả, khác biệt chỉ là khi bạn lấy nguyên tấm ảnh từ máy kĩ thuật số ra, 5-10 MB táng thẳng lên luôn thôi, còn bình thường 1 tấm ảnh chỉ giao động 500-900kb là kịch, có giảm thì xuống 300-500 kb, khó mà cảm nhận sự khác biệt về tốc độ lắm

4.  Flatsome v3.4.1

Thật ra chìa khóa của việc mình có thể đạt được 100 điểm của GTmetrix, Pingdom và PageSpeed Insights với hệ thống chạy WordPress và WooCommerce là nhờ cái theme Flatsome v3.4.1 này, mình có dùng bản 3.4.0 thì nó bị một lỗi, là cứ tự load Youtube API lên dù cái trang đó không hề dùng

Thành ra điểm YSlow nó chỉ lên tới 97 là kịch, hôm nay rỗi rãi ngó vào trang chủ thì thấy có bản mới, phải hú bé Dũng kiu gửi cho anh coi làm sao vì thấy nó v3.4.1 nó có fix vụ này rồi :]]

5. Sử dụng Fast Velocity Minify để minified, merged hay deferring file css, js


Config Fast Velocity Minify như hình, bản này mình không phải bỏ bất cứ file nào ra ngoài, thậm chí Contact Form 7 lần trước mình phải bỏ ra, vì nếu minified, merged sẽ bị lỗi, bản này nhét vào hết không lỗi lầm gì luôn 😀 không hiểu mấy tay bên UX-themes xử lý kiểu gì khủng khiếp thật 😀

6. Sử dụng WP Rocket để cache

Config như bài trước mình có nói qua, ở bài này mình chỉ sửa lại phần CDN để sử dụng thêm Jetpack (đã nói ở bước 2) thôi

WP Rocket không có tác dụng mấy trong việc đạt 100 điểm tuyệt đối cho GTmetrix, Pingdom và PageSpeed Insights, tuy thế hiệu quả cache của nó là rõ ràng, thường thì một trang có số lượng người online nhiều, và từ lần thứ hai truy cập, bạn mới thấy rõ hiệu quả của cache 😀 còn thèng ngoirungdui.com ếu ai thèm vào, thành ra cache hay không cache cũng thế ^_^

7. Sử lý file zxcvbn (password strength check)

Ở các bài trước mình có nói WooCommerce họ tăng tính bảo mật quá ghê, thành ra để bắt buộc người dùng tạo 1 password thật mạnh, họ dùng 1 file tên zxcvbn.min.js với dung lượng ~ 400kb chỉ để làm việc này, với mình, đây là một chuyện vô nghĩa, bản thân người dùng có quyền chọn cho họ 1 cái password họ muốn, thật dài, thật nhiều kí tự đặc biệt, in hoa, in thường, có số, có chữ cho thật dài ra rồi tới khi login thì …. quên thì để làm gì :]] Cơ mà search mãi vẫn không thấy phương pháp nào xóa được file này mà không lỗi cả :((

Bạn chỉ việc thêm dòng bên dưới vào file functions.php trong theme đang dùng hoặc tạo thành plugin để dùng riêng cũng được, việc này chỉ giúp bạn có thể đạt 100 điểm trên GTmetrix, Pingdom và PageSpeed Insights thôi hé, chưa bỏ triệt để được

add_action(‘wp_enqueue_scripts’,’zxcvbn_script_fix’,1);
function zxcvbn_script_fix(){
wp_deregister_script( ‘zxcvbn-async’ );
wp_register_script(‘zxcvbn-async’, ‘//ngoirungdui.com/wp-includes/zxcvbn-async.min.js’,array(),’1.0′);
}

Sửa ngoirungdui.com thành domain của bạn là được, các thứ khác giữ nguyên việc làm trên chỉ giúp bạn có thể bỏ cái file zxcvbn.min.js vào thành 1 file với các file khác thôi, chứ không bỏ hẳn cái file đó ra được, bỏ hẳn nó ra thì tới bước điền password khi tạo tài khoản, điền sao nó cũng không chịu chạy 🙁

Tiếp theo mở file class-wc-frontend-scripts.php trong thư mục /wp-content/plugins/woocommerce/includes, kéo tới dòng 752-> 578, xóa 7 dòng đó đi

 case ‘wc-password-strength-meter’ :
return array(
‘min_password_strength’ => apply_filters( ‘woocommerce_min_password_strength’, 3 ),
‘i18n_password_error’ => esc_attr__( ‘Please enter a stronger password.’, ‘woocommerce’ ),
‘i18n_password_hint’ => esc_attr( wp_get_password_hint() ),
);
break;

Xong xuôi, ta đã giảm được thêm ~ 400 kb ở mọi trang 😛

7 bước trên là các bước quan trọng để có thể đạt 100 điểm tuyệt đối cho GTmetrix, Pingdom và PageSpeed Insights với hệ thống chạy WordPress và WooCommerce (có một vài điểm nhỏ khác mà có khi bạn sẽ gặp hay không do tùy chọn ở phần theme, rất nhỏ, google tí là ra, thành ra mình bỏ qua luôn), tuy thế, nói sao nói, điểm chỉ là ảo, thực chất vẫn là nhìn vào thời gian load và số requests, rồi xem bạn truy cập từ đâu, nhanh hay không nhanh ở con số này, chứ không phải vẻ vời mấy cái CDN file css, js hay nén ảnh …

Ok, tận hưởng thành quả thôi 😀

Đầu tiên là GTmetrix với PageSpeed

Tiếp theo là GTmetrix với YSlow (đây có lẽ là một trong các trang kiểm tra khó đạt nhất, vì nó yêu cầu 1 điều rất khó, là gom tất cả các file css, js vào thành 1 file mà không gây lỗi)

Pingdom thì thú thực chưa bao giờ là vấn đề với combo FlatsomeFast Velocity Minify cả ^_^

Tiếp theo là Google PageSpeed Insights trên nền tảng di động

Chốt hạ là Google PageSpeed Insights trên nền tảng PC, về PageSpeed Insights thì điểm mệt của nó là tính phần “thời gian phản hồi của máy chủ” khá gắt, nên điểm sẽ trùi trột tùy vào lúc đó server ra làm sao, còn lại thì combo huyền thoại FlatsomeFast Velocity Minify giã như giã gạo cả, mình cũng chưa hiểu tại sao chỉ có thế mà ngày xưa người ta dùng PageSpeed Insights để làm chuẩn mực cho mấy bài test dạng này ^_^

Nói chung phiền nhất ở cái vụ 100 điểm này là GTmetrix YSlow, UX-themes mà chưa ra phiên bản Flatsome v3.4.1 thì cũng ngồi ngáp ngáp thôi, nhờ gom được rất nhiều file vào 1 file, nên request rất ít, ở ngoài trang chủ chỉ có 23-24 request, nếu bỏ được thêm file zxcvbn.min.js (password strength check) thì tuyệt hơn, giảm xuống hẳn gần 400 kb dung lượng cho tất cả các trang :]]

Sau khi sử lý xong cái file zxcvbn.min.js giờ trang chủ chỉ còn tổng 370kb 😀

Ah, phiên bản Flatsome v3.4.1 này xử lý các vấn đề liên quan tới giỏ hàng, thay đổi số lượng sản phẩm, thay đổi tùy chọn shipping vô cùng tốt nhé, so với bản Flatsome v3.4.0 hoàn toàn khác biệt luôn, click phát chạy, hoàn toàn không bị đơ đơ tầm 0.5s như bản trước 😛

15 thoughts on “100 điểm cho GTmetrix, Pingdom và PageSpeed Insights

  1. Thiện Võ says:

    Đã đọc xong, mà không bán hàng online nên không ứng dụng được mấy. Với lại thắc mắc là WP Rocket có sẵn bộ minify sao không dùng luôn mà phải cài thêm plugin khác vậy bác?

    • bibica says:

      Thế qua: http://bibica.net/ đọc tiếp :]]

      WP Rocket chủ yếu họ vẫn cache là chính, các tính năng khác như minify không hẳn là không tốt, chủ yếu nó vẫn tạo thừa khá nhiều request, không đạt max 100 điểm được 😀

      Còn nếu không điên cuồng chạy theo 100 điểm cho đẹp thì mình nghĩ dùng cũng được

  2. Đạt Ecom says:

    hx, cảm ơn bác , em tìm mãi mới được bài của bác xử lý cái file password khỉ ho nặng vãi chưởng, em cũng đang tối ưu dùng wp rocket , cdn free cloudflare , bác thấy ổn ko nhỉ?

    • bibica says:

      Hé hé, cái vụ password bắt đặt pass khó và dài zxcvbn.min.js gần như các bài đợt tôi search cũng không ra cách nào giải quyết được :]]

      Dùng wp rocket , cdn free cloudflare hay gì tùy tùy bạn đang dùng cái gì, thuần túy blog hay shop hay thêm addon, plugin gì nữa? và cũng tùy bạn quan tâm tới hiệu năng và độ chịu tải tới cỡ nào?

      Ah, được bạn qua bibica.net xem, vì giờ NRD mình để post mấy cái kèo group buy, bán đồng lon sắt vụn là chính ^_^ bên bibica.net nói nhiều hơn về kĩ thuật 😛

      Mỗi cái mí bài bên NRD ngày xưa chắc SEO kĩ quá, dân chúng toàn google vào link bài này =))

  3. Lê Xuân Tiến says:

    Hay quá bác ơi, em tìm mấy tháng nay ko ra, tình cờ thấy bài post của bác về tăng tốc độ web trên group facebook Flatsome. Cảm ơn bác nhé.

    • bibica says:

      Dạo này mình hay viết bên bibica.net (blog cá nhân) nhiều hơn 😀

      Bên này chủ yếu mở vài kèo group buy là chính :]]

    • bibica says:

      Chậc, kăng thiệt, ngày xưa làm thèng NRD SEO tốt quá hay sao mà bỏ lâu lắm rồi bà con vẫn cứ vào đây để hỏi, hỏi về kĩ thuật thì vào bibica.net cho tiện hé 😀 bên này giờ mình làm cái shop group buy là chính 😛

      NgoiRungDui.Com dùng WP Rocket và Rocket-Nginx để cache, trong thời gian tìm hiểu, mình cũng chưa hiểu tại sao tác giả của EasyEngine và Webinoly lại đánh giá cao hình thức dùng FastCgi hay Redis làm cache nữa, vì mình thấy nó hoàn toàn không hơn được WP Rocket và Rocket-Nginx điểm gì, cả hiệu năng lẫn tính năng, chưa kể FastCgi hay Redis cực kì khó config

      • Thành says:

        Mình thì dùng redis làm object cache bằng plugin redis object cache kết hợp với wp-rocket + rocket-Nginx làm page cache không biết như thế có ổn không nữa vì mình dùng memcached config cho http/2 thì lại bị lỗi gì đấy không làm được

        • bibica says:

          Chỉ nên dùng 1 loại cache thôi, như ngoirungdui.com hiện tại là dùng wp-rocket + rocket-nginx để cache 😀

          • bibica says:

            Xài wp-rocket + rocket-nginx để cache là quá thừa rồi
            Mà hỏi kĩ thuật thì sang bibica.net coi đi á, bên này thi thoảng mình mới vào thôi

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *