TATSU&YUKIの二人旅.COM

二人で英語の語学留学、ワーキングホリデー(ワーホリ)、世界一周旅行をした元バックパッカーカップル旅行記ブログ

はてなブログ読込遅すぎワロタ→「テーマのデザインをシンプルに変更」

こんにちは!喉風邪をひいてしまったYukiです。体はいたって元気ですが、喉だけが魔女のような声になってしまいました(笑)みなさんも乾燥する季節なので、ご注意下さい(^^;)/

さて、本日はブログのデザインを一部変えたので、その理由と内容について書きました☆

はてなブログの読み込みが遅い(重い)のが気になり、テーマを変えてみたり(変えなかったり、、)色々試してみた話です。

はてなブログの読み込み速度が遅いので改善の為にやったこと

PageSpeed Insightsで読込時間を確認

かなり前に、ブログの読込が遅いことが気になって、Google先生の「PageSpeed Insights」を使って確認してみたところ、ありえないくらい遅い事が判明。

スクリーンショットを撮っておかなかったので、点数は忘れてしまいましたが、壊滅的な感じでした(泣)

なくても大丈夫そうな装飾を削除

記事下の"Milliardの関連記事"を削除したり、サイドバーの"ツイッター読み込み"を消したり、多少の努力はしたものの、大きな改善は見られず、旅行記に掲載している写真枚数が多いから全体的に重いのかな〜と思いました。

53点!パソコンでこの遅さ。Poorとか言われてるし。

はてなブログ読み込み時間

スマホは45点、、、ヤバいね。私は個人的にスマホよりもパソコンを利用する機会が多いのですが、このブログを見てくださる方の多くがスマホで訪れてくれているので、この遅さは残念すぎます。というか、本当申し訳ないです。

はてなブログ読み込み速度遅い

はてなブログのテーマを変更?

もしかしたら、はてなブログのテーマをシンプルなものに変えたらもう少しは改善できるのではないかと、自分のブログで色々なテーマのプレビューを見てみるも、"ちょっとここが好みじゃないな〜"とか何様的なことを思ってしまったり、今の私のブログの仕様に合わせる為には、新たにカスタマイズしなければならない点がいくつかあり、それをやるのが面倒くさくてずっと何ヶ月も放置していました、、、、。

スマホ読者の方、申し訳ありません!!

テーマによって読み込み速度が変わる

しかし数日前に、そもそもテーマを変更したらどのくらい読み込み速度に変化があるのか気になりだして、「はてなブログ 読み込み テーマ」でググったところ、ふーログさんの記事にたどり着きました。

なるほど、、、なんと私の利用しているはてなブログテーマ「DUDE」の読み込み速度は、、、遅いと。かなり遅めであると。

ガーン。

面倒臭くて渋っていたブログテーマの変更でしたが、ふーログさんの記事を読んで、昨夜変更することを決意致しました。

テーマ「DUDE」から変更する準備

ブログテーマ「DUDE」のオシャレなところは、何と言ってもこのヘッダーの画像やデザイン性の高さでしょう。

はてなブログテーマDUDE

この部分にリンクを3つ貼れるので、私はスッキリさせる為にグローバルナビゲーションは使っていませんでした。ここの英語の字体を変更したり、なんだか思い入れがあります(T_T:)

しかし、他のテーマを使うには、この画像、3つのリンクや英語の文章らへんが全部不要になるので、泣く泣く削除!!

そして、別のテーマではサイドバーの横幅が変わるので、サイズの合わない画像を修正。テーマ「DUDE」のデザインで使えていた、ツイッターのリンクロゴなども別のものに変更。

テーマ「Spirea」をインストール

読み込みが早いと紹介されている全てのテーマのデザインを、自分のブログのプレビューで確認して、使ってみようと決めたのが「Spirea」という素敵なテーマ!シンプルで色々とカスタマイズがしやすそうだし、ドキドキしながらインストール!!

まだ何もカスタマイズしていないからってのもあるけど、かなりシンプルな見た目。

パソコンでの読み込みは65点!当初の53点からかなり上がりました。

はてなブログ読み込み時間

スマホでは55点。こちらも以前の45点から大幅アップ!

ただ、この時点ではまだカスタマイズもしていないし。色々修正していくと、もう少し読み込みは遅くなるはず。

はてなブログ読込速度

見え方をチェック→問題発生!

パソコンからの見え方はとりあえず問題はなし。

スマホからチェックしてみると、、、ホーム画面は問題なし!

↓スマホの記事ページをチェックすると、、、

ありゃりゃ。画像が上下に伸びちゃってる〜。

レスポンシブで伸びた画像

