ガジェマガ

ガジェットと生活改善のブログマガジン【火木土更新】

ブログPV・収益

【PB Responsive Images導入】画面サイズに合わせた画像を出し分けてページを軽量化する

2018年5月24日

ウェブサイトの表示速度改善のネックになるのは画像の重さだ。この画像を軽くできればウェブサイトのデータ量を大幅に削減して、表示速度を早めることが出来る。

トーマスです。ツイッターYoutubeもやってます。お問い合わせはこちら




この記事の目次(クリックでジャンプ)

そこで今回閲覧者の画面幅に併せてレスポンシブイメージを出し分けるプラグインを導入したので効果を報告したい。

導入結果

結論から言ってしまうとウェブサイトのデータ量の軽量化には成功したけど、それほど大きな違いはない。具体的にガジェマガの画像が多いページ(アームでノートパソコンを宙に浮かせてハイテクデスクトップ環境を構築しました)を例に説明すると、ページ全体のデータ容量が3.4メガから2.9メガまで減った。500キロの削減だ。

そのページの総データ容量はChromeのデベロッパーツールからNetworkタブを選択することで確認できる。キャッシュを読み込まないようにCtrlキーとF5を同時に押してスーパーリロードしよう。

パソコン表示だとページのデータ量は3.4メガで

これがスマホ表示だと2.9メガになった。

これを大きいと見るか小さいと見るかだけど、今の日本の通信速度を考えると無視できる差だと思う。それでも俺がPB Responsive Imagesを導入するのは、月末にスマホのデータ通信制限で苦しんでいる人が多いからで、その人達には700キロの差はかなり大きいからだ。月末にアクセスが落ちる事態は避けたいので、少しでも多くの人にガジェマガを見てもらえるように導入している。

劣化しすぎるという問題点

PB Responsive Imagesが自動でリサイズしてくれる画像は思ったより劣化が激しい。スマホの横幅は大きくて420pxほどを想定していて、ガジェマガのスマホ画面では画像は横一杯に表示するので最大で420pxほどの大きさになる。それならPB Responsive Imagesを使ってスマホで420pxの画像を表示するように設定しても良いんだけど、あまりにも画質の劣化が激しくて見れたもんじゃなかった。

納得出来るレベルを探した結果、横幅800pxに落ち着いた。ワードプレスにアップロードする段階での解像度が横幅900pxだから、たった100pxの削減にしかなっていない。

それでもデータ容量を700キロ削減できているのは事実だし、このプラグインを入れているからと言って動作が重くなったりは無いので、このまま使い続けることにしている。

PB Responsive Images設定方法

まずはPB Responsive Imagesプラグインをインストールして有効化するだけで画像の出し分けはもうできているので、スマホで自分のウェブサイトを見ながら納得行く画質のサイズを設定する。

ワードプレスの設定にResponsive Images項目が追加されている。ここから詳細設定が可能だ。

これが現在のガジェマガの設定だ。

それぞれの意味はこうだ。

  • それ以外 800pxの画像を出力
  • 420px以上 800pxの画像を出力
  • 600pxから800px 900pxの画像を出力
  • 885px以上 900pxの画像を出力

画面サイズ600px以下では800pxの画像を表示して、600px以上では900pxの画像を表示する設定にしている。

Quaryの数値を自由に変更することで、任意の画像出力サイズに変更できる。

設定が保存できない

これ俺の環境だけかもしれないんだけど、設定画面で数値を入力してSave Changesを選択すると画面が真っ白になって設定が保存できない。だから設定するために少し遠回りをした。その方法も書いておきたい。

ここではphpを直接弄って設定を変更する。Wordpressメニューのプラグイン→プラグイン編集→PB Responsive Images→選択→options.phpへと進むと123行目から128行目に画像サイズの設定項目がある。

ここで任意の数字に調整して、ファイルを更新する。

その後にPB Responsive Imagesの設定に戻って、Restore Defaults(設定を初期化)を選択するとoptions.phpからのデータが読み込まれて変更した数値が反映される。

実際にウェブサイトを確認すると画像の大きさが変わっているはずだ。

細部に神は宿るではないけど、ブログを運営して記事を書いているのであれば、アクセスを取るための施策はなんだってしていきたい。その意味で、データ通信制限中の閲覧者にも優しくなるこのプラグインの仕様はどこかで役に立つはずだ。

ライフハック 買ってよかったもの

2020/1/3

【2020年版】生活が変わるガジェマガ式買ってよかったもの17選

