Hướng dẫn load CSS từ host ngoài vào blog

[blog]
Thủ thuật hướng dẫn các bạn cách load CSS từ host ngoài vào blog không bị cảnh báo Pagespeed khi chúng ta kiểm tra Speed ở trang Pagespeed Insights

Cách này áp dụng cho load Font Awesome, Bootstrap, Google Fonts và tất cả các link CSS khác

Các bạn copy đoạn code này và chèn các link CSS cần trỏ về blogspot của các bạn, sau đó dán trước </head> hoặc trước </body> tùy vô từng blog mà xét về độ ưu tiên cho nó load trước. Tất nhiên là dán trước </head> thì nó sẽ load trước, và khi dán trước </body> thì nó sẽ load sau.

Đoạn JavaScript

<script type='text/javascript'>

    //<![CDATA[

    function loadCSS(e, t, s) {

        "use strict";

        var n = window.document.createElement("link"),

            o = t || window.document.getElementsByTagName("script")[0];

        n.rel = "stylesheet", n.href = e, n.media = "only x", o.parentNode.insertBefore(n, o), setTimeout(function() {

            n.media = s || "all"

        })

    }

    loadCSS("https://use.fontawesome.com/releases/v5.7.2/css/all.css");

    //]]>

</script>

Đối với việc áp dụng cho nhiều link thì các bạn làm như sau:

<script type='text/javascript'>

    //<![CDATA[

    function loadCSS(e, t, s) {

        "use strict";

        var n = window.document.createElement("link"),

            o = t || window.document.getElementsByTagName("script")[0];

        n.rel = "stylesheet", n.href = e, n.media = "only x", o.parentNode.insertBefore(n, o), setTimeout(function() {

            n.media = s || "all"

        })

    }

    loadCSS("https://use.fontawesome.com/releases/v5.7.2/css/all.css");

    loadCSS("https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css");

    loadCSS("https://fonts.googleapis.com/css2?family=Tenali+Ramakrishna&amp;display=swap");

    //]]>

</script>

Ưu điểm:
- Lợi ích của thủ thuật này là các bạn không phải nhồi nhét 1 đống CSS vô trong blogspot của bạn, giúp giảm Kb CSS, tăng tốc độ tải trang cho blog.
- Không bị cảnh báo Speed ở trang Pagespeed Insights

Nhược điểm:
- Đói với việc áp dụng cho bootstrap để load thì trong quá trình nó load chưa xong thì bố cục sẽ bị bể, nói chung là không vấn đề gì xảy ra, nó chỉ thoáng qua như 1 cái chớp mắt vậy.

Kết luận: Bài viết mang tính chất tham khảo, còn tùy vô từng blog mà áp dụng.

[/blog]