ブログ

スライダーが動かない、表示崩れの原因がAutoptimize?

イナゴ
イナゴ

「表示速度を速くしたい!」と入れたAutoptimize。

イナゴ
イナゴ

、、、なのに、スライダーが動かない?!

イナゴ
イナゴ

レイアウトが崩れた?!

イナゴ
イナゴ

今回は、この悩み解決します!!!

イナゴ
イナゴ

こんにちは!イナゴです。

イナゴ
イナゴ

今回は、Autoptimizeで起きがちな表示崩れについて紹介します!!

イナゴ
イナゴ

では、どうぞ!!!!

スポンサーリンク

Autoptimizeとは?!

Autoptimizeとは?!

サイトの表示速度を速くするプラグインのこと

Autoptimizeは、ブログの裏側のコード(HTML・CSS・JavaScript)を軽くしてくれるのです。

Autoptimizeについて、こちらの記事で詳しく書いています!

Autoptimizeの基本的な設定(例:JavaScript)は、以下のようにしてます。

JavaScriptコードの最適化:チェックを外すと、スライダーやメニューの動作が安定。

よくある表示崩れのパターン

よくある表示崩れのパターン

・スライダーが動かない

・メニューが開かない

・レイアウトがガタつく

Autoptimizeは、サイトを速く表示させるためにJavaScriptやCSSを自動でまとめて軽くする機能があります。

しかし、まとめて軽くする処理が上手くいかないとサイトの動きやデザインが崩れる原因となります。

原因はAutoptimizeの「最適化」設定

原因はAutoptimizeの「最適化」設定

JavaScriptの結合・遅延読み込みが原因

→JavaScriptは、スライダーやメニューの動き、アニメーションなどを制御するために使わます。

Autoptimizeが行う「結合」や「遅延読み込み」は、複数のJavaScriptを1つにまとめたりすることで表示速度を上げることができます。

これによって、スライダーが必要なタイミングで動かないなどのトラブルの原因となります。

CSSの結合でスタイルが適用されてない場合も

→CSSは、サイトの見た目を整えるためのものです。

同じように「結合」を行うと不要なコードまで1つにしてしまい、レイアウトがズレる原因となります。

要するに、、、

最適化=最善策というわけではないのです。

少しずつ試して行くのが大切なのです。

実際の体験談

実際の体験談

私は、最初画像を圧縮もせずに使用していたため、表示速度がとても遅くなりました。

下の記事でそのときの体験談を書いています!

そして、さらに表示速度を上げるためにAutoptimizeを入れました。

そこで、設定を間違えてしまい、スライダーが消える、文字がズレるという地獄を経験しました。

私の場合は、設定をひとつひとつ戻していったらなんとかなりました。

だいたい、戻してダメになったことは私のサイトでは起きていないです。

まとめ

今回は、スライダーが動かない、表示崩れの原因がAutoptimize?というテーマで書かせていただきました。サイトのためにしていた行動が実は、悪化させていることもあります。あなたが悩んでいる原因は、過去の行動ではないでしょうか?ぜひ、参考にしてみてください。

スポンサーリンク

関連コンテンツ

-ブログ
-, ,