スマホ用にページ軽量化のために工夫しているところを1つ紹介します。
youtubeなどの動画はサーバーのレスポンスに関係なく描写に負荷がかかります。
PCではサクサク見れるページでもスマホでは少し重たかったりしますよね?
このブログではyoutubeの動画は一旦HTMLコードから取り除いて、ユーザーが見たいものを選択したときにコードを挿入するようにしています。
JavaScriptで操作しているので過去記事にも対応できると思います。
こんな感じでユーザーに開閉してらうようにしています。私は動画3つ目以降を閉じた状態で描写するようにしています。
コードの構成は
- youtubeの要素を取得
- insertAdjacentHTML(beforebegin)で要素の前に展開用トリガーを追加(展開用トリガーにdata-classでインデックスを設定しておく)
- youtube要素のinnerHTMLを値渡しでオブジェクトまたは配列に保存
- youtube要素のinnerHTMLを削除
- イベントリスナでトリガーに開閉処理を追加
という感じです。具体的なコードは環境によって変わるので載せませんが、このページjsファイルを見てもらえれば分かると思います。mobile-size.js
DOM操作は一度に行った方が良いですが他のコードと要相談。
∩∩
(´・ω・)
_| ⊃/(___
/ └-(____/
 ̄ ̄ ̄ ̄ ̄ ̄ ̄
来たら起こして。
⊂⌒/ヽ-、__
/⊂_/____ /
 ̄ ̄ ̄ ̄ ̄ ̄ ̄