CSS quan trọng và tải không đồng bộ có tốt cho wordpress

CSS quan trọng và tải không đồng bộ là một tính năng tăng tốc độ website WordPress, và có rất nhiều các plugin hỗ trợ tạo lập css quan trọng và tải không đồng bộ một cách rất dễ dàng.

Đây là một tính năng mình rất thích thú rất mạnh mẽ và cực kì hay.

tuy nhiên bạn cũng được lên vội bật.

Hãy đọc bài viết này đã:

Xem css quan trọng và tải không đồng bộ có phù hợp với website của bạn hay không?

Nó có phù hợp cho lĩnh vực ngành nghề của bạn hay không nhé?

Tuy nhiên không phải ai cũng hiệu tạo lập css quan trọng và tải không đồng bộ css rất nhiều người không hiểu nó, và cứ bật bừa lên thì thật chất rằng 90% là tác hại không phải là tác lợi, và may mắn thì không bị lỗi thông thường sẽ bị lỗi. ( thực tế đây là thứ mọi người chưa hiệu về tính năng này cứ bật xong lỗi thường hận thú các plugin tối ưu tốc độ WordPress)

Hôm nay mình sẽ chia sẻ cách tạo lập css quan trọng và tải không đồng bộ một cách chính xác và không bị lỗi, khi nào thì sử dụng khi nào thì không.

CSS quan trọng và tải không đồng bộ là gì.

CSS quan trọng và tải không đồng bộ là gì dựa vào nguyên lý của trình duyệt web: tất cả CSS phải được trình duyệt xử lý xong khi nó có thể hiển thị bất kỳ điều gì trên màn hình của người dùng.

CSS quan trọng và tải không đồng bộ thì không muốn áp dụng nguyên tắc đó của trình duyệt, cứ hiển thị đi css tải sau cũng được.

Css quan trọng và tải không đồng bộ nó không giúp website của bạn tăng tốc website full load và nó thật sự làm chậm website của bạn đi.

Tuy nhiên nó làm chậm tốc độ load website chỉ số full load nhưng nó vẫn được nhiều người sử dụng vì nó tăng chỉ số First Pant ( hiện thị nội dung đầu tiên cho người dùng sớm hơn).

Trong tối ưu tốc độ load website thì chỉ số First Pant nó quan trọng hơn chỉ số full load.

Css nội tuyến thì không thể css được, phải tải thêm một file javascript để kích hoạt tải không động bộ. ( nên website của bạn sẽ nặng)

Tuy nhiên chỉ có một số trường hợp thì rất hữu ích và một số trường hợp thì kích hoạt lại là tác hại

Ghi Chú: website wp tăng tốc không thể kích hoạt css quan trọng và tải không đồng bộ ( vì sao bạn có giống website của mình không thì tiếp tục đọc phần dưới nhé).

Có 2 cách sử dụng CSS quan trọng và tải không đồng bộ
1: tạo lập plugin chỉ cần bật thế là chơi
2: tạo lập bằng thủ công

Mỗi một cách thì sẽ có ưu điểm và nhược điểm riêng, theo mình cách tạo lập thủ công vẫn tốt hơn, tạo lập tự động bằng Plugin thì 90% là sẽ bị lỗi FOUC (Flash of unstyled content).

Css quan trọng là gì?

Css quan trọng là tạo một dạng css nội tuyến vào HTML. ( nó giống các bạn vào phần cài đặt tùy chỉnh giao diện có phần tùy chỉnh css đó) đó là css luôn tuyến.

Đa phần có rất nhiều thêm hỗ trợ, tuy nhiên có một số themes thì họ không hỗ trợ.

Nó không sử dụng file riêng như các bạn vẫn dùng như file style.css vẫn thêm css vào đó.

Cách tạo nội css nội tuyến cho WordPress

đây là ví dụ, themes của bạn không hỗ trợ tùy chỉnh css hoặc kể cả thêm bạn hỗ trợ thì vẫn làm được đây là ví dụ nhé.

function wptangtoc_css_noi_tuyen_head(){
?>
<style>
/*** Hãy cho đoạn css của bạn vào đây nhé ***/
</style>
<?php
}
add_action ('wp_head','wptangtoc_css_noi_tuyen_head',1);

==========================

