ABOUT
運営情報
- 企業戦士がWEB経験0からはじめるSTEPUPブログ -
ブログのカスタマイズに集中すると、どうしても凝ってしまい、デザイン性が上がる一方で、ページ自体が重くなりがち。
読み手に対して「読みやすいデザイン」を求めたにも関わらず、ページスピードが遅くなることで、読みづらい環境になってしまったら、本末転倒です。
そして“ページの読み込みの遅さ“はSEO対策としても、評価は低くなる傾向があり、そもそも検索上位に上がりにくくなることもしばしば。
カスタマイズの取捨選択をして、減らす箇所を見つけるのも大事だと思いますが、「まず、どこから手を付ければ?」とお悩みの方は『画像のリサイズや圧縮』から始めてみませんか。
筆者も、実際に当ブログで実践し、大きく改善することが出来ました。(まだまだ改善の余地はありますが…)
・改善結果はこちら
自らのブログが「どのような状況になのか」を、下記サイトで確認をしていきます。
1.作業は簡単!1
に自らのサイトURLを入力し、分析
ボタンを押すだけ。
2.ボタンを押した後、20~30秒ほど待っていると、この画面が出てきます。
3.モバイルとパソコンのタブをクリックすれば、それぞれの状況を確認できます。後は「適用可能な最適化」の欄を確認しながら、改善出来るところを作業していきます。
ブログのトップイメージであるグラデーションの背景画像が重い事が判明しました。実際に、元の画像を確認してみると、2.65MB
もサイズがありました。
まずは「使用予定の画像サイズに対し、無駄に大きくないかの確認」と「確認後、必要な画面サイズを調整していきたい」と思います。
1.右クリック
をして、プログラムから開く
でペイント
を開きます。
2.サイズ変更
をクリック。
3.サイズ変更と傾斜
からピクセルボタン
を押す
4.縦横比を維持する
のボタンをチェックを外し、横幅と縦幅の調整を手動で行います。
筆者の場合は「3264×2448」からフルHDサイズ程の「1920×1080」に調整致しました。この調整を行っただけでも、2.65MBから485KBに改善されました。
これでも、十分改善されていますが、更に画像の圧縮を行っていきます。
JPEGだけでなく、PNG,GIFも圧縮できるサイトになります。
☞Compressor.io - optimize and compress JPEG photos and PNG images
1.リンクに飛ぶと、この画面に飛びます。
2.TRY IT!
を押してもらうと、更に別ページに飛びます。
3.この画面のSELECT FILE
を押すと、参照画面が出てくるので。画像を指定。
4.自動的に圧縮作業に進みます。
筆者の場合は、485KBから173KBに改善されました。
実際にこの画像一枚で、今回の改善結果を得ることが出来ました。画像調整などあまり手をつけていない人は、一度リサイズや圧縮を行ってみてはどうでしょうか。
カスタマイズコードの調整は、WEBデザインがある程度出来る人じゃないと難しいと思うので、画像調整から始めてみると、大きな改善結果を得られる可能性もあると思います。
尚、画像のリサイズはWindows向けの作業方法になりますので、ご留意ください。
正直「何点を目指せば?」と言われると応えられませんが…筆者が知る限り、つばさのーとを運営するつばさ (id:tsubasa123)さんのブログはデザイン性が優れてるだけでなく、ページスピードも速いと思っております。
モバイルで「68点」、パソコンだと「80点」なので、凄すぎです。(お詫び:勝手に引用してすみません)
当初と比較しても、大幅に改善されました。
1度、改善した時から見ても、5%以上の改善で出来ましたので、めげずに改良を続けるのはいいかもしれませんね♬
おしまい。 【文字数:1809文字、作成時間:2時間00分】