Insightsで当サイトを測定してみることに。なんと、ポイントは57点。思い切りPoorと表示されました...。このポイントを改善するために、出来ることからしてみようということで、まずはCSSの改善を行います。Insightsという仕組みをご存知でしょうか。これは、GoogleがWEBサイトを様々な方面でチェックし、改善点があればその方針を教えてくれるものです。Developersこの仕組みを使って、当サイトの速度を確認してみました。Insights結果はい!おもいっきり「Poor」と言われております!57/100って、いいのか悪いのかわかりませんが、たぶん、あまりよくないのでしょう。様々な改善策を提示してくれておりますが、今回は一番簡単にできそうなCSSの改善から取り組みたいと思います。CSSを縮小するCSSを縮小するための考え方CSSコードを縮小すると、データサイズを1.5KB減らすことができるそう。この1.5KBがどれだけと思いますが、とりあえず1.5KB(も)減らせるんだ!と思いながら対処していくことにします。実際CSSコードを縮小するためのメソッドとして、何があげられるのか考えてみます。いらないコメントを外す改行を無くすできるだけ空白を作らない改善策としては、上記の3点ぐらいでしょうか。元々がテキストファイルなので、テキストのまま圧縮しないとだめなわけです。そこで、テキストを圧縮してくれるサービスを探すことに。そこで見つけたのがこのサイトです。Minifier早速、CSSファイルをコピペし、ファイルにしてみることに。なんと、サイズが34,360バイトから23,693バイトに。30%近くもそぎ落とすことができました。Googleの改善案よりも小さくなりそうです。ここで問題が一つ、わざわざCSSを変えるたびに、このサービスを使っているのは面倒くさいということに気づきました。APIも用意されているようですが、外部APIを頻繁に呼び出すと、それだけで通信コストがかかってしまい、本末転倒になります。CSSの中には実験的なコードがたくさんあり、コメント等を残しておきたいので、オリジナルと圧縮の2種類を管理するのが面倒です。それならば、CSSを圧縮するメソッド自前で作ればいいんじゃね?ってことで早速取り掛かることに。サーバーサイドでCSSを圧縮してみる要はCSSファイルを取り込んで圧縮後、送信してやればいいということなので、不要な空白をすべて取り除くスクリプトを組めばいいのです。コメント削除」で検索。見つけたのが下記のサイトです。外部リンク:PHPが吐き出すHTMLファイルを『自動的に最小化する』スクリプトこれだけでは、CSSに対応できません。自分でコードを追加することに。$buffer;}これで、ファンクション化できました。あとは、ファイルを読み込んで圧縮後、中身を送信するだけです。PHPのコードはこちら。$css;すっごく簡単です。CSSを読み込んで圧縮後、ヘッダー関数でContent-typeを指定してから出力するだけです。この処理でCSSファイルのサイズは34,360バイトから25,221バイトになりました。約27%の圧縮ができました。オリジナルファイルはそのままに、自動的に圧縮して送信してくれるので、非常に楽ができます。コメント欄に変なことを書いてもばれません。Insightsでテストしてみるそして、CSSを圧縮した状態で再度テストしてみることに。Insights結果キター!4点上がっています!そして、CSSの最適化項目が無くなっています。たかが4点かもしれませんが、されど4点です。CSSの圧縮だけで点数があがるのなら、他も最適化するしかありません。Insightsについて100点を取るまでがんばりたいと思います。なりますが、各種最適化が出来次第アップしていきます!次はどの最適化をしようか――乞うご期待。damema.net空海人2018年現在、某企業にて経営企画室としての業務を行う一方、グループ会社のマーケティング、ブランディングなどをしています。WEB回りの事が大好きで、自身でプログラムをしながらマーケティングの知識を深めています。沖縄が大好きなのでいつかは移住したいなぁ。空海人をフォローするコメントを書き込むコメントをキャンセルメールアドレスが公開されることはありません。広報コンテンツ入門WORDSCONTACTホーム検索トップサイドバーカテゴリーSEO23WEB運用10コンテンツ入門3トレンド20マーケティング57仕事39広報4おすすめ。