Слики — најчестата причина за бавен сајт, и најлесната за поправка

Во речиси секој бавен сајт што сме го прегледале, најголемиот виновник биле сликите. Не хостингот, не плагините — сликите.

Добрата вест: тоа е и најбрзото за поправка.

Каде е проблемот

Фотографија од современ телефон е 4000 пиксели широка и тежи 4 MB. Ја качувате директно, а сајтот ја прикажува во кутија широка 800 пиксели.

Прелистувачот сепак ја симнува целата — четири мегабајти за нешто што ќе се прикаже петпати помало.

Три работи, по редослед на важност

1. Смалете ги димензиите пред качување. Ако сликата се прикажува во 800 пиксели, нема причина да е 4000. Двојно за екрани со висока резолуција — значи 1600 е доволно.

Ова само по себе руши 80% од тежината.

2. Компресирајте. JPEG со квалитет 80 изгледа исто како квалитет 100, а тежи трипати помалку. Разликата се гледа само ако ги ставите еден до друг и барате.

3. Користете WebP. Модерен формат, 25-35% помал од JPEG при ист квалитет. Сите прелистувачи го поддржуваат веќе неколку години.

Алатки

Пред качување: squoosh.app — бесплатна, во прелистувач, ништо не се качува на туѓ сервер. Влечете слика, гледате разлика во живо, симнувате.

Во WordPress: плагин како ShortPixel или Imagify ги обработува автоматски, вклучувајќи ги веќе качените.

Одложено вчитување

Слика на дното на страницата не мора да се симне пред посетителот да стигне до неа. Тоа се вика lazy loading, и WordPress го прави автоматски од верзија 5.5.

Со еден исклучок: првата голема слика на почетокот не смее да биде одложена. Таа е тоа што Google го мери како „најголем елемент“ — одложувањето ја влошува оценката.

Ситницата што ја заборават сите

Наведете ширина и висина на секоја слика во кодот. Без нив страницата „скока“ додека се вчитува — текстот се помрднува кога сликата ќе се појави.

Google го мери тоа скокање како посебна оценка, а посетителите го мразат — особено кога кликнат на погрешно копче.

Проверка

Отворете pagespeed.web.dev и внесете ја адресата. Ако во препораките пишува „Properly size images“ или „Serve images in next-gen formats“ — знаете од каде да почнете.