速度改善メモ - イラ備忘録

先行読み込み（link rel=”preload”）

ブラウザに先読みの指示を与える。レンダリングをブロックしがちな要素を指定する。

画像

ファーストビューの画像に指定する

  <head>
    <title>ページタイトル</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="preload" href="keyvusual.jpg" as="image">
  </head>

参考にしたページ

https://firstlayout.net/optimize-google-fonts-with-preload/

https://wk-partners.co.jp/homepage/blog/hpseisaku/htmlcss/preload/

ファーストビュー以外の画像をlazyはGooglsフォントはサブセットで読み込む

<img scr="画像のURL" alt="" loading="lazy">

WordPressで出力する画像には自動で不要されるので大体画像に指定しておくと良い。

Googlsフォントはサブセットで読み込む

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&display=swap&text=小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。');

bodyにtransform: translate3d(0,0,0);設定

アニメーション使用＋ safariで重い時？