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

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

スマホ用にページ軽量化のために工夫しているところを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を含むコメントは承認待ちになります。