PageSpeed Insightsで「CSSを縮小する」が表示された時の対処法

最近、サイトの表示速度なんてめっきり気にしなくなっていたのですが久しぶりに「PageSpeed Insights」を見てみました。

「ビミョ~な感じ」です。

どちらかといえば悪い気がします。

image-9

サイトの表示速度はSEOにも影響するようなので、気の向いた時に少しづつ改善しています。

ちなみに、ここはスクリーンショット撮るの忘れて作業してしまったので、ほかでスクリーンショット撮ってきました(苦笑

image-6

今回、修正したのは、画像で見えている「CSSを縮小する」と「JavaScript を縮小する」の部分です。「画像を最適化する」はWordpressのプラグインなどで最適化済みですが、ひっかかっているのはアドセンスなので仕方がありません。プラウザのキャッシュも同様でアナリティクスなので、これも仕方がありませんよね。

image-10

また、ここはHTMLのエラーも無かったので直す必要もありませんでした。

ぶっちゃけ難しくなかったので簡単に終わらせますね。

スポンサーリンク

「CSSを縮小する」「JavaScript を縮小する」が表示された場合の対処法

まずはじめに「CSSを縮小する」とこんな感じになるので、ちょくちょくCSSを触ってサイトやブログの見た目を変更したい方はやらない方が良いと思います。※慣れた人なら・・・例えばテキストエディタ「Brackets」のプラグイン「beautify」とかで元に戻せますけど・・・

どうしても変更したい場合は、圧縮前のCSSをテキストエディタなどにコピーしてバックアップしておくといいと思います。

image-11

PageSpeed Insightsで表示された圧縮すべきCSSにアクセスします。アクセス方法はサーバー経由でもWordpressのテーマ編集からでも、どちらでもかまいませんがテーマ編集からだと表示されない場合もあると思います。

image-12

もとのCSSをコピーして、こちらのサイトを利用してCSSを圧縮します⇒ https://syncer.jp/css-minifier

image-15

縮小されたコードが表示されたらコピーして元の場所に書き直します。

これだけです。

ただ、子テーマを圧縮するときは上部のところは触らないように、自分で書き込んだ部分のみ圧縮するようにしないとエラーがでますので気をつけて下さいね。

子テーマを圧縮する場合は、こんな感じになります。

image-20

「JavaScript を縮小する」が表示された場合の対処法

これも同じですね。

先ほどと同じように http://refresh-sf.com/ に接続して縮小したいJavaScriptをコピーして圧縮するだけですが、Wordpressのテーマを使っている場合はやめた方が良いです。

だいたいJavaがまともに動かなくてエライ目にあいますので・・・テーマが壊れましたw

それでも勉強のためにやってみても良いかもしれませんが・・・おすすめできません。

image-17

試しにやってみたい方は、圧縮(縮小)したいJavaScriptは、サーバーへアクセスしないとアクセス出来ないと思いますのでFTPソフトを使用してアクセスするといいと思います。

だいたいのレンタルサーバーなら、ファイルマネージャ(FTP機能)が付いていますのでアクセスできると思いますが・・・(私も、始めたばかりのころは難しかったから・・・慣れるしかありません)

image-18

残りの問題点はアナリティクスやアドセンスといったGoogleが絡んでいるので諦めるしかないですよね。

image-19

見ていて遅いなと感じるかもしれませんが、少しづつ改善していきますので見守ってやって下さい<(_ _)>

壊れたの直すのが大変でしたorz

スポンサーリンク