折り畳み式CSS-開発を遅くすることなくWebサイトの読み込みを高速化する方法

古き良き時代には、Google PageSpeed Insightsと私は少し足を踏み入れていました。 I-リベットで留められた安価なテンプレート、Google-ダウンロードの速度を称賛しました。 しかし、時間の経過とともに多くの変化が起こり、安価なテンプレートをリベットしているにもかかわらず、グーグルは車輪に棒を入れ始めました。



Google PageSpeed Insightsレポートで次のコメントを見た人は多いと思います。

• CSSの短縮（HTML、JavaScript）
• ブラウザキャッシュを使用する
• 圧縮をオンにする
• ページの上部をブロックしているJavaScriptとCSSを削除します

そして、原則として、最初の3つのポイントに問題がない場合、最後のポイントは私を困惑させました。

重要なCSSの自動生成

このテーマに関しては、インターネット上にすでに十分な情報が蓄積されています。 一言で言えば、Googleは、ページの上部の表示に影響を与えないスタイルの読み込みを延期し、ページの読み込み直後にビューポートに移動し、必要なスタイルをhtmlコードに直接挿入する必要があると述べています。



希望するスタイルを手動で選択するタスクは不可能だと考えたため、このプロセスを自動化する手段を探し始めました。 これまで、必要なスタイルを生成するために作成されたツールは3つだけでした。

1. 重要なCSS
2. クリティカル
3. ペントハウス
   
   

最初の2つでどうにかうまくいかなかった場合、ペントハウスはまさに私が探していたツールであることがわかりました。 私はGulpを使用してプロジェクトを構築しているため、gulpfile.jsのコードを以下に示します。



1.必要なモジュールをインストールします。

$ npm install --save-dev penthouse $ npm install --save-dev gulp-inject-string
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2. gulpfile.jsを開いて接続します。

 var penthouse = require('penthouse'); var inject = require('gulp-inject-string'); //        html
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

3.次に、ページへのパスとスタイルを指定する必要があります。

 gulp.task('penthouse', function () { penthouse({ url: 'src/index.html', //    css: 'src/css/styles.css', //    width: 1280, height: 800 }, function (err, criticalCss) { gulp.src('src/index.html') .pipe(inject.after('<!-- Critical CSS -->', '\n<style>\n' + criticalCss + '\n</style>')) .pipe(gulp.dest('dist')) }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この例では、index.htmlファイルのCritical CSSコメントの直後にスタイルが挿入されます。



できた！ これで、Google PageSpeed Insightsはこのアイテムの宣誓を停止し、「Fulfilled Rules」タブに移動します。

スタイルを使用して他のファイルを接続する方法は？

多くの人はJavaScriptを使用して非同期に接続することをお勧めしますが、私にとっては、HTMLコードの最後でbody終了タグの前でJavaScriptの前に接続するという、かなり簡単な方法を見つけました。 誰かがrel属性を持つ要素をヘッド制限の外にリリースすることは有効ではないと言うでしょうが、 HTML5.0は10月以来忘却に沈んでおり、WHATWG仕様はこれを禁止していません。