しあわせまるちずむ

韓国、新大久保、ハンドメイド、BOYSLOVE。

【はてなブログ初心者心得】ブログが重い?軽量化を忘れてた!画像圧縮+αをする前と後で比較してみた。

f:id:meymei:20180919191548j:plain
三度の飯よりブログが好き!なりっぴ(@2525rippi)です。

 

 

はてなブログ初心者の私…何も知らず書き続けて20記事。

ここにきて、ブログが重いと検索順位に響くという事実を知りました。爆

 

物凄い今更感…!

 

パソコンでもスマホでも開くのが遅いことに気付き、私のアイフォンがおかしいのか?と色々調べた結果、工夫をしないとどんどん重くなっていく&検索順位が落ちるということがわかりました。うわーん!涙

 

私のようにド初心者のお仲間が記事を書いてから修正に困ってしまう…なんてことのないよう、自分の失敗の戒めの意味も込めて今回行ったことをUPしておきます!

 

 

まずはページの重さを調べてみた。

ページ測定は皆さん PageSpeed Insights で確認していると知り、早速私も試してみましたた。

使い方は超簡単!

自分のHPのURLをコピペして「分析」ボタンをクリックするだけです。

 

分析の結果…

f:id:meymei:20180919174437j:plain

f:id:meymei:20180919174435j:plain

モバイル:90

パソコン:46

これは100点中何点かという評価らしいのですが、低いですね。

それは遅いはずだ…

(モバイルが90なのに私が開けないのはアイフォン自体が重いせいなのかしら?)

 

ということで、ド素人ながら軽量化を試みました。真顔

 

軽量化するべき2ポイント

軽量化するにはいくつか項目があるようですが、とりあえずよく見かけた2項目についてまとめました。

初心者なのでやれるところから…←

 

HTML/CSS/Javascriptを縮小させたり排除したりする

コンピューターのwebデザインなどなどに必要な言語ですね!確か!←

なんとなーく意味はわかってるし使っていますが、詳しいことまではわかりません。

だってこんな英語だらけの言語難しいんだもん(誰)

 

難しい言葉はわからないので置いておいて、とりあえず無駄な改行などがページを重くさせてしまう要因になっていることは理解しました。

ということで、よくわかりませんが無駄に改行していた部分を消してみました。

が、そんなに大きく影響しているわけではないそうなので…初心者のうちは必死に直す必要はないのかも…?

 

HTML/CSS/Javascriptに関しては改善点が沢山あるそうですが、言語を理解していないのに下手にいじってデザインが崩れると初心者は元通りに直すのが難しくなるので…

心配だったらいじらなくていいと思いました。真顔

 

初心者でも簡単にできることがあれば誰か教えてください…(小声)

 

画像を圧縮する

どうやらこれがめっちゃんこ大事なのだそうです。

本来は記事をUPする時点から、ちゃんと画像を圧縮してアップするべきところを私gは何も考えずにペタペタ貼ってたせいで…知らぬ間に画像のデータサイズがかさんで、ページがかなり重くなっていたようです。涙

 

ということで、画像を圧縮してブログへ貼りなおしました。

その際にぶち当たった壁(疑問)も含めて解説致します。

私のように記事を書いた後に気付いた人もいらっしゃると思いますゆえ!

 

圧縮した画像は再アップロードが必要だった

まず、圧縮する以前にぶち当たった壁。

画像圧縮は記事上では当然行えないため、各画像を圧縮した後に記事に貼りなおさなければならないということ。真顔

しかも私相当のアホで、原本画像を全部削除してしまってたんです。

ということで、はてなブログの記事にUPした画像をPCに再ダウンロードするところから始まりました…。

 

画像は再ダウンロードはできるが超絶面倒くさい

原本がないので、私ははてなフォト(ブログ記事の画像がアップロード&保存される場所ですね!)から一枚一枚、右クリックでダウンロードし直しました。

 

はてなフォトへはブログの管理画面右上のところから飛べます!

f:id:meymei:20180919190131j:plain

 

押すと今までアップロードした写真が一覧で出てきますので、保存したい画像をクリック。

