ページの軽量化について

Question

Yahoo!ショッピングのトップページをトリプルのページに変更しました。

スマホもPCも対応できるようにレスポンシブデザインになっていますが、スマホで通信環境によっては表示が遅いとの指摘があり改善した方がいいのではと思うようになりました。

私の環境（iphone8、ドコモ回線）では遅いと感じたことはありませんが、確かにページの内容が多く、いろいろな外部ファイルを読み込んでいるので昔からのインターネットユーザーの私からするとよく実用的な速度で表示されているなぁと関心させられます。（考え方が古いですが）

とは言え少しでも軽くて早く表示される方がお客さんにとってはメリットだと思いますし、もしかして実際に表示速度が遅く機会損失が生じているのかも知れません。

当店のサイトの場合は単純にコンテンツを減らせば改善されると思いますが、その他の部分で気になる点について質問です。

その1．jQueryの読み込みや実行は表示速度にどの程度影響があるものなのか？

jQueryのファイルを1つや2つ外したところで大して変化がなければ時間を使って作業する必要はありませんがどうでしょうか？

その2．スライドバナーについて

スライドバナーはスマートフォンでは表示が小さくあまり必要性を感じていません。
バナー画像もたくさん読み込むので外してしまいたいところですがPCでは必要です。
また、スマートフォンの表示ではよくレイアウト崩れが発生します。

レスポンシブデザインでは表示非表示に関わらずどうしても全てのパーツが読み込まれてしまうものでしょうか？条件によって読み込みを止めることはできませんか？

また、このスライドバナーはjQueryを使ってできているみたいですが、ECステーションのスライドバナーを使ってとして埋め込んでしまうのではどちらが早くなるでしょうか？

細かい質問となりましたがよろしくお願いします。

Accepted Answer

ECマスターズの田中です。

> 1．jQueryのスライダーとでスライドバナーを埋め込むのでは表示上どちらが早いとかあるのか？ 

全く同じファイルへの処理を行いますので、
HTML全体の読み込みが別途必要となる分、
を埋め込む方が遅くなる可能性がございます。

> 2．現状のjQueryを使ったスライダーは高さがおかしくなることが多く（特に初回表示）読み込みが多いのが原因かもしれません、の場合だと高さが確定しやすく改善するでしょうか？ 

の場合でも、スライダーの仕組みの中で、
高さが確定しやすくなることはございませんが、
表示上は設定した高さのみになりますので、
下の要素の位置がズレたりなどの表示乱れを抑える効果は多少期待できます。
ただし、iOS上のブラウザでは、
の高さ設定は考慮されないため、改善の効果はございません。

> 3．このスライダーは画面のサイズによって読み込みさせない設定は可能でしょうか？ 
> スマホサイズでは読み込まずにそれ以上で読み込むなど 

可能ではございますが、
スライダーの標準機能としては備えていないため、
その目的専用で、JavaScriptソースを書いていただく必要がございます。

============

なお、私にてせんとさんのページを拝見したところ、
スライダーの部分含め、
極端に表示が遅い原因は見つかりませんでしたので、
私としては現状で特に問題はないかと思うのですが、

もし、さらなる軽量化をご希望される場合は、
LazyLoadの導入をご検討ください。
https://syncer.jp/how-to-setting-lazy-load-images
画面外の画像の読み込みを遅らせることで、
ページにアクセスした直後の表示速度を向上させることができます。

Answer

ECマスターズの清水です。

こちらでも確認しましたが、遅いというほどのページでもありませんので、
閲覧された方の通信環境が宜しくなかった可能性もございますね。

> その1．jQueryの読み込みや実行は表示速度にどの程度影響があるものなのか？
> jQueryのファイルを1つや2つ外したところで大して変化がなければ時間を使って作業する必要はありませんがどうでしょうか？

jQueryなどJavascriptのファイルの見直しも表示速度には影響しますが、

https://testmysite.withgoogle.com/intl/ja-jp

こちらで診断していただくと無料レポートを入手していただけますので、
対応箇所と優先順位をご確認ください。

おそらくJavascriptの見直しよりは、画像の方が
重要という結果が表示されるかと思います。

> その2．スライドバナーについて
> レスポンシブデザインでは表示非表示に関わらずどうしても全てのパーツが読み込まれてしまうものでしょうか？
> 条件によって読み込みを止めることはできませんか？
> 
> また、このスライドバナーはjQueryを使ってできているみたいですが、ECステーションのスライドバナーを使ってとして埋め込んでしま> うのではどちらが早くなるでしょうか？

こちらはレスポンシブデザインというよりは、
記述方法によっては、実現可能かと思います。

また、バナーの表示につきましてもiframeタグで直接読み込ませるか
jQueryなどJavascriptを利用するかは、記述方法によっては、
Javascriptの方が実際にページを表示させないと読み込ませないなどの
対応が可能ですので、ページ全体の読み込み時のスピードという面では、
Javascriptの方がいろいろと応用が可能ですね。

詳しくは、お調べしまして明日以降に回答させていただきます。

Answer

ご回答ありがとうございます。

教えて頂いたGoogleの診断でチェックしたところ表示までに7秒という判定で、実際にはそんなにかかりませんがこれを判断材料に試してみたいと思います。

もう一つ似たデザインのReportページを作成していまして、こちらは可能な限り私がjQueryやメニューなどを外したページになります。

https://shopping.geocities.jp/アカウント/report/

こちらのページだと表示まで3秒と比較的良好な結果となりました。
引き続きGoogleの診断を活用しながら、まずは画像を軽量化するところからページの最適化を進めようと思います。画像の入れ替えだけで済めば手間も少ないですし。

調査いただけるとのことでポイントを絞りますと

1．jQueryのスライダーとでスライドバナーを埋め込むのでは表示上どちらが早いとかあるのか？

2．現状のjQueryを使ったスライダーは高さがおかしくなることが多く（特に初回表示）読み込みが多いのが原因かもしれません、の場合だと高さが確定しやすく改善するでしょうか？

3．このスライダーは画面のサイズによって読み込みさせない設定は可能でしょうか？
スマホサイズでは読み込まずにそれ以上で読み込むなど

よろしくお願いします。

Answer

サイトを見て頂きありがとうございました。

表示速度については問題無さそうということで、画像を軽量化する程度にしておこうと思います。

ただしスライダーの表示崩れだけは気になりまして、改善方法がないかもう少し調べてみようと思います。

Answer

少し試した結果をシェアします。

スライドバナーに登録する画像に無駄に高画質のものがありましたので画質を下げ、サイズも統一するなどの最適化を図ってみましたがあまり変化は見られませんでした。

ページの読み込み時にスライドバナーの下に余白ができてしまい、読み込みが完了すると余白がなくなるという挙動なので、ページ全体の読み込みを軽くすることで解消できるのかなと思います。

仮でもいいのでこのバナーの高さが確定できるとよかったのですが、あまり時間をかけても仕方がないのでこのくらいにしておこうと思います。

Answer

ECマスターズの田中です。

> ページの読み込み時にスライドバナーの下に余白ができてしまい、読み込みが完了すると余白がなくなるという挙動

この余白がタグの影響によるものであれば、
width属性・height属性を予め設定しておくことで
無駄な広がりを避けることができるかと思います。
例：

ですが、スライドバナーの動作開始後の見た目に
影響がある可能性がございますので、
まずは一度、ご設定の上、表示をご確認いただければと思います。