IT便利帳

コンピュータやタブレット端末の便利な使い方やこれは知らなかったといったことを紹介します。

GTmetrixのSpecify image dimensions改善方法

      2015/02/15  あとで読む   はてブする

GTmetrix

GTmetrixというウェブサイトの表示速度を計測してくれるサイトがあります。これはURLを入れるだけで簡単にブログを計測してくれるので助かっています。

この中で一番評価が低いのが「Specify image dimensions」。これがFランクで、100点満点中0点。これはいかんと早速直せる所は直してみました。

スポンサーリンク

「Specify image dimensions」を見直す

GTmetrixで計測

表示速度の評価が低かった「Specify image dimensions」をクリックしてみます。imageなので画像表示に関係するものです。

 

GTmetrixのSpecify image dimensionsの改善方法
するとURLの後に(Dimensions: 320×80)というように書かれていました。これは画像を指定している箇所に、「画像サイズが入力されていないので、表示に時間がかかってるよ」ということです。

Specify image dimensions」は直訳すると、「画像サイズを指定して!」という意味でした。

画像の箇所<img src=”sample.gif alt=”サンプル”>と書かれているものにサイズを入れ、<img src=”sample.gif alt=”サンプル” width=”320″ height=”80″> にしてくださいということです。

 

スポンサーリンク

特にサイドバーの画像サイズが指定されていなかった

確かにロゴとかタイトル画像などにサイズ入れ忘れていました。特に画像のサイズの指定がされていない箇所は「サイドバー」「ガジェット」の位置がが多かったです。それらにサイズを指定しなおしました。

GTmetrixの速度改善画面で、画像サイズを確認してもいいのですが、wordpressの[ダッシュボード]→[メディア]から画像ファイルを検索して指定してもサイズの詳細がわかりますよ。

 

最後に

以前は指定してたけど、カスタマイズしすぎていて、サイズを再指定し忘れたりしているのもありました。タイトル画像やサイドバーのウィジェットは毎回表示されるものなので重要ですね。

速度改善は重要だとGoogleも言っています。改善できるところは改善していきたいものです。

「いいね!」で
最新情報をお届け!

Twitter でIT便利帳を

 - WordPress

スポンサーリンク

注目キーワード

スマモバ

U-NEXT

Kindle Unlimited

  関連記事

Wordpressプラグイン
FacebookのOGPの設定はAll in one SEO Packが簡単!

今までOGPの設定をするとき、WordPressプラグイン「Open Graph …

サーバ移転
ロリポップからシックスコア(sixcore)へサーバー移転に成功!どこに躓いたか

サーバをロリポップからシックスコアに移転しました。理由は別のサイトのPVが増えて …

WorePress
[WordPress]過去記事を最上位に固定表示する方法

過去にアップした記事をもう一度注目させたい時に、過去記事を一番上に固定する方法が …

WordPress
[WordPress]fluctやnendの広告が表示されない時は、JavaScriptプラグインをチェック!

別サイトで何ヶ月も前にスマホ広告のnend(ネンド)の申込をしました。すぐに許可 …

蛍光ペン風にテキスト上をマーカーするCSS
蛍光ペン風にテキスト上をマーカーするCSSを設定してみた

色々なブログを拝見していると、とても気になるの強調サインがあります。それは蛍光ペ …

アフィリエイト表示が切れている
【Stinger3】記事の中にGoogle AdsenseやAmazonアソシエイトを入れる方法

ブログ内に以下のAmazonアソシエイトを貼り付けようとしたら、下側が表示されな …

WorePress
[WordPress]記事中のmoreタグにAdsenseを追加できるプラグインAdMore

当ブログはWordPressで作成しています。Google Adsenseを表示 …

Stinger3のサイト名を、PC画像とスマホ画像で切り替える方法
[WordPress]Stinger3のサイト名を、PC画像とスマホ画像で切り替える方法

以前「WordPressのテーマ「Stinger3」のサイト名をテキストから画像 …

stinger3
[Stinger3]小見出しのデザインを変更する方法 - スタイルシート(CSS)

どうも、リョータ(@itbenricho)です。Stinger2からStinge …

失敗し泣き崩れる様子
[WordPress]functions.phpの編集時に、サイト画面を真っ白にしてしまった場合の直し方

WordPressでfunctions.phpを編集時に、画面を真っ白にしたこと …