Cách mình đã tối ưu tốc độ load cho Wordpress

Trước có đọc bài viết khá hay về cách tối ưu tốc độ tải trang cho các website đang sử dụng mã nguồn wordpress, bài này được Mr.N2 viết khá chi tiết về vấn đề tối ưu tốc độ load cho website.
các bạn có thể tham khảo link:

Mã:

http://nguyennghia.com/code-tang-toc-do-load-website/

Hôm nay mình viết một bài tương tự về cách tối ưu tốc độ tải trang của mình các bạn có thể tham khảo hoặc đóng góp ý kiến tại đây nha.

​

Cách tối ưu Javascript trong website Wordpress
Có nhiều cách để tối ưu thẻ javascript cho website của bạn, nhưng để đảm bảo cho tốc độ hiển thì trong website chúng ta cần phải ưu tiên load chữ trước sau mới load javascript, làm cho mọi người sẽ có cảm giác load nhanh hơn, nhưng điều bất cập nhất lại đến từ bản thân của javascipt. Khi thử cho xuống cuối trang nhưng có một số script không chịu chạy, vì đặc tính của javascript là phải gọi trước khi nó thực thi trong thẻ DIV nào đó, trong bản chất thì phải gọi sớm để theo dõi DOM html, khi đó nó sẽ thực thi các đối tượng liên quan đến javascript đó. Vì thế bạn cần chắc chắn loại javascript nào nên đưa xuống footer loại nào không được đưa xuống footer nha.

Một số loại Javascript không chịu tác động trong DOM bạn có thể tham khảo.
Mã theo dõi
Mã chat
Mã thông báo lên màn hình
Mã chạy ngầm,...
Một số javascript không chạy khi đặt dưới footer
Mã nguồn thuần
Thư viện
Hàm thực thi,...
Để tối ưu tốc độ load cho website bạn có thể sử dụng cú pháp sau để đảm bảo các javasrcipt không load trước chữ:

Mã:

<script type="text/javascript" defer src="script-cua-ban.js" defer></script>

Bạn có thể xem hình để hiểu rõ hơn cách hoạt động của đoạn javascrprip trên

Hình ảnh mình lấy từ hocwp chứ không phải mình tự làm nha
​

Cách này sẽ làm cho người dùng vào website mình sẽ không có cảm giác bị chậm.

Cách tối ưu hình ảnh bằng plusgin ewww image optimizer
Đây là cách của mình, bạn nào có phương pháp nào hay hơn thì chia sẻ anh em cùng phát triển nha.

Mình chọn EWWW Image Optimizer vì tốc độ của nó nhanh và hiệu quả hơn các plusgin cùng loại như thằng WP Smush, khả năng chuyển đổi định dạng của hình ảnh cũng khá là tốt so với các plusgin khác. Bạn có thể test qua các công cụ tối ưu hình ảnh để kiểm tra kết quả nha.

Các sử dụng EWWW
Truy cập vào Media => Bulk Optimize. Tại đây, bạn có thể nén toàn bộ ảnh có trên thư viện Media của WordPress hoặc ảnh lưu trữ trên host với chỉ một vài click chuột.

Tick vào mục “Force re-optimize” và click vào nút “Start optimizing” (nếu bạn muốn nén các ảnh nằm trong thư viện Media) hoặc “Scan and optimize” (nếu bạn muốn nén các ảnh nằm bên ngoài thư việnMedia).

Bật nén Gzip
Để bật nén cho website đang sử dụng máy chủa Apache mình sử dụng đoạn mã dưới:

Mã:

# BEGIN GZIP
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</ifmodule>
# END GZIP

Sử dụng Browse Caching
Bạn có thể tham khảo đoạn mã dưới đây

Mã:

# BEGIN Expire headers
<ifModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 5 seconds"
    ExpiresByType image/x-icon "access plus 2592000 seconds"
    ExpiresByType image/jpeg "access plus 2592000 seconds"
    ExpiresByType image/png "access plus 2592000 seconds"
    ExpiresByType image/gif "access plus 2592000 seconds"
    ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
    ExpiresByType text/css "access plus 604800 seconds"
    ExpiresByType text/javascript "access plus 216000 seconds"
    ExpiresByType application/javascript "access plus 216000 seconds"
    ExpiresByType application/x-javascript "access plus 216000 seconds"
    ExpiresByType text/html "access plus 600 seconds"
    ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers
# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
    <filesMatch "\.(ico|jpe?g|png|gif|swf)$">
        Header set Cache-Control "public"
    </filesMatch>
    <filesMatch "\.(css)$">
        Header set Cache-Control "public"
    </filesMatch>
    <filesMatch "\.(js)$">
        Header set Cache-Control "private"
    </filesMatch>
    <filesMatch "\.(x?html?|php)$">
        Header set Cache-Control "private, must-revalidate"
    </filesMatch>
</ifModule>
# END Cache-Control Headers

Sau khi chèn đoạn mã trên vào htaccess bạn cài thêm plusgin WP Super Cache để tăng tốc độ tải trang cho website của bạn nha.
Phần Cuối mình sẽ giới thiệu cách nén css để tối ưu cho website đơn giản bằng công cụ cleancss để css gọn nhất.
Như vậy là website của mình có thể đã được tối ưu tốc độ load rồi đấy.
Lưu ý, sau khi sử dụng WP Super Cache bạn test sẽ bị dính cache, nên xóa cache xong rồi check nha.
Đây là thành quả của mình sau một buổi tìm hiểu nhiều nguồn khác nhau.

Kiểm tra tốc độ trên gtmetrix


Tốc độ trên PageSpeed Insights
​

Lần đầu viết bài trên idichvuseo có sai sót gì mong mod bỏ qua và chỉ thêm ạ.@@

 

Hay đấy, Wordpress mà bác được 90/100 là khá ổn rồi đấy, e cũng làm nhiều mà chỉ 80/100 là hết

 

Chính sác là mình đã lên được 94 nha bạn, cái này mình còn có thể lên được nữa nếu làm kỹ hơn.
Cảm ơn bạn nhiều

 

Mình làm theo y chan mà báo có 71 chắc site mình load nặng quá có video ở header nữa.

 

Về phần video mình chưa tìm hiểu qua, bạn cố gắng tìm hiểu rồi chia sẻ mọi người cùng thảo luận.

 

Ok bạn mình đang tìm cách đây. Có gì fix được mình sẽ làm 1 bài

 

đúng là anh em biết code thì làm thấy đơn giản, gà mơ như mình làm gì, chinh sữa đụng tới code là thua, có sẵn làm theo mà nhiu khi sinh ra lổi tùm lum, đành để im cho lành

mới test thử peed 64% , load 2.5s , size 0.96mb. mặt dù mới có tầm 120 bài viết

 

Cái này đơn giản mà đâu phải biết code wordpress mới làm được bạn. @@

 

Cái này mình có thể tối ưu lên đến 100 Tuy nhiên do đang chạy Adsense nên chỉ dùng ở mức tạm chấp nhận là 95.
Các cách chủ thớt viết ra gần như mình đều đang áp dụng. Đa phần chức năng đều tự code chứ không dùng plugin của ai cả

Mã:

https://developers.google.com/speed/pagespeed/insights/?url=http://nhacvang.xavang.com&tab=desktop

 

Nội dung này có lẽ dùng cho anh em nào làm code chứ em đọc mù tịt chả hiểu gì
tốc độ tải trang của em tầm 55/100 load hơi chậm mà tại từ khóa dễ nên cũng ontop