Trong trường hợp bạn thích sử nội tuyến css vào footer những đoạn css không quan trọng lắm thì dùng đoạn code này nhé.

function wptangtoc_css_noi_tuyen_footer(){
?>
<style>
/*** Hãy cho đoạn css của bạn vào đây nhé ***/
</style>
<?php
}
add_action ('wp_footer','wptangtoc_css_noi_tuyen_footer',99);

Tuy nhiên nội tuyến css không quan trọng thì mình cho vào file css nó sẽ load nhanh hơn và được cache tốt hơn.

Cách kiếm tra xem mình đã nội tuyến css chưa

bạn chỉ cần đơn giản: vào trình duyệt web ( mình thích sử dụng google chrome) truy cập vào website của bạn hoặc website bạn muốn kiếm tra.
Rồi tiếp tục ấn phím: CTRL + U

nó cho bạn xem view-source, rồi bạn tìm đến đoạn css đã nội tuyến đó thế là xong.
xong bạn ấn phím : CTRL + F
Rồi điền css của bạn, nếu nó chuyển xuống là ok, nếu nó báo lỗi là chưa được.

Thực sự thì nói những người cơ bản mới bắt đầu thì rất khó để tìm.

Tải Không đồng bộ css là gì

nếu đã tạo lập css quan trọng thành công thì bạn bắt buộc phải dùng tải không đồng bộ, điều nó là được nhiên.

Nếu bạn tạo lập css quan trọng mà không sử dụng tải không đồng bộ css thì rất lãng phí, không có tác dụng gì chỉ làm chậm website của bạn đi, chậm cả Full load và chậm cả First Pant ( hiển thị nội dung đầu tiên cho người dùng sớm hơn)

Lưu ý: đã tạo css quan trọng thì phải tải không đồng bộ, nếu trong trường hợp ngược lại sử dụng tải không đồng bộ css mà không sử dụng css quan trọng thì website của bạn sẽ bị lỗi FOUC rất khó chịu cho trải nghiệm được dùng ( cái này dùng để hack điểm google page speed được đấy , nói vui thế thôi điểm số thì quan trọng gì )

Tải không đồng bộ hiểu đơn giản là bằng một cách nào đó bạn muốn thay đổi thứ tự load tuần tự của trình duyệt, để giúp bạn có tốc độ load tốt hơn.

Hiện tại các trình duyệt web năm 2023 vẫn chưa hỗ trợ css không đồng bộ như hỗ trợ đối với các javascript.

Javascript chỉ cần thêm thuộc tính đơn giản là trình duyệt họ làm cho hết còn với css thì bạn phải tải javascript của bạn để mới có thể sử dụng css không đồng bộ. ( bật cái này thì nó phải load thêm javascript nữa sẽ khiến bạn làm chậm trang web tổng thế đi một chút)

cách bật tốt nhất theo kinh nghiệm của mình là sử dụng plugin tối ưu chỉ cần bật là thế là xong, không phải code gì nhì nhằng. gần như các plugin tăng tốc độ WordPress cao cấp thì đều hỗ trợ. có một số loại cũ quá thì không.

Khi nào thì sử dụng css quan trọng và tải không đồng bộ

Trường hợp nào nên sử dụng css quan trọng và tải không đồng bộ:

1. website của bạn trên 100kb css.
2. website của bạn là trang website bán sản phẩm giá cao ở Việt Nam thì là trung bình là trên 3.000.000 VNĐ.
3. website của bạn có tỷ lệ thoát cao.
4. webhost của bạn thừa khỏe.
5. Bạn tạo lập ladding page.

Trường hợp nào không nên sử dụng css quan trọng và tải không đồng bộ:

1. website của bạn dưới 60kb css. (tạo css quan trọng có khi tạo css mất 30kb thì toang chạy làm gì nữa trong đó có wp tăng tốc)
2. website của bạn bán sản phẩm giá thấp (dưới 3.000.000 triệu)
3. website của bạn có tỷ lệ thoái rất thấp.
4. nhưng người thích an toàn ăn chắc không bật không sợ lỗi.
5. Webhost không khỏe khủng long lắm để tài nguyên phục vụ khách hàng và tối ưu cache.

đây mình chỉ nói đại khái tình huống phổ biến còn tinh huống cụ thể chi tiết thì hãy liên hệ với mình, mình sẽ xem có nên sử dụng hay không nhé.

