🔽Twitter: @daisu_yamazaki
「毎日、プログラミング系の情報を投稿中」フォローお願いします✅
🌟 Youtube良かったです！ってフォローしてくださいね(#^^#)
【プログラミング入門者、Webデザイナー初学者】どちらにも必要な知識です！
完璧に使いこなす必要は無く、知っていて必要な時に調べながら使えればOKですよ！！
▼ 動画時間の詳細
00:00:00 Lighthouse / PageSpeed Insights
00:01:18 前回までの内容
00:02:33 Lighthouse（パフォーマンスの測定）
00:03:02 GoogleWebマスター向け公式ブログ
00:08:12 ６つの測定基準
00:09:10 1.First Contentful Paint(FCP)
00:14:27 2.Largest Contentful Paint (LCP)
00:19:34 3.Speed Index
00:20:46 4.Time to Interactive
00:22:32 5.Total Blocking Time (TBT)
00:25:19 6.Cumulative Layout Shift (CLS)
00:27:06 パフォーマンスの重みづけ
00:28:05 実際の対策をライブDEMO
00:34:12 今日のまとめと、次回告知
▼続きの動画リンク▼
1回目 「Chrome デベロッパーツール / Elements/Console」 https://youtu.be/PjZyPfXdJFA
2回目 「Chrome デベロッパーツール / デバッガ―」 https://youtu.be/TXi5g4J17ds
3回目 「Chrome Web制作者 必須のブラウザ機能」https://youtu.be/DsHhKs9V03o
4回目 「Chrome Webサイトを採点！ Lighthouse 機能 」 https://youtu.be/srayKfhg5Ho
5回目 「Chrome セキュリティ＆ネットワーク機能」https://youtu.be/Sn1oaEJwt0k
6回目 「Chrome CSSアニメーションの検証機能」https://youtu.be/zICHhUf6-Nw
7回目 「ChromeとEdge デベロッパーツールは同じ」https://youtu.be/AJFegQvExXw
8回目 「ブラウザのテストに最適『Recorder』」https://youtu.be/4iH16Qj0j80
9回目 「Chrome 最強！この使い方覚えて」 https://youtu.be/-bFnYXquDjU
===================================
▼ Chromeダウンロードサイト
https://www.google.com/intl/ja_jp/chrome/
▼Google ウエブマスター向け 公式ブログ
https://webmaster-ja.googleblog.com/2020/06/evaluating-page-experience.html
▼ PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=ja-JP
▼Largest Contentful Paint (LCP)
https://web.dev/lcp/
▼Largest Contentful Paint (LCP)
https://web.dev/lc
▼おススメ画像圧縮１
https://tinypng.com/
▼おススメ画像圧縮２
https://compressjpeg.com/ja/
▼不使用のCSSを削除
https://purgecss.com/
===================================
◆プロフィール
Microsoft MVP [ 2013 – 2020 ]
ジーズアカデミー学校長
デジタルハリウッド大学院教授
◆Webでは
「 遅咲きエンジニア 山崎 」で検索！！
#webデザイン #デベロッパーツール #seo
Comments