Page speed insightsが12点になった哀れな男の話から学ぶ画像の圧縮
ここ最近、とてつもなくブログが楽しい。記事を書くのが楽しい、カスタマイズが楽しい、ブログを見るのも楽しいと、とにかく楽しい。
が、楽しすぎて気を使っていなかったことが沢山あります。今回はその懺悔の記事です。
僕自身の懺悔もありますし、今までクッソ重い記事を読んでくれたみなさんにお礼とお詫びをしなければならないと思ったのでここに書きます。
練炭自殺って気持ちいのかな
Page speed insightsの結果に愕然
PC版は13点でした。
そしてスマホ版は14点でした！！キャッホー！！（錯乱）
ウッソだろお前wwwww
今まで何も考えずに記事を書いていた
読んでる人にわかりやすい記事を書こうという意識は僕の中にしっかりとありました。
そのために、沢山画像を使いましたし、読んでくれる人が増えるようにアイキャッチ画像にも凝りました。
みんなに伝わるような記事が書きたい！
が、これが完全に裏目に出た。
読み手に伝わる画像、行間や、文字のサイズにフォントと色々研究を重ねてきたにも関わらず、僕はページの重さに一切気を配っていなかった。
ページが重いと、そもそも、僕のブログを見てくれる人が少なくなってしまうだろうし、「読み手に優しい」なんてことは、ただの世迷い言でしか無くなってしまう
画像を全く圧縮していなかった
僕は、画像をODANというサイトからダウンロードしています。
このサイト、非常に便利なのですが、画像が結構重い。長辺1300〜ぐらいでダウンロードすると、大体1MB以上になります。
こいつが5枚ぐらいになると、一気にブログが重くなります。
最低でもはてなフォトライフの設定はしよう
是非、はてなフォトライフの設定を見直してほしい。もし、画質の項目が100%になっているようなら、最低でも90%、出来れば70%程度にすることをオススメしたい。
それだけであなたのブログは本当に軽くなる。写真ブログでもない限り、はてなフォトライフの設定は自分好みにいじってみてください。
詳しく検証されてる記事はこちら
画像の圧縮が出来るフリーサイトはほぼ2択
はてなフォトライフの圧縮率は一律でしか設定ができません。その為、画像によっては、画質がとてつもないことになります。
そういう時は、フリーサイトが便利です。
compress jpeg
png、jpg、pdfの圧縮に対応しています。画像の圧縮率が自動で調整される為、画質が崩れる心配が比較的ありません。
こんな感じで圧縮率が適切に分けられます
tiny png
compress jpg は、jpgとpngを分けて圧縮する必要がありましたが、tiny pngは一気にアップロードできるのが魅力です。
僕の一推しソフト。強いて不満点をあげるとすれば、パンダがムカつく。
pngは使うな
僕、はイラストの投稿や、canvaを使ったアイキャッチ画像にpngファイルを使っていました。やっぱり画質は綺麗な方がいいですからね。
まあこいつもまた失敗を呼んでしまったのですが。
どうやらこのpngがはてなブログとそこはかとなくミスマッチらしい。というわけでみんな！！pngはやめようぜ！！！！
アイキャッチの画質が汚くても、ページの読み込みが早い方が絶対良いと思うので、僕はpngアンチになります。
png殺す党を結成したい
画像を圧縮するだけで12→47点
革命だァーッ！！
30点アップは革命的
いやでも47点じゃねえか！！！と言われれば、それまでですが、中学生の時のテストを思い出してほしいんです。
47点って赤点余裕で回避ですからね！！！！12点だったら夏休み夏季補習コース！！！！すごいんですよ！！！！この結果はァ！！！！
教訓：画像は絶対に圧縮しよう
はてなブログ、WordPressでも、なんにしても、画像は絶対に圧縮してほしい。
そうでもしないと、僕みたいなことになってしまいます。
傷つくのは僕だけでいい
そういえばこの記事はシリーズ化予定です。長くお付き合いいただけると幸いです。
