高速化TwitterFacebookGoogle+はてブPocketサムネイルを適切なサイズにすることで高速化できるとしたら?WordPressテーマの中には、トップページやカテゴリアーカイブなどで、記事のアイキャッチ画像を自動的に小さく表示してくれる便利なテーマがたくさんあります。このサムネイル画像(小さい画像)、テーマによってはフルサイズのアイキャッチ画像をCSSなどで小さく見せているだけということも有りえるのです。極端な例を出すと、アイキャッチに利用する画像が、ものすごーく綺麗で画素数の高い写真で実は10MBあります!という場合でも、見かけ上は小さく表示することだって可能です。この際のデータ通信量が少なくなるか?というとそうでは有りません。10MBかかってしまい、せっかく来てくれたユーザーさんにとって、すごく不親切なページになってしまいます。今回は、WordPressのメディアアップローダーに備わっているサムネイル作成機能を利用した、テーマに最適な画像の作成と使用により、ページの表示速度をアップさせるのが目標です。アップしている画像を一括でリサイズテーマが読み込むサムネイル画像を修正といった感じです。テーマに沿った画像の選択をするに対応した内容になります。画像の最適化のみのため、まずは下記の記事の最終時点でのページ速度を見ておきましょう。モバイルの点数は50点。GTmetrixは、D69%/D69%、ロードタイムは5.0秒、ページサイズは1.82MBとなっています。スポンサーリンク手順1:テーマに必要な画像のサイズを調べようそれではさっそく、具体的な作業の流れを見ていきましょう。テーマがサムネイルで利用している画像サイズを調べます。ChromeやFirefoxといったブラウザの開発者ツールを利用する方法です。今回は、Firefoxを例に手順を見ていきましょう。続けて、WordPressに画像をアップ(メディアを追加)する際に自動で作成されるサムネイルのサイズを設定しましょう。※設定できるサイズは3種類なので、もしそれ以上に種類が必要、という場合には、似たようなサイズのものについて間を取る、もしくはどちらかに合わせる、等の選択が必要になります。WordPressにログインしたら「設定」⇒「メディア」をクリック「サムネイルのサイズ」「中サイズ」「大サイズ」に数値を記入して変更を保存をクリック(もしサイズの指定を0にした場合は、そのサイズのサムネイルの作成を中止することもできます。)手順3:過去にアップした画像を一括リサイズ手順2の注意点としては、サムネイルのサイズの設定を変更すると、それ以降にアップした画像については、設定に従ったサイズの画像を生成してくれますが、設定する前の画像は変更してくれない、ということ。ThumbnailsというWordPressプラグインを紹介します。Optimizer」などの画像圧縮用のプラグインを導入している場合は、再圧縮が必要となりますのでご注意下さい。プラグインの説明文にも記載がありますが、過去に生成されたサムネイル画像は自動で削除されませんので、FTPなどでアクセスして、自分で削除する必要があります。手順4:テーマで利用する画像を修正WordPressでサムネイル画像を呼び出すタグは以下の通り。?>そこで、自分のテーマのテンプレートでサムネイルを指定している箇所を探してみる。cat_lists.phpを修正する必要がある。修正後の各テンプレートの該当箇所の記述はこちら。-->テーマで利用する画像の最適化で表示速度は改善したのか?モバイルは50点のままパソコンは49点→59点へGTmetrixは、D69%→C78%/D69%→C70%、ロードタイムは5.0秒→4.5秒、ページサイズは1.82MB→1.66MBとなっています今回の施策で効果を発揮したのは、パソコンでの閲覧についてですね。数値上はだいぶ改善された印象ですが、ロードに4.5秒......。お、遅い......。TSUNJI(@tsunji1983)的まとめWordPressテーマに最適な画像サイズを探し、テンプレートをカスタマイズする方法について紹介しました。本来は、ブログにアップする前に画像を圧縮する程度で問題無いのかもしれませんが、マテリアルのように画像をたくさん利用するWordPressテーマでは、こういった細かい最適化を継続し、表示スピードを向上させていく必要があります。自分のブログを往訪するユーザーは、パソコンの方が多いのか?それともスマホの方が多いのか?など想像力を働かせながら、よりよいブログを目指して頑張りましょう。以上、TSUNJI(@tsunji1983)でした。介護系の会社のたった1人のWeb担当。2015年の夏に、かわいい息子が生まれたことをきっかけにブログを開設しました。Plusの初心者向け使い方講座、WordPressで雑多ブログを運営する人向けのアクセスアップについてお届けします。コメントをキャンセルメールアドレスは公開されることはありません。