中田のタスク管理

タスクの詳細

完了
stayhometrainer.comの画像遅延読み込み
依頼者 Eijiさん
進捗率
100%  作業状況
現在の作業 ご確認いただく
作業完了日 2021-07-15 09:41:33
タスクタイプ 通常
タグ EC,速度改善
現状サマリー

現在「完了」、進捗 0%。工程は全6件中 6件完了。

最新報告「06/24 作業」(2021-06-24 17:31:34)

タスクの詳細情報・説明 別ウィンドウで表示

依頼の詳細

・画像の遅延読み込み設定
Javascriptのlazyloadを使用する。

対応者メモ・コメント 別ウィンドウで表示


作業工程・チェックリスト

現在の進捗:6/6 100%
JSのコードの設置場所移動
lazyload.jsの読み込み
imgタグのソースをlazy仕様に変更
テスト
計測
ご確認いただく

コメント コメントフォーム

中田
06/24 作業

・画像の遅延読み込み
・ヘッダー付近に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

→リクエスト数とページのサイズが改善されました。

コメントのURLコピー 2021-06-24 17:31:34

コメントフォーム

名前
タイトル
コメント
    ファイルのアップロード
    (このエリアにドロップしてください)
    ※ ファイルのURLはコメント内に含めてください。
    Markdown記法が使用可能
    # 見出し h1
    ## 見出し h2
    ### 見出し h3
    #### 見出し h4
    ##### 見出し h5
    
    **太字**
    
    水平線
    ---
    
    > 引用テキスト
    > 引用テキスト 
    
    ```
    コードの表示(ブロック)
    コードの表示(ブロック)
    コードの表示(ブロック)
    ```
    
    * リスト
    * リスト
    * リスト
    
    0. 番号リスト
    0. 番号リスト