Ciężko pracuję do osiągnięcia 100/100 w Google PagePeed (https://developers.google .com / Speed / PageSpeed / Insights /) Ale stajemy Hungup podczas próby użycia JavaScript, aby pobrać pliki oparte na CDN. Dostaję "Uwaga: pokazane są tymczasowe nagłówki". I zakładam, że blokuje tego rodzaju wezwanie ze względów bezpieczeństwa, ale utknąłem.

Mogę zadzwonić do plików skryptów ASync tak, co Google lubi:

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" async></script>

Ale co mam zrobić z plikami CSS? Jeśli nazywam to normalnym sposobem:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

Google skarży się i mówi, że mam "blokujące zasoby CSS".

Oto kopia kodu, do którego próbowałem do tej pory:

var headID = document.getElementsByTagName("head")[0];
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = '//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css';
headID.appendChild(cssNode);

Czy ktoś ma jakieś sugestie?

4
Vince 14 sierpień 2014, 02:35

3 odpowiedzi

Najlepsza odpowiedź

Oto kod, który trafiłem, tworząc, aby obsłużyć ładowanie zarówno CSS, jak i JS ASync w tym samym czasie. Wystarczy umieścić to na dole HTML przed zamknięciem tagu i edytowanie połączeń LoadJsCsSsFile w razie potrzeby.

<script>
    /* Beginning of async download code. */
    window.onload = function(){
        function loadjscssfile(filename, filetype) {
            if(filetype == "js") {
                var cssNode = document.createElement('script');
                cssNode.setAttribute("type", "text/javascript");
                cssNode.setAttribute("src", filename);
            } else if(filetype == "css") {
                var cssNode = document.createElement("link");
                cssNode.setAttribute("rel", "stylesheet");
                cssNode.setAttribute("type", "text/css");
                cssNode.setAttribute("href", filename);
            }
            if(typeof cssNode != "undefined")
                document.getElementsByTagName("head")[0].appendChild(cssNode);
        }
        loadjscssfile("//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css", "css");
        loadjscssfile("//fonts.googleapis.com/css?family=Open+Sans:300&amp;subset=latin,cyrillic-ext,latin-ext,cyrillic,greek-ext,greek,vietnamese", "css");
        loadjscssfile("/css/style.css", "css");
        loadjscssfile("//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js", "js");
        loadjscssfile("//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js", "js");
    };
    /* End of async download code. */
</script>
2
Vince 18 sierpień 2014, 02:28

Google zapewnia dobre wyjaśnienie tego tutaj: https://developers.google.com/Speed/docs/insights/optimizecssDelivery

Wygląda na to, że chcą, abyś inline CSS, który ma kluczowe znaczenie dla początkowego wyświetlacza strony. Następnie załaduj dodatkowe CSS po. Ponieważ CSSStrap CSS jest jedną dużą mieszanką, myślę, że będzie nietrywialny, aby oddzielić kluczowe / nieważne dla Twojej strony.

Być może możesz włączyć niektóre duplikaty CSS, które istnieje w Bootstrap.css

0
Jimmie Tyrrell 14 sierpień 2014, 00:08

Zaproponowałem ci inline style dla ścieżki krytycznej (nad fałdą): https://github.com/addyosmani/above-te-fold-Tools
. https://github.com/addyosmani/critical

Następnie załaduj drugą ASync CSS:
https://github.com/filamentgroup/loadcss/

0
mtt 14 sierpień 2014, 00:14