目次
wordpressでサムネイルを出力する際の注意点（wordpreesテーマ作成をする方向け）
画像が重い！ 困った！
wordpressで最新記事や人気の記事をサムネイル付きで表示したいことってよくありますよね。
その際に画像の大きさの設定を間違うと画像が重たすぎてページ速度に影響を与えてしまっていることがあります。
例えばこんな感じに…
測定はこのサイトで行っています。 → gtmetrix
PCサイトならともかく、回線容量の限られている携帯端末で大量の画像を読みこまされてしまってはたまったものではありません。
これは、サムネイルのサイズが画像をアップロード時のサイズのままになっているからですね。
サムネイルのサイズは大きくても縦横300px（画像サイズは100Kくらい）もあれば十分ですから、1000pxや2000pxなんていう大きなサイズを使う必要はありません。
サムネイルのサイズ指定はこんな感じです。
1 |
弊社のブログ一覧だとこれくらいのスコアになります。
画像の多いページとしてはそこそこ速くなっているのではないでしょうか。
ページサイズもかなり少なく抑えられていますね。
実はwordpressはアップロード時に複数の画像を自動生成してくれている
wordpressはアップロード時に4つのサイズの画像を保存してくれています。
- ‘thumbnail’ サムネイル用
- ‘medium’ 中サイズ
- ‘large’ 大サイズ
- ‘full’ 元の画像サイズ
指定方法一覧は以下の通りです。
1 |
その他に縦横比を変えたい場合もあるかと思いますが、そこはまた次回。
弊社ではサーバーをhttp/2に対応させたり、nginxのキャッシュ機能を利用したり、gulp等のタスクランナーを積極的に活用することでページの高速化に務めています。
wordpress高速化についても近いうちに書きます！
※2016/09/24 書きました！
