現在「完了」、進捗 0%。工程は全6件中 6件完了。
最新報告「06/24 作業」(2021-06-24 17:31:34)
・画像の遅延読み込み設定 Javascriptのlazyloadを使用する。
・画像の遅延読み込み ・ヘッダー付近にJSのコードをフッター(フッターのJS)に移動
▼確認ページ https://stayhometrainer.com/lp?u=index
▼編集したJS(ヘッダーのJSの移動先、遅延読み込みのコード) https://stayhometrainer.com/templates/4/javascript.js https://stayhometrainer.com/templates/5/javascript.js
◎ 遅延読み込みの設定
1)遅延読み込みのソースを以下に追記しました。 https://stayhometrainer.com/templates/4/javascript.js https://stayhometrainer.com/templates/5/javascript.js
2)遅延読み込みで使用する画像をアップしました。 https://ec-force.s3.amazonaws.com/stayhometrainerc/uploads/stayhometrainer/img/loading.jpg (この画像を変更したい場合、上書きで変更いただければと思います)
3)imgソースを変更しました。
▼ソースの変更例
↓
このソースで画像が遅延読み込みになります。 遅延読み込みさせないほうが良いものは、設定していないです。 (ページアクセス時表示させる画像や追尾固定画像)
◎ 遅延読み込みの結果の計測
修正前: https://gyazo.com/0e7f175053d22d3877fc76deaeab6690 requests:164 19.2MB
修正後: https://gyazo.com/e9a3863331fc8692ba1475e28fec02ed requests:121 8.5MB
→リクエスト数とページのサイズが改善されました。
# 見出し h1 ## 見出し h2 ### 見出し h3 #### 見出し h4 ##### 見出し h5 **太字** 水平線 --- > 引用テキスト > 引用テキスト ``` コードの表示(ブロック) コードの表示(ブロック) コードの表示(ブロック) ``` * リスト * リスト * リスト 0. 番号リスト 0. 番号リスト
・画像の遅延読み込み
・ヘッダー付近にJSのコードをフッター(フッターのJS)に移動
▼確認ページ
https://stayhometrainer.com/lp?u=index
▼編集したJS(ヘッダーのJSの移動先、遅延読み込みのコード)
https://stayhometrainer.com/templates/4/javascript.js
https://stayhometrainer.com/templates/5/javascript.js
◎ 遅延読み込みの設定
1)遅延読み込みのソースを以下に追記しました。
https://stayhometrainer.com/templates/4/javascript.js
https://stayhometrainer.com/templates/5/javascript.js
2)遅延読み込みで使用する画像をアップしました。
https://ec-force.s3.amazonaws.com/stayhometrainerc/uploads/stayhometrainer/img/loading.jpg
(この画像を変更したい場合、上書きで変更いただければと思います)
3)imgソースを変更しました。
▼ソースの変更例
↓
このソースで画像が遅延読み込みになります。
遅延読み込みさせないほうが良いものは、設定していないです。
(ページアクセス時表示させる画像や追尾固定画像)
◎ 遅延読み込みの結果の計測
修正前:
https://gyazo.com/0e7f175053d22d3877fc76deaeab6690
requests:164
19.2MB
修正後:
https://gyazo.com/e9a3863331fc8692ba1475e28fec02ed
requests:121
8.5MB
→リクエスト数とページのサイズが改善されました。