kembrick/seo

Оптимизации для успешного прохождения сайтом теста Lighthouse

Настройка кэширования статики в конфиге nginx

location ~* ^.+\.(jpg|jpeg|gif|png|svg|js|css|mp3|ogg|mpe?g|avi|zip|gz|bz2?|rar|swf|woff2)$ {
    expires 120d;
    try_files $uri $uri/ @fallback;
}

Под голым Apache можно бы было так:

AddType image/webp .webp
AddType video/webm .webm
AddType video/mp4 .mp4
AddType image/svg+xml .svg
AddType text/woff .woff
AddType text/woff2 .woff2
<IfModule mod_expires.c>
  ExpiresActive on
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/svg+xml "access 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType video/webm "access plus 1 year"
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType text/woff "access plus 1 year"
  ExpiresByType text/woff2 "access plus 1 year"
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
</IfModule>

В CSS всем загружаемым шрифтам указать

font-display: swap;

Предотвращение CLS в адаптивном слайдере Owl carousel

В SCSS:

// CLS-fix
.owl-carousel {
  display: block;
  & > *:not(.owl-nav, .owl-dots) {
    display: none;
    &:first-child {
      display: block;
    }
  }
  @-moz-document url-prefix() {
    @media only screen and (min-width: $screen-lg-min) {
      img {
        width: auto;
      }
    }
  }
}

В HTML:

<div class="first-slider owl-carousel owl-theme">
  <div>
    <picture>
       <source class="owl-lazy" data-srcset="..." media="(min-width: 768px)" width="1125" height="553">
       <img class="owl-lazy" data-src="..." width="400" height="500">
    </picture>
  </div>
</div>

kembrick / seo

About