Ví dụ: bạn có website bán mỹ phẩm các sản phẩm trung bình giá đều dưới 2.000.000 triệu, với các hàng mỹ phẩm các chị em thường xuyên lướt website của bạn xem đủ thứ trên đó rồi mới quyết định là mua ( trong trường hợp này thì không nên sử dụng css quan trọng và tải không đồng bộ). còn trong tường hợp bạn bán bất động sản ( họ thường xem chỉ trên 1 trang web, rồi quyết định gọi điện đi xem thử) trong trường hợp này lĩnh vực này thì nên sử dụng css quan trọng và tải không đồng bộ.

Cách sử dụng css quan trọng và tải không đồng bộ tốt nhất

mình rất không thích các tạo css quan trọng bằng plugin gần như rất tốn tài nguyên máy chủ khó triển khai vì tạo CSS quan trọng không không hỗ trợ ngôn ngữ lập trình PHP vì vậy không có plugin nào một phát run được ngay phải tạo CSS quan trọng chỉ hỗ trợ NodeJS vid vậy bạn phải kết nối api với máy chủ NodeJS để triển khai và, là plugin nào mình trải nghiệm thì vẫn chưa thấy plugin tạo css quan trọng nào thật sự ngon.

Cách mình yêu thích nhất là tạo css quan trọng bằng thủ công và bật tải không đồng bộ css của plugin theo mình đây là phương án tốt nhất năm 2020. để có thể sử dụng css quan trọng và tải không đồng bộ.

có rất nhiều cách phối hợp plugin + pagasaas cách tạo css mà mình rất thích tuy vào tính huống bạn sử dụng.

Nhược điểm của tạo css quan trọng bằng pagasaas là chỉ tạo css quan trọng trên tổng 1 trang web, không tạo được từng cái, bạn có thể dùng plugin tạo từng cái css quan trọng nhưng mình thấy không hài lòng lắm về cách tạo css quan trọng từng trang của plugin 90% là lỗi, nếu bạn may mắn 10% còn lại không lỗi và máy chủ cực khỏe thì nên sử dụng.

plugin tối ưu hỗ trợ trợ tải không đồng bộ css + pagasaas hiện tại là lựa chọn theo mình là tốt nhất trong năm 2020, không biết đến năm 2021 thì các công cụ tối ưu hóa phát triển ra sao thì bạn này sẽ thay đổi và cập nhật cho bạn các kiến thức tối ưu khác.

mình sẽ lấy ví dụ về 2 cái plugin phố biến là plugin litespeed và wp-rocket

Sử dụng litespeed plugin và pagasaas

Bước 1 : https://pegasaas.com/critical-path-css-generator/ đây theo mình là trang tạo css quan trọng miễn phí và tốt nhất bạn chỉ cần truy cập vào đường link này rồi điển website của bạn vào.
Bước 2: khi trang pagasaas.com trả về các đoạn css.

function wptangtoc_css_noi_tuyen_head(){
?>
<style>
/*** hãy đưa các css mà pagasaas họ trả về kết quả vào đây***/
</style>
<?php
}
add_action ('wp_head','wptangtoc_css_noi_tuyen_head',2);

Xong bạn chỉ cần đưa vào file functions.php

Bước 2: bạn sử dụng Plugin litespeed cache, tìm đến phần tải css không đồng bộ bật nó lên.

Bước 3: hãy xóa cache nếu bạn đang sử dụng

Thế là xong và tận hưởng thành quả.

Đây là phương án tốt nhất dành cho những người đang sử dụng litespeed plugin tối ưu quốc dân. cách tạo litespeed mình thấy khó nhất trong 3 cách mình chia sẻ, các plugin thì còn dễ dàng hơn.

Sử dụng plugin wp-rocket và pagasaas

Bước 1 : https://pegasaas.com/critical-path-css-generator/ đây theo mình là trang tạo css quan trọng miễn phí và tốt nhất bạn chỉ cần truy cập vào đường link này rồi điển website của bạn vào.
Bước 2:  bật tính năng optimize css delivery xong bạn điền các giá trị css mà pegasaas trả về vào Fallback CRITICAL CSS vào lưu lại, việc còn lại là để wp-rocket nó.
Bước 3: xóa cache toàn bộ

