元『企業戦士』の1日1歩ブログ ~素晴らしき日常~

のんびりいこうやない。今日も明日も、明後日も。

f:id:chihiro_dayori:20170523173117p:plain

1ニチ1ポブログ

- 企業戦士がWEB経験0からはじめるSTEPUPブログ -

ブログのページスピードの改善には、まずは画像のサイズ調整や圧縮作業から始めよう!

f:id:chihiro_dayori:20170806162151j:plain

 

はじめに

ブログのカスタマイズに集中すると、どうしても凝ってしまい、デザイン性が上がる一方で、ページ自体が重くなりがち。

読み手に対して「読みやすいデザイン」を求めたにも関わらず、ページスピードが遅くなることで、読みづらい環境になってしまったら、本末転倒です。

そして“ページの読み込みの遅さ“はSEO対策としても、評価は低くなる傾向があり、そもそも検索上位に上がりにくくなることもしばしば。

カスタマイズの取捨選択をして、減らす箇所を見つけるのも大事だと思いますが、「まず、どこから手を付ければ?」とお悩みの方は『画像のリサイズや圧縮』から始めてみませんか。

筆者も、実際に当ブログで実践し、大きく改善することが出来ました。(まだまだ改善の余地はありますが…)

・改善結果はこちら

f:id:chihiro_dayori:20170806144252p:plain

1.まずは自らの状況を確認して見よう!

自らのブログが「どのような状況になのか」を、下記サイトで確認をしていきます。

PageSpeed Insights

1.作業は簡単!1に自らのサイトURLを入力し、分析ボタンを押すだけ。

f:id:chihiro_dayori:20170806145652j:plain

2.ボタンを押した後、20~30秒ほど待っていると、この画面が出てきます。

f:id:chihiro_dayori:20170806150536p:plain

3.モバイルとパソコンのタブをクリックすれば、それぞれの状況を確認できます。後は「適用可能な最適化」の欄を確認しながら、改善出来るところを作業していきます。

SPONSORED LINKS
 

2.筆者のブログを参考にすると

f:id:chihiro_dayori:20170806152113j:plain

ブログのトップイメージであるグラデーションの背景画像が重い事が判明しました。実際に、元の画像を確認してみると、2.65MBもサイズがありました。

まずは「使用予定の画像サイズに対し、無駄に大きくないかの確認」と「確認後、必要な画面サイズを調整していきたい」と思います。

3.画面のサイズの確認と調整の方法は

f:id:chihiro_dayori:20170806153011p:plain

1.右クリックをして、プログラムから開くペイントを開きます。

f:id:chihiro_dayori:20170806153508j:plain

2.サイズ変更をクリック。

3.サイズ変更と傾斜からピクセルボタンを押す

4.縦横比を維持するのボタンをチェックを外し、横幅と縦幅の調整を手動で行います。

筆者の場合は「3264×2448」からフルHDサイズ程の「1920×1080」に調整致しました。この調整を行っただけでも、2.65MBから485KBに改善されました。

これでも、十分改善されていますが、更に画像の圧縮を行っていきます。

4.画像の圧縮方法は

JPEGだけでなく、PNG,GIFも圧縮できるサイトになります。

Compressor.io - optimize and compress JPEG photos and PNG images

f:id:chihiro_dayori:20170806155453j:plain

1.リンクに飛ぶと、この画面に飛びます。

2.TRY IT!を押してもらうと、更に別ページに飛びます。

f:id:chihiro_dayori:20170806160246p:plain

3.この画面のSELECT FILEを押すと、参照画面が出てくるので。画像を指定。

4.自動的に圧縮作業に進みます。

筆者の場合は、485KBから173KBに改善されました。 

最後に

実際にこの画像一枚で、今回の改善結果を得ることが出来ました。画像調整などあまり手をつけていない人は、一度リサイズや圧縮を行ってみてはどうでしょうか。

カスタマイズコードの調整は、WEBデザインがある程度出来る人じゃないと難しいと思うので、画像調整から始めてみると、大きな改善結果を得られる可能性もあると思います。

尚、画像のリサイズはWindows向けの作業方法になりますので、ご留意ください。

追記:Hachi32TKさんのコメントを受けて

正直「何点を目指せば?」と言われると応えられませんが…筆者が知る限り、つばさのーとを運営するつばさ (id:tsubasa123)さんのブログはデザイン性が優れてるだけでなく、ページスピードも速いと思っております。

モバイルで「68点」、パソコンだと「80点」なので、凄すぎです。(お詫び:勝手に引用してすみません)

www.tsubasa-note.blog

再追記:更に画像の選定から高さも改善を加えた結果

f:id:chihiro_dayori:20170806175451p:plain

当初と比較しても、大幅に改善されました。

1度、改善した時から見ても、5%以上の改善で出来ましたので、めげずに改良を続けるのはいいかもしれませんね♬

おしまい。 【文字数:1809文字、作成時間:2時間00分】

SPONSORED LINKS