Hướng dẫn tối ưu tải trang wordpress nhằm đem lại trải nghiệm người dùng tốt hơn. Với xu hướng SEO 2018 thì trải nghiệm người dùng rất được chú trọng khi nhà nhà, người người đổ vào SEO với content, backlink, onpage, v.v. Google đang làm mới lại với sự cập nhật cần thiết và tốc độ load trang là một trong những yếu tố đó.
Fast Velocity Minify là một add on cho WordPress giúp bạn giảm các yêu cầu HTTP bằng cách gom các file CSS và Javascript vào thành 1 file, cố gắng sử dụng số lượng file ít nhất có thể. nó cũng giảm kích thước file CSS và các tập tin JS lại luôn, bằng cách dùng với PHP Minify (hoặc YUI Compressor)
Việc dùng các plugin như Fast Velocity Minify và cache chỉ là bước sau cùng, khi bạn xác định được hết các plugin sẽ cài, không thôi dễ dụng chạm lắm, mình cũng thử tối ưu hết các thứ, với setting bên dưới, bạn có thể tham khảo, nếu chạy không thấy lỗi gì thì cứ để mặc định hết các thứ là được
GTmetrix và Pingdom là hai trang để bạn có thể đánh giá cơ bản về tốc độ load và sử lý của một trang web, nôm na thì điểm càng cao càng tốt, ít ra về mặt lý thuyết là thế, nó có nhiều yêu cầu khá hợp lý như dùng CDN, nén ảnh, giảm kích thước file HTML, CSS & Javascript (bằng cách xóa bớt các khoảng trắng, comment …), giảm bớt HTTP requests …. tuy thế như mình hay nói, cái gì cũng có hai mặt hay nhiều mặt, bạn nên cố gắng hiểu rõ vấn đề để tìm kiếm một giải pháp tốt cho mình, như ngày xưa mình nhớ thường khi làm web, người ta thường táng hết thành 1 file css, 1 file js, sau đó viết gì thì nện hết vào đó, sau này thì người ta tách ra thành nhiều file nhỏ, cần sửa gì, phần nào thì chỉ việc vào file đó sửa lại, không cần phải mở cả 1 cái file cả trăm, tới ngàn dòng ra để mà nhìn, tách ra nhiều file nhỏ viết cơ bản nó tốt cho người lập trình hơn
Vấn đề tiếp theo ta gặp phải, bạn cứ hình dung thế này, chuyện ta load 1 lúc 10 file nhỏ, nói sao nói nó vẫn sẽ nhanh hơn bạn load 1 file to gồm 10 file đó, cái này ai dùng IDM download file là thấy đúng không ? có điều nó lại bị tình trạng là nếu bạn load 10 file nhỏ, thì bạn yêu cầu server tới 10 cái request, nếu số lượng khách ít thì chẳng vấn đề gì, nhưng khi hàng ngàn, chục ngàn người vào thì con số đó rất là khủng khiếp, vậy nên bạn sẽ tự chọn giải pháp, như khi ít users, có thể để load nhiều file nhỏ, khi đông thì cố gắng giảm càng còn càng ít requests càng tốt, sử dụng thêm cache ….. nói chung là tùy trường hợp mà chọn giải pháp cho hiệu quả
Việc giảm kích thước file HTML, CSS & Javascript cũng vậy, mình sẽ xóa hết các comment, xóa hết các khoảng trắng, lúc này cái file khoảng 100kb nó còn tầm 50-70kb, nhẹ hơn thì sẽ load nhanh hơn, nhưng vấn đề là nếu bạn cần sửa gì trong cái file đó, thì gần như mù tịt, vì không biết dòng nào là dòng nào
Sau khi gom xong, nếu load trang nào chỉ cần các file đó thì nó chỉ việc load file có sẵn, còn nếu cần thêm thì nó sẽ tiếp tục tạo 1 file khác, cứ thế cho hết, điểm mạnh của Fast Velocity Minify là nó rất dễ sử dụng, đơn giản, ít lỗi, nó cũng có rất nhiều tính năng cấp cao để bạn có thể tùy biến, sau khi dùng thử thì mình phải công nhận tay tác giả này gần như nghiên cứu tới tận cùng về Speed Optimization rồi, trong khi thiên hạ đổ mồ hôi hột, config thí mịa để được 100 điểm cho GTmetrix và Pingdom, cha này viết 1 cái plugin bé tí đã đạt được điều đó, quá kinh khủng
100 điểm vô cùng dễ, tuy thế, việc gom hết các file CSS và Javascript thành 1 file thế này nó khá dễ gây lỗi khiến nhiều plugin khác không chạy hoặc giao diện web bị lỗi, lúc này bạn có thể kiếm plugin khác thay thế hoặc chấp nhận bỏ cái file đó ra, vì nói sao nói, 100 điểm thật sự là quá cực đoan
Đây là bản chuẩn cho tất cả các theme và plugin, chỉ cần chỉnh theo hình này là được, nếu thấy lỗi hãy làm theo các bước bên dưới
Troubleshooting: chọn Fix Page Editors, tùy chọn này thì bật tắt tùy bạn, nên bật, để nếu bạn log vào tài khoản quản trị, thấy không có lỗi, mà bình thường có lỗi, thì biết nguyên nhân mà sử lý
URL Options: chọn Force HTTP urls hay Force HTTPS urls thì tùy đang dùng cái nào, mình đang chạy http thành ra chọn Force HTTP urls, bạn nào dùng https thì chọn Force HTTPS urls, nếu không thì cứ để mặc định Use the dynamic “//” protocol
Fonts Options: chọn Remove Google Fonts
CSS Options: chọn Inline all header CSS files và Inline all footer CSS files
Phía trên là bản chuẩn cho tất cả các theme và plugin, chỉ cần chỉnh theo bên trên là được, nếu thấy lỗi hãy làm theo các bước bên dưới
Render-blocking JS: chọn hết 4 tùy chọn Render-blocking Enable defer parsing of JS files globally, Enable defer of JS for Pagespeed Insights, Skip deferring the jQuery library, Skip deferring completely on the login page
Ignore List: cái này thì tùy bạn đang dùng theme và plugin nào, mình đang dùng theme Flatsome nên phải điền dòng “/wp-content/themes/flatsome/inc/extensions/flatsome-live-search/flatsome-live-search.js” vào, có tính năng search live (kiểu là bạn search nó ra hết quả ngay trên trang luôn, không cần load tiếp 1 lần) với 1 đống hiệu ứng ì đùng về ảnh ngoài trang chủ với countdown trong phần bán hàng …. nói chung là bạn cứ thử từng cái khi bật chế độ Troubleshooting, thấy lỗi gì giao diện thì kiếm file CSS trong theme nhét vào, lỗi hiệu ứng hay tính năng thì add file JS, cố gắng càng ít file phải ignore càng tốt, với theme Flatsome thì chỉ cần 1 dòng “/wp-content/themes/flatsome/inc/extensions/flatsome-live-search/flatsome-live-search.js“, do mình dùng Contact Form 7 và WordPress Zero Spam, nên điền thêm 2 dòng /wp-content/plugins/zero-spam/js/zerospam.js và
/wp-content/plugins/contact-form-7/includes/js/scripts.js vào nữa, nói chung thấy cái nào lỗi, thì 1 là kiểm plugin khác thay thế, 2 là điền nó vào Ignore List ?
Bước này khá tốn thời gian, như ban đầu với theme Flatsome mình phải ignore gần 5 file, sau giảm dần chỉ còn 1 file duy nhất mà vẫn đảm bảo chạy tốt hết các tính năng, về Contact Form 7 và WordPress Zero Spam mình lười kiếm thử plugin khác, nên cho vào luôn, chủ yếu là vì YSlow (cái này hình như là phần kiểm tra tốc độ của …. Yahoo :D) trên GTmetrix nó rất cực đoan, nó bắt phải gom hết các file Javascript scripts thành 1 file mới được điểm tuyệt đối, mà cái này thì gần như rất khó, khi chúng ta cần 1 đống các tính năng khác nhau, đâu phải thèng viết code nào cũng theo chuẩn cả được
Tổng hợp lại là với Fast Velocity Minify thì bạn bật chế độ Troubleshooting, tất cả tùy chọn mặc định, tiếp theo chạy, thấy lỗi file nào thì điền vào Ignore List, sau khi thấy chạy ổn hết rồi thì cố gắng giảm xuống còn càng ít file càng tốt, đang dùng theme Flatsome và 20 thì chỉ phải ignore 3 file, mọi thứ chạy hoàn hảo
pingdom với điểm số hoàn hảo ? trang chủ với dung lượng tới 1.6MB mà load chỉ 968ms (<1s) với truy cập lần thứ 2 từ Mỹ (ờ, lần 2 có cache)
GTmetrix với 100 điểm PageSpeed và 94 điểm cho YSlow ?
Các request chỉ còn tầm 34-35, một con số rất tốt, thông thường các trang web yêu cầu từ 50-90 request, một số trang nhiều hơn tới 150-300, nói chung < 50 request cho 1 trang là một con số rất tốt
Cơ mà nói sao nói, điểm GTmetrix và Pingdom nó không nói tốc độ truy cập nhanh hay chậm, quan trọng nhất vẫn là xem phần thời gian file requests, rồi xem cái nào đang load chậm nhất để coi lại
Như hiện tại phần load nặng nhất là get_refreshed_fragments và zxcvbn, trong đó get_refreshed_fragments nó là cái giỏ hàng, khi bạn click vào, nó cập nhập giỏ hàng, nếu chặn file này, nó sẽ khiến giỏ hàng của bạn cập nhập con số không chính xác, tất nhiên bạn có thể chặn, chỉ để nó hiện ra khi tới phần shop thôi, còn ở trang chủ và blog không cần hiện, tuy thế nó lại ảnh hưởng tới bố cục cái theme Flatsome đang dùng, zxcvbn thì nó lại là cái phần rất … chó cắn, là tạo một password mạnh khi bạn tạo account =)) ụ móa, có cần hem, khi tạo 1 cái pass cho mạnh xong … ếu nhớ pass là gì để login??? cần 1 cái file ~ 400kb/s chỉ để làm chuyện như thế sao???
2 file này đều liên quan tới WooCommerce, thành ra nếu bạn nào không dùng WooCommerce, chỉ là blog đơn thuần thì bỏ đi được tới ~ 1.2 Mb rồi á, cải thiện tốc độ nhiều lắm
Cơ mà tất cả các thứ này, đều không phải là key cho một trang web nhanh, file CSS & Javascript dù có nhiều thì nó cũng chỉ phải load 1 lần đầu tiên, khi bạn vào web, xong thì trình duyệt cũng đã tự cache lại rồi, không phải load lại, thành ra có tối ưu phần này tốt sao, nó cũng chỉ cải thiện ở lần đầu tiên, sau đó thì ở một trang có tối ưu và 1 trang không tối ưu, tốc độ đều thế cả.
Như mình loay hoay cả buổi với Fast Velocity Minify, điểm GTmetrix và Pingdom cao chót vót, vẫn chẳng cảm thấy có gì khác so với khi chưa làm cả
Chìa khóa chính vẫn là 1 cái host tốc độ tốt, config tốt, phần quan trọng tiếp theo là config, cache database, khi ta thấy cơ sở dữ liệu mới là quan trong nhất, config ảnh, CSS & Javascript chỉ là phần rất bé, râu ria trong các vấn đề, phần nhiều trang web bị lỗi liên quan tới database, chứ rất hiếm web nào lỗi do nhiều request tới mấy file HTML ,CSS & Javascript, bạn cũng thấy đấy, về HTML ,CSS & Javascript chỉ cần 1 cái plugin như Fast Velocity Minify, về nén ảnh thì cả chục tới hàng trăm plugin có thể giải quyết, quá đơn giản
Cần traffic cho mọi user thì host tại Mỹ vẩn là số 1, giá rẻ, cực nhanh, cực mạnh, còn đối với user tới từ Việt Nam thì tốt nhất vẫn là server tại Việt Nam, khỏi lo đứt cáp gì, cơ sở hạ tầng của Viettel, FPT giờ cực mạnh, thành ra speed trong nước khỏi phải nghĩ, bạn cứ thấy FPT họ thừa băng thông trong nước tới nỗi làm cả cái Fshare cho bà con upload, download thì biết rồi hé =)) tuy thế server tại Việt Nam, thứ nhất là mắc, thứ 2 là băng thông quốc tế quá chậm, trừ trường hợp user của bạn > 90% là từ Việt Nam thì hãy chọn, còn không cân đối server tại Châu Á, như Sing, Hong Kong, Japan là đủ, giá rẻ, server mạnh, vẫn đảm bảo các nước khác vào nhanh, và Việt Nam vào cũng nhanh, tuy thế, đứt cáp thì hơi … ngáp ngáp =))
