【SEO】CSS（JS）の圧縮／PageSpeed Insights

ページの速度改善についてです。

ページの速度を速めることは、SEO対策として大切になってきます。

わたしは、ランディングページを作成していましたが、ページの表示速度を速めることはランディングページの利便性というのを改善することにつながり、サイトの表示順位があがっていきます！（ここではランディングページについては関係ないので説明省きます）

PageSpeed Insights については下記記事にも少し記載しているので、ご参照ください！

【Wordpress】ページ読み込み速度が遅いときにやったこと

モバイルページの読み込みが遅かったので、ページ読み込み改善のためいろいろ試行錯誤してみました。 他の記事でも紹介していますが、とても見にくくなってしまったのでまとめてみました。 ページの読み込み速度は、SEOにも関係するため、知っておきたい...

mapletc.net

CSSの圧縮にVScodeを使用

CSSのコードを圧縮すると表示速度が改善することがPageSpeed Insightsで発覚しました。

圧縮にはVScodeを使用しました。

VScodeの拡張機能「Minify」を使用します。

インストール後、CSSファイルを表示した状態で

①「fn + F1」またはそのまま「F1」、または「shift + command + P」
②「Minify」のコマンドをクリックかEnterキー

これで圧縮されます！

圧縮率は、左下の％で確認できます！

圧縮されたファイルは、同じディレクトリに、「○○.min.css」で作成されています！

CSSだけではなく、JSファイルでも可能なため、試してみてください！

ちなみに

「Minify」で圧縮されたファイルを再編集したいときは、
圧縮されていない元のCSSを編集し、再度同じように圧縮すると、上書きされるようになるので、私はそうして編集しています！