Còn cách plugin khác có tính năng như wp-rocket thì hãy làm theo như plugin Autoptimize cũng rất ngon, còn plugin swift performance thì mình trải nghiệm thì lúc chạy được lúc không thiếu ổn định hy vọng trong tương lai thì họ sẽ sửa lỗi.

Nếu bạn không thích sử dụng plugin bạn có thể tải trì hoãn css một kỹ thuật khá là ngược đời và hay, nếu như bạn chưa hiểu tải không đồng và tải trì hoãn là gì bạn hãy tham khảo bài viết tối ưu javascript mình có chia sẻ về cái này rất nhiều, bạn có thể liên hệ qua css nhé.

Trong trường hợp bạn không thích dùng plugin bạn thích làm thủ công thì làm theo mình nhé.

bạn cho đoạn code này vào file functions.php

function script_css_khong_dong_bo(){
?>
<script>!function(a){"use strict";var b=function(b,c,d){function e(a){return h.body?a():void setTimeout(function(){e(a)})}function f(){i.addEventListener&&i.removeEventListener("load",f),i.media=d||"all"}var g,h=a.document,i=h.createElement("link");if(c)g=c;else{var j=(h.body||h.getElementsByTagName("head")[0]).childNodes;g=j[j.length-1]}var k=h.styleSheets;i.rel="stylesheet",i.href=b,i.media="only x",e(function(){g.parentNode.insertBefore(i,c?g:g.nextSibling)});var l=function(a){for(var b=i.href,c=k.length;c--;)if(k[c].href===b)return a();setTimeout(function(){l(a)})};return i.addEventListener&&i.addEventListener("load",f),i.onloadcssdefined=l,l(f),i};"undefined"!=typeof exports?exports.loadCSS=b:a.loadCSS=b}("undefined"!=typeof global?global:this);!function(a){if(a.loadCSS){var b=loadCSS.relpreload={};if(b.support=function(){try{return a.document.createElement("link").relList.supports("preload")}catch(b){return!1}},b.poly=function(){for(var b=a.document.getElementsByTagName("link"),c=0;c<b.length;c++){var d=b[c];"preload"===d.rel&&"style"===d.getAttribute("as")&&(a.loadCSS(d.href,d,d.getAttribute("media")),d.rel=null)}},!b.support()){b.poly();var c=a.setInterval(b.poly,300);a.addEventListener&&a.addEventListener("load",function(){b.poly(),a.clearInterval(c)}),a.attachEvent&&a.attachEvent("onload",function(){a.clearInterval(c)})}}}(this);</script>
<?php };
add_action('wp_head', 'script_css_khong_dong_bo',1);

bạn cho đoạn code này cũng cho vào file functions.php

function them_preload_css_WordPress_khong_dong_bo_wptangtoc($html, $handle, $href, $media) {
if (is_admin())
return $html;

$html = <<<EOT
<link rel='preload' as='style' onload="this.onload=null;this.rel='stylesheet'"
id='$handle' href='$href' type='text/css' media='all' />
EOT;

return $html;
}

add_filter( 'style_loader_tag', 'them_preload_css_WordPress_khong_dong_bo_wptangtoc', 10, 4 );

Một cách thức khác hoạt động rất tuyệt vời là dùng chrome dev tool.

Bạn có thể thử Paul Kinlan’s bookmarklet sử dụng trên Chrome Dev Tool.

Tóm tắt:

css quan trọng và tải không đồng bộ là một kỹ thuật rất tốt tuy nhiên phải dùng đúng trường hợp và kích hoạt đúng phương pháp thì nó mới phát huy toàn bộ sức mạnh của nó.

Tuy nhiên theo kinh nghiệm của mình thì với website WordPress thì 20% có thể sử dụng kỹ thuật này và 80% thì không, tuy xem website của bạn đang trong tình huống nào nhé để đưa ra quyết định đúng đắn vào tốt nhất cho website của mình.

Đừng bật linh tinh với mấy cái tính năng này mà không hiểu xong đo điểm google page speed cao cao thể là thích nhưng thức chất áp dụng không đúng sẽ giảm tốc độ website của bạn và giảm trải nghiệm người dùng.

Còn nếu đo google page speed họ báo css chặn hiện thị thì sao, thì kệ nó website mình phục vụ người dùng chứ đầu phải là phục vụ công cụ chấm điểm số đâu.