いつもお世話になります。
Y!ショッピングのスマホ向けページにて、トリプルを使って「お買い物ガイド」のインフォメーションページを設置しようと思っているのですが、設置方法に関して疑問に思いましたのでご質問させていただきます。

「お買い物ガイド」は、注文時の注意点、配送や支払い等、全部で8項目の構成になっており、ページのトップにナビゲーションメニューのボタンをタテに並べて、ページ内の各セクションにリンクさせる構造にしようと思っています。

ページを作成してみたところ、ページのトップから8項目目の最後までとても長くなってしまい、とてもスマホページではそのままの状態で設置できそうにありません。

そこで、JQueryのアコーディオン機能を使って、目的の項目のみ表示させ他の項目を隠す、ということを思いつきました。
そして、いざ設置の段階になって、「ページ全体はかなりのボリュームがあるので、読み込むのに時間がかかったり、離脱したりするのでは？」と疑問に思いはじめました。

各項目にはそれぞれ、テキストの他、2枚〜6枚程度のキャプション画像(1枚50KB~100KB程度)も使ってあり、ページ全体にしますと30枚以上の画像があります。

それとも、今のスマートフォンは、そのような事はあまり気にぜずにPCサイトを同じように作っても良いものなのでしょうか。

もし、上記のやり方で問題があるようでしたら、素直に項目ごとに別ページにしてしまおうか、とも思っています。

アドバイスをよろしくお願いいたします。