いよいよ一人暮らしも5年目に突入しようとしていて、欲しいモノは一通り買ってしまった。これからも物欲は尽きることないだろうし、ガジェットに限らず様々な物を購入することになると思うけど、今後は足りないものを補うというより、今あるものをグレードアップする買い物が主流になると思う。 そんな満たされた生活の中でも、俺基準俺調べの買ってよかった商品を、生活に与えたインパクト順にランキング形式でを紹介したい。正直もっと早く買っておけば良かったと思うものばかりなので、まだ持っていないものがあれば急いで購入してほしい。 1 ...

ReadMore

ライフハック 買ってよかったもの

2020/4/1

ガジェマガの中の人のポケットとカバンの中身【男の必要最小限】

多くの有名ブロガーがカバンの中身を記事にしているのにガジェマガではまだ一度も鞄の中身について書いたことがなかった。ブロガーになりたいのであれば、他のブロガーが書いている記事はしっかりと抑えておきたいということで、今回はガジェマガなりのカバンの中身と、ポケットの中身を紹介したい。 鞄はオカマの象徴 in USA 俺は中学生高校生の頃はリュックサックを使っていたし、社会人になってからはボディバッグを休日の荷物入れとして使っていた。社会人になり立ての頃にアメリカに留学していた妹と再会する機会があって、アメリカの ...

ReadMore

お得情報 ライフハック

2020/4/1

【東京都の一人暮らし】渋谷区6畳一間の生活費を解説【約16万円】

Youtubeぼーっと眺めてたら月の出費内訳を公開しているOLの動画があって、なにこれすげぇおもしれーおれもやろーって思ったんだけど、急に動画にすると色んな抜け漏れが発生するから、まずは記事にすることで動画のクオリティを高める。 ということで今回は都会へのアクセスを何より重視して渋谷駅徒歩圏内の一人暮らしとしては最低ラインの生活を送っているであろう俺の月の出費をまとめる。これから都会での一人暮らしを検討している人は参考にしてほしい。そろそろ結婚したい。 一人暮らしの生活費を下げる方法 ガジェマガの過去の記 ...

ReadMore

ダイエット・健康・美容 体験談

2020/1/14

【高すぎ】ゴリラクリニックのヒゲ脱毛で30万円提示された話【評判・口コミ】

髭いらねーって思って髭の永久脱毛に手を出そうとしたんだけど、ゴリラ脱毛が想像以上に高くて、ネットでの値段の記載方法が悪質だと感じたので今日はその件を書きたい。 毎日髭剃るのめんどくさい みんなもそうだと思うけど、朝起きて仕事行くまでの時間は戦争だ。なぜなら俺はなるべく寝ていたい!むしろ起きたくない!でも社会人なので流石に会社に遅刻するわけにもいかず、毎日生きるためにゾンビ顔負けの死んだ表情で通勤しているのが実情だ。 そんな社会人にとって朝の時間は貴重だ。歯を磨いて顔を洗って髭そって朝ごはんを食べて着替えて ...

ReadMore

スマホ レビュー

2020/2/10

【iPhone11レビュー】妥協が無い。予算8万の最適解【欠点3つ】

俺はブランドよりコスパを重視するタイプだからAndroidをメインマシンとして使い続けてきたんだけど、2019年に発売されたiPhone11はそんじょそこらのAndroidスマホを凌駕するほどコスパが高い。iPhoneなのに(倒置法) ということでiPhone11を購入して検証しながら乗り換えるか悩みに悩んだんだけど、皮一枚でMate 20 Proの続投を決定した。 今回は10年ぶりに購入したiPhone11をレビューしつつ惜しくも俺のメインスマホになれなかった理由を解説する。 iPhone11の特長 i ...

ReadMore

AFFINGER

2019/12/4

【ブログで稼ぐ】AFFINGER5導入から1年5か月のPVと収益

ブログで稼ぐならワードプレスを使った方が良い、ワードプレスで稼ぐなら有料テーマを使った方が良いという話は聞いたことがある人も多いと思う。 俺もその話を鵜呑みにしてワードプレスの有料テーマAFFINGERを購入した口なんだけど、AFFINGERを導入したことでどれくらい効果があったのかをガジェマガの事例で紹介したい。 ガジェマガ運営の経緯 まずはガジェマガ運営の経緯を紹介する。 2015年10月にFC2でブログ運営開始 2016年5月頃にオススメスマホランキング記事が検索上位に表示される 2016年5月から ...

ReadMore

-ブログPV・収益

Copyright© ガジェマガ , 2020 All Rights Reserved Powered by AFFINGER5.