画像の上で右クリックをして「名前を付けて保存」で任意のフォルダに保存します。

f:id:meymei:20180919190129j:plain

 

この作業の面倒くさいこと面倒くさいこと…

自業自得ですが、本当に…念には念をで消すべきではなかったですね。涙

20記事分、頑張って保存し直しました。

 

画像をオンラインで圧縮する

さて、やっと本題へ。

ここからオンラインで画像圧縮をします。

これをするだけで画像のデータサイズがものすごおおおく小さくなります。

 

私は I love IMG で圧縮しました。 

ログイン無しで一気に大量にどの拡張子でも変換できるので、便利です!

圧縮した画像はzip形式でダウンロードできます♪

 

はてなフォトの画像設定も変える

圧縮した画像を更にサイズダウンするために、はてなフォトの画像設定も変更しました。

 

先ほどと同様はてなフォトの管理画面へ飛び、右上の「設定」をクリック。

画像サイズと画質を設定し、下にある「この内容に変更する」で設定保存!

私は画像サイズを600ピクセル、画質は80%にしました。

70%にしようかと思ったのですがPNG画像に文字があると読みづらくなるという口コミを発見したので、80%と安全パイで。笑

f:id:meymei:20180919190127j:plain

 

はてなフォトへ再アップロードし、貼り直し。

さて、やっとラストスパート。

 

ここで注意しなければならないのははてなフォトからアップロードした写真のみ設定が適用されるということ。

つまり、私が今まで使っていたブログの編集ページ右側の「写真投稿」ボタンからアップロードした場合は先ほど設定したピクセルと画質が反映されないということです。

うおおお…まじか…となりながら、地道にはてなフォトへアップロード開始。

 

そしてここでまた壁が。

はてなフォトは一括アップロードする方法がないということです…。

最大で5枚までだったので、地道に5枚ずつアップロードし直しました…。

f:id:meymei:20180919190125j:plain

 

5枚画像を入れたら、下の「アップロード」ボタンでアップロードされます。

この時、新規フォルダ先に入れると圧縮前の画像と混乱しないで済みます!

 

そして、アップロードし終わったすべての画像を地道にブログ編集画面から一枚一枚貼り替えて行きます。

たかだか20記事でも、結構疲れました。爆

 

画像圧縮前と後の結果

▼圧縮前

f:id:meymei:20180919190122j:plain

▼圧縮後

f:id:meymei:20180919190159j:plain

 

1134KBもあった画像が、なんと85KBに!!

 

10分の1以下ですよ。

これは…やってよかった。

というか、記事書く前に知っておきたかった。涙(切実)

 

最後のあがきでブログ設定も変更

ここまで頑張ったんだからもう少し改善できることはないのか…と調べましたら、どうやらはてなブログに付属されてるソーシャルパーツも重くなる要因なのだとか。

あるに越したことはないだろう~!と思って全て表示していましたが、いらなそうなボタンを非公開にしました。

 

ソーシャルパーツの設定はブログ管理画面の「デザイン」>「設定」>「記事」から変更できます♪

f:id:meymei:20180919190157j:plain

 

工夫後、ページ速度はどうなったか?

ド初心者の私が今できるのはここまで…ということで!

再度、測定してみました。

 

結果…

f:id:meymei:20180919174433j:plain

f:id:meymei:20180919174431j:plain

モバイル:90 → 90

パソコン:46 → 63

 

おおおおお!ぐぐぐっと上がりました!

画像効果絶大ですね。笑

 

まだMedium評価ではありますが、私はまだ無料版なので消せない広告やいじれない部分があるせいでこれ以上の改善は難しいのかな?と思います。

きっとProにアップグレードして広告非表示にしたらもう少し上がる…はず←

 

これで少しでもページ速度が上がったので良かったです。

画像アップロードが面倒くさくはなってしまいましたが、せっかく一生懸命書いた記事が遅いってだけで読まれないほうがショックなので…!

 

私と同じような失敗をしないよう、初心者仲間の皆様!

十分にお気を付けくださいませっ!!

 

最後までお読み頂きありがとうございましたっ!