Pagespeedの最適化後に作業ができない

Google WebマスターツールのPagespeedツールで、私が最近取り組んでいるアプリケーション（AngularJS）のスコアを向上させるための最適化をいくつか行いました。Pagespeedの最適化後に作業ができない

具体的には、Googleは「折り畳まれたコンテンツでレンダリングをブロックするJavaScriptとCSSを削除する」ことを求めていました。だから私は宣言を削除し、ページの読み込みが完了したときにロードするスクリプトにそれらを移動するので、私はから行ってきました。これに

<link rel="stylesheet" href="/bundles/vendor.css"/> 
<link rel="stylesheet" href="/bundles/common.css"/> 
<script src="/bundles/vendor.bundle.js"></script>

：body要素の下部に

<script type="text/javascript"> 
    function downloadJSAtOnload() { 

     var stylesheet1 = document.createElement('link'); 
     stylesheet1.href = "https://fonts.googleapis.com/css?family=Poppins"; 
     stylesheet1.rel = 'stylesheet'; 
     stylesheet1.type = 'text/css'; 
     document.getElementsByTagName('head')[0].appendChild(stylesheet1); 

     var stylesheet2 = document.createElement('link'); 
     stylesheet2.href = "/bundles/vendor.css"; 
     stylesheet2.rel = 'stylesheet'; 
     stylesheet2.type = 'text/css'; 
     document.getElementsByTagName('head')[0].appendChild(stylesheet2); 

     var stylesheet3 = document.createElement('link'); 
     stylesheet3.href = "/bundles/common.css"; 
     stylesheet3.rel = 'stylesheet'; 
     stylesheet3.type = 'text/css'; 
     document.getElementsByTagName('head')[0].appendChild(stylesheet3); 

     var element1 = document.createElement("script"); 
     element1.src = "/bundles/common.bundle.js"; 
     document.body.appendChild(element1); 

    } 
    if (window.addEventListener) 
     window.addEventListener("load", downloadJSAtOnload, false); 
    else if (window.attachEvent) 
     window.attachEvent("onload", downloadJSAtOnload); 
    else window.onload = downloadJSAtOnload; 
</script>

。

私のスコアは大きく向上しましたが、配布に問題がありました。

我々はアセットファイルのキャッシュバスターのバージョンIDを生成するfilerevイサキタスクを呼び出し、その後、我々がuseminを呼び出して、我々はいつものuglify、縮小化などを行い、資産を構築するためのうなり声を使います元のアセットファイルの参照をバージョン番号に置き換え、キャッシュを破棄します。

src要素のuseminだけが動作し、これらのアセットをロードする方法があるため、元のアセット名への参照が保持されるという問題があります。これは、リリース中にビルド後に手作業で変更する必要があることを意味しますが、これは受け入れられません。

だから私はそれを動作させる方法や代替する方法を探していますが、これまでのところ運がありません。

出典

2017-05-02 jeudyx

私の意見では、まずこれを行うべきではありません。

HTMLが読み込まれてページに表示された後で、すべてのCSSを読み込んでいます。つまり、ほぼ確実にflash of unstyled contentになります。これが起こらないようにするには、スタイルを最初にロードする必要があります。<head>

window.onloadは、文書のウィンドウがプレゼンテーションの準備ができていることを意味します。つまり、すべての外部リソースがロードされます。たとえば、ページに画像がある場合、すべての画像がロードされるまで、CSSとJSはロードされません。これは、JSをロードするのを待つよりも、おそらく長くなります。

、より良いアプローチので、あなたはまだあなたの<body>の最後に<script>タグを追加することができますが、それはないでしょうasync or defer attributesを使用することができ（それはJSのことを実行する必要があるため）<script>タグはDOMの建物をブロックするので、ページがレンダリングされないようにします。

オーバーオプティマイジングのようなものがあります。あなたのユーザーエクスペリエンスを低下させる価値のあるページスピードスコアが向上していますか？それはあなた次第ですが、私は「ノー」に向かって学ぶ傾向があります:)

出典

2017-05-02 23:46:31

私はあなたに同感ですが、クライアントはスコアを改善したいと考えています。私は延期を試み、それはjsファイルのためにうまくいくが、それはCSSのために働かない。 – jeudyx

まあ、やっと私はこれを解決することができました。すべての文字列に適用されるfilerev-apply grunt pluginを使用しました。これはsrcプロパティのスクリプト要素内にあるものだけでなく、というようにと思われます。

それは私が別名でうなり声を使用するので、これはfilerev_apply.jsタスクファイルである偉大な

を働いた：

module.exports = function(grunt, options) { 
    return { 
     dist: { 
      files: [{ 
       '<%= dist %>/index.html': '<%= dist %>/index.html', 
      }] 
     } 
    }; 
};

はfilerev後にそれを呼び出し、設定が完了しています。

出典

2017-05-03 16:20:16 jeudyx

Pagespeedの最適化後に作業ができない

答えて

関連する問題