あべろぐぷらす

元SEが半農半Xな暮らしを目指して頑張る様子を福島から発信するブログ

表示速度対策でJQueryの読み込みを改善したら、ブログのデザイン崩れが直った話

f:id:abeshi01:20180418211227j:plain

こんにちは、あべし(@honjituno)です。今日はブログのお話です!

 

先日話した『ブログの表示速度が遅い!!』問題に取り組んでいたところ、なんとデザイン崩れ問題を解決することが出来てしまいました!!

 

こんなことってあるんですね!あきらめなくて良かった。

 

ということで、今日はデザイン崩れ問題解決までの経緯についてお話したいと思います!

 

▼デザイン崩れ問題についてはこちら!

www.abelog-plus.com

表示速度対策でJQueryの読み込みを改善したら、ブログのデザイン崩れが直った話 

ブログの表示速度が遅いと気が付いてから数日。

 

ブログのカスタマイズでなくてもいいものは思い切って外したり、サイズの大きな画像を圧縮して貼りなおすという作業を続けていました。

www.abelog-plus.com

作業をしつつも、ブログの表示速度改善についての情報収集も続けていたら、とても参考になりそうなブログを発見しました!!

JQueryの読み込み改善してみたら!

問題解決のきっかけになったブログはこちらです!!

www.kailua020.com

このブログの中で『JQueryの読み込み改善』という方法が紹介されています。何も分からないままに、そりあえず自分のブログのコードを確認していったら、何か所か該当箇所を発見!!

 

この時はデザインのことなんてこれっぽっちも考えていませんでした。ただ『少しでも表示速度が早くなれば!!』という思いだけ。

怪しい文字列『min』

でも新しいコードの文字列の中に、少し気になる箇所もありました。それは『min』という箇所。以前ブログに書いた『mui.min.css』にもminが入っています。

www.abelog-plus.com

まだこの時点では無意識レベルで気になったぐらいです。

 

該当箇所に新しいコードを適用させていくうちに、余分なコードと思われるものがあることに気がつきました。

 

全く同じJQueryのコードが、複数個所に書かれていました。なくてもいいコードが書かれているから読み込み速度が遅くなっているんだと思い、デザイン崩れを起こしていないか確認しながら作業を進めていきました。

 

結局、作業完了して表示速度が改善されているか確認するまで、デザインが元に戻っていたことに気が付きませんでした笑。

 

ブログ記事のタイトルがやけに大きく表示されていることに気が付いたんです。『あれ、h1ってこんなに大きかったっけ??』と思い、あれこれ確認しているうちにデザイン崩れが改善していることが判明したのでした!!

原因はカスタマイズ

原因はおそらくカスタマイズです。しかも、カスタマイズしてみたけど、しばらく経ってから気に入らなくなり、JQueryのコードを撤去し忘れてしまったというパターン

 

デザインが崩れが発生していた時は、何かのファイルを読み込んだ後(一瞬だけ大きく表示される)、また何かのファイルを読み直している(文字がぎゅっと縮んでいく)ような挙動をしていました。

 

推測ですが、今回消去してからデザインが改善したので、その置き忘れたJQueryのコードが悪さをしていたのかなと思いました!

 

あれだけ調査して見つけられなかった犯人がこんなところにいたなんて…。

まとめ

ブログの表示速度が遅い問題に取り組んでいたところ、デザイン崩れ問題を解決することができました!ご心配おかけしました!!

 

HtmlとCSSですらぼんやりというレベルなのに、犯人のJQueryを見つけ出せるはずはなかったんです笑。Webデザインとかやっている人は一瞬で分かるレベルだったのかな…。

 

ただ、原因を取り除けたというだけで、デザインがおかしい場所はまだあります!

 

それは、デザインが変な状態で、CSSをあれこれいじってしまったため。元に戻ったので、いじった部分が変な感じになってます。

 

カスタマイズ画面の『デザインCSS』が大変なことになっているので、また元通りにしていこうかな。今度はデザイン崩れが起きないように慎重に作業していきたいです!それではー!