といっても全部の画像が伸びてしまってるんではないんです。どうやら、横幅と縦幅を設定している画像だけが伸びてしまっているみたい。

↓本来はこんな感じに見える画像。

アンコールワット

試しに、人気のテーマ「Brooklyn」もインストールしてみたけど、それでも同じ現象がおきます。

(ちなみにテーマ「Brooklyn」はさらに読み込みが早くて、パソコンで68点、スマホで57点と優秀!!)

おそらくレスポンシブデザインなのに、画像にサイズの設定をしてしまってあるので、伸びちゃうんじゃないかな?つまりテーマは何も悪くないってこと!

 

なんで、テーマ「DUDE」だと画像が潰れないんだろう?と思っていたのですが、今このブログを書きながら思い出しました!

すっかり忘れてたけど、テーマ「DUDE」はもともと非レスポンシブなんですよね。それを自分でカスタマイズして、レスポンシブにしても使えるようにしてたみたい、、(全然覚えていなかったよ。)

困ったな。。ワードプレスから引っ越す前に使ったほとんどの画像にサイズ指定しているので、全てを修正するのはかなり時間がかかりそう

テーマ「DUDE」のヘッダーをシンプルにした状態で読込時間チェック

そこで試しに、テーマ「DUDE」を再インストールして、ヘッダー部分の画像などがない状態で、改めて読み込み速度を確認してみました。

↓結果、当初の53点よりも全然早いことが判明!パソコンで65点!!

はてなブログの読み込み時間

↓スマホも45点よりもかなり改善されて53点!!全然前ほど悪くないじゃん!

はてなブログの読み込み速度

テーマ「DUDE」をシンプルなデザインにして使うことにした

はい。それならテーマ「DUDE」で継続決定!!

テーマをインストールするとCSSが真っさらな状態に戻ってしまうので、カスタマイズしたCSSの内容をコピペ保存しておいて良かった〜☆

これまたすっかり忘れてたけど、もとのテーマ「DUDE」のデザインから自分好みに修正している部分が結構ありました。当時カスタマイズするのにそこそこ苦労したから、無理にテーマを変えなくて良かったかも。

↓でも、このテーマでの一番のポイントであるヘッダー画像などは残念だけど撤去です。

はてなブログのデザイン変更

なんだか、さっぱりしちゃって寂しい。。

でも今の時代はスマホから見る人が多いから、結果シンプルなのが一番良いでしょう。

"問い合わせ"と"自己紹介"のリンクロゴを設置

今まであった3つのリンクボタンが無くなってしまったので、グローバルナビゲーションを設置しようかと思ったのですが、カテゴリーが猛烈に多いし、その設置によってさらに読込が遅くなったら悲しいので、ロゴで作った「ABOUT US」と「CONTACT US」のリンクだけ、サイドバーの一番上に新たに設置しました☆

↓こんな感じ。

atsu&Yukiの二人旅.comについてatsu&Yukiの二人旅.comに連絡

読み込み速度には関係ないが、変更した部分

今までトップのh2を見えない状態にしていましたが、何のブログかわかりやすいように表示しました。

それから、サイドバーに貼ってあるインスタグラムの画像を変更しました。写真をクリックすると「Tatsu&Yukiの二人旅.com」のインスタグラムのページに飛びます☆

マチュピチュペルーのレインボーマウンテンチリのサンペドロでアタカマの月の谷ガラパゴスのアオアシカツオドリクックアイランドのアイツタキニューヨークの自由の女神

 

まとめ

こんな感じに修正して、最終的にはトップページならパソコンで63点、スマホで51点と、優秀ではないものの、以前よりはかなり読み込みが早くなったと思います☆

色々カスタマイズした後に、テーマ変更するとCSSの修正とか面倒なので、今から はてなブログを始める方は、読み込み速度の早いテーマを選んだほうが良いかもしれませんね!

ちなみに、今回読み込み速度をチェックしたのは「トップページ」で、記事ページはさらに読み込みが遅いので、掲載している写真や画像の問題が大きそうです。。

今度は写真や画像の圧縮をして、コツコツと修正していきたいと思います。トホホ

 

→追記:サイドバーに使っている画像や写真を圧縮したら、トップページの読み込みはパソコンで71点、 モバイルで55点にまで改善しました!! 

↓ 試しに一つの重いブログ記事ページの全ての写真を圧縮し、アップロードしなおしたら大幅に読み込みが早くなったので、その方法と結果を書きました!

写真を多く使っているこのブログの場合は、テーマの変更以上に、"画像の圧縮"で大幅に読み込み速度が早くなりました☆

 

最後までお読みいただきありがとうございました(^▽^)/