Insightの数値って気にしてますか?雑多ブログのカテゴリの多さを活かすために、ブログのテーマをマテリアルに変更したわけですが、ここで1つ問題が...。Insightの数値、めっちゃ下がった!確かに、Stinger5-Cheetahを利用していた頃に比べると、カテゴリごとに新着記事を表示したことで、TOPページで利用する写真がめちゃくちゃ多くなりました。Optimizer」を導入してるんだけど......。いうことを検証してみましょう。Developers)の1つです。携帯端末やデスクトップ端末向けのページのパフォーマンス(表示速度)を計測し、0~100点で結果を通知してくれます。改善点も合わせて教えてくれるので、使っているブロガーさんも多いのでは無いでしょうか?スポンサーリンク表示スピードが早いとどんなメリットが有るの?読み込み速度が早くなることで、ユーザーのためになる(高速表示することで直帰率が下がる可能性がある)Googleに評価される可能性があるという利点があります。言われているので、ただでさえ直帰率が高めな雑多ブログには特に注意が必要だと分かりました。Springストレスを感じるほど読み込みの遅いWebサイトは論外だとしても、わずか数秒のパフォーマンスの違いが、直帰率やコンバージョン率に跳ね返ってくることをきちんと意識しているだろうか。コンサルタントの増山誠氏は、Webサイトの表示高速化の重要性と、それを実現するソリューションを、DeNAの事例を交えて紹介する。Web担当者Forumスポンサーリンクブログにおける画像圧縮の方法とはアップする前に画像を圧縮する自分のカメラで撮影した写真や、インターネットで公開されている有料・無料の写真素材は、かなりサイズが大きい写真であることが多いです。別として、基本的には、ブログに画像をアップロードする前に、ちゃんと圧縮しておく必要があります。圧縮はWebサービスがとても簡単なのでオススメです。それぞれのサービスでどれだけ写真が圧縮できてどんな見た目になるのかは、初心者向け記事ならなんでもござれなエローラさん(@uszero800)の下記の記事がとても参考になります。フルカラーのイメージ素材や写真に最適な形式ですが、どうしても容量が大きくなりがちです。そこで、画像を軽量化(圧縮)してからアップロードするのが常識。アップした後に画像を圧縮するWordPressにプラグインを導入して、すでにブログにアップしている画像を圧縮(最適化)する方法です。Optimizer」が有名です。プラグインの利用方法は下記のサイトの記事が分かりやすかったです。Optimizer】つい昨日、サーバーを「お名前.comの共用サーバー」から「さくらのスタンダード」に引っ越しました。一応、さくらのレンタルサーバーには「リソースブースト」とかいう緊急的に転送量などの制限を緩和してくれる機能があるので、その実力を見ようと根本の解決策は日付が変わってから行う予定です。前から存在は知っていましたが、私はあんまりプラグイン入れたくない人なので、ちょっと避けていました&。Optimizer」を検索「今すぐインストール」とお馴染みの手順です。インストールが完了したら、「プラグインを有効化」で有効にしておきましょう。ちなみに「Cloud」が付いているものが隣にありますが、こっちは自分のサーバーに画像を置かずに、よそのサーバーで管理してくれるもの。基本的にはデフォルトのままで問題ないです。そのままサクッと進めてしまって大丈夫ですが、一応全てではありませんが載せておきますね。こだわりたい人だけ好きに設定すると良いと思います。何か他の人の導入記事を見てると、よく分からないからか、おかしな理由を付けて「pngout」を入れてはいけないみたいなことが書かれてますが、本当は入れた方がいいです。画像はChromeの翻訳機能を利用して翻訳かけていますが、実際は英語です。Optimizer」を利用しています。対策前(画像をそのままアップしてプラグインで圧縮)モバイルは50点パソコンは24点ついでにGTmetrixを調べると、E(53%)/D(69%)、ロードタイムは7.2秒すべての画像をアップする前に圧縮したものに差し替えモバイルは50点のままパソコンは24点→49点GTmetrixは、E→D(53%→69%)/D(69%)、ロードタイムは7.2秒→5.8秒ページサイズも3.42MB→1.81MBということで確かにページサイズが小さくなり、ロード時間も短縮されている様子。Optimizer」で再圧縮モバイルは50点のまま(!?)パソコンは49点のまま(!?)GTmetrixは、D(69%)/D(69%)、ロードタイムは5.8秒→5.0秒(!?)※ロードタイムは若干の変動があるので、はっきりいってほとんど変化無しといったところです。Insightで改善指示が出ている画像を見てみると、「activity-report-201601-00.jpg」「push-notification-hatebu-00.jpg」などといったアップした画像そのもの。事前に圧縮した画像については、EWWWで再圧縮しようとしても、圧縮されていないようです。Optimizer」に意味は無いの?とのコメントを頂いたので補足させて頂きます。今回の検証で、「EWWWで自動的に圧縮していた画像」を、「事前にWebサービスで圧縮しておいた画像」に差し替えることで数値が改善しました。これは、「EWWWで自動的に画像を圧縮する圧縮率」より、「Webサービスで圧縮した画像の圧縮率」の方が高く、サイズの小さい画像を使っていることを評価してくれたんです。無い、という訳では有りません。EWWWでも圧縮レベルを高めることで数値は改善するものと思われます。Webサービスで圧縮した画像を同じくらいのサイズになるようにEWWWの圧縮レベルを高く設定すると、1枚1枚の画像アップロード自体に時間がかかるようになるため、ご注意下さい。Insightでは、記事のアイキャッチ画像のフルサイズ(原寸大)のものをサムネイルとして利用しているため、こんな小さい領域に表示するのに画像大きすぎるんじゃない?と怒られている模様。Optimizer」が圧縮しても、数値に変化が無かったんですね。あなたが利用中のテーマが、記事一覧ページで利用する画像に、WordPressが生成したサムネイルを利用しているテーマであれば、再圧縮時にも数値が改善するものと思われます。TSUNJI(@tsunji1983)的まとめ今回の検証結果をまとめると、ブログの画像は事前に圧縮する。Optimizer」で再圧縮する、という流れがオススメです。(自分のテーマが、自動生成のサムネイル画像を利用しているかわからない場合は、両方するもの、とおぼえておくと良いでしょう)やはりブログはユーザーに見てもらってナンボの世界です。いうことは、すこしでも使いやすいブログを目指すのは、ブロガーとしてもっとも大切な考え方ですよね。Insightの結果は、モバイル、パソコンともに、まだまだ改善の余地がたくさん有ります。今後は、モバイル、パソコンともにA評価を目指して、ブログの改善に努めたいと思います。結果は随時アップしていきますので、良ければ参考にしてください。以上、TSUNJI(@tsunji1983)でした。介護系の会社のたった1人のWeb担当。2015年の夏に、かわいい息子が生まれたことをきっかけにブログを開設しました。Plusの初心者向け使い方講座、WordPressで雑多ブログを運営する人向けのアクセスアップについてお届けします。コメントをキャンセルメールアドレスは公開されることはありません。