総合 ゲーム 画像動画

youtube動画を隠してスマホ用に重いページを軽量化 読み込み速度アップ

2018.1.9

スマホ用にページ軽量化のために工夫しているところを1つ紹介します。

youtubeなどの動画はサーバーのレスポンスに関係なく描写に負荷がかかります。
PCではサクサク見れるページでもスマホでは少し重たかったりしますよね?

このブログではyoutubeの動画は一旦HTMLコードから取り除いて、ユーザーが見たいものを選択したときにコードを挿入するようにしています。

JavaScriptで操作しているので過去記事にも対応できると思います。
こんな感じでユーザーに開閉してらうようにしています。私は動画3つ目以降を閉じた状態で描写するようにしています。

 

コードの構成は

  1. youtubeの要素を取得
  2. insertAdjacentHTML(beforebegin)で要素の前に展開用トリガーを追加(展開用トリガーにdata-classでインデックスを設定しておく)
  3. youtube要素のinnerHTMLを値渡しでオブジェクトまたは配列に保存
  4. youtube要素のinnerHTMLを削除
  5. イベントリスナでトリガーに開閉処理を追加

という感じです。具体的なコードは環境によって変わるので載せませんが、このページjsファイルを見てもらえれば分かると思います。mobile-size.js

DOM操作は一度に行った方が良いですが他のコードと要相談。

コメントを残す。

メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。URLを含むコメントは承認待ちになります。