Три евтини поправки за бавна начална страница

Одит преди страницата да бъде видяна от някой друг

В Arc AI правим одит на собствената си начална страница така, както бихме направили на тази на някой друг. Преди релийз, този одит откри почти 5 MB с декоративни изображения, показани в размер на пощенска марка, 17 файла с шрифтове, заредени преди изобразяването на дори една дума, и скрипт на Google, стартиращ преди собствения таг за заглавие на страницата. Никой посетител не е виждал бавната версия. Ето какво откри одитът и как да проверите собствения си сайт за около десет минути.

Десет минути с панела Network в браузъра

Отворете която и да е страница в Chrome или Edge, щракнете с десния бутон, изберете Inspect (на български: Инспектиране), отворете раздела Network (Мрежа) и презаредете. Не са нужни разширение или вход в профил.

Подредете списъка по размер, започвайки от най-големите файлове. Никой от тях не бива да е много над 200 KB без основателна причина, а фонова снимка от 1,4 MB, показана в размер на пощенска марка, не трябва да бъде толкова голяма. Щракнете върху заявката на някое изображение, за да видите реалната ширина на файла, после инспектирайте самото изображение на страницата, за да видите ширината му на екрана. Файл, шест пъти по-широк от показания размер, означава, че браузърът е изтеглил шест пъти по-голяма картина, отколкото някой може да види; обикновено ширина два пъти повече от показаната стига напълно. Lighthouse, в същия панел с инструменти за разработчици, може да даде второ мнение с едно кликване.

Изображения, направени за плакат, показани като пощенска марка

Осем изображения с илюстрации вършеха цялата тежка работа тук, всяко използвано два пъти: веднъж в малък кръг и още веднъж в по-широка карусел лента. Всеки файл беше PNG с ширина между 1000 и 1100 пиксела, някои дори 1,4 MB, а реално бяха показани на 184 пиксела в кръга и около 480 в карусела. Заедно, около 5 MB PNG файла вършеха работата на изображения в пъти по-малки.

Тъй като бяха зададени като CSS фонове, браузърът не можеше да покаже по-малък файл на по-малък екран. Решението: нови WebP версии с приблизително двойна ширина спрямо показания размер, общо 368 KB, а оригиналните PNG файлове бяха свалени от активния сайт. Почти 5 MB станаха под половин мегабайт, над 90% по-малко, за изображения, изглеждащи идентично.

За снимки, качвани от посетители, компилацията вече генерира автоматично WebP копия с ширина 480, 960, 1440 и 1920 пиксела и сервира тази, която пасва на екрана. Оригиналният файл също се пази, защото визитките за споделяне в социалните мрежи все още очакват JPEG или PNG.

Предварителното зареждане на всичко не ускорява нищо

Предварителното зареждане казва на браузъра да изтегли нещо веднага - това е полезно само когато наистина е необходимо. Тук 17 файла с шрифтове, около 370 KB, се бореха за интернет връзка с главното изображение, преди страницата да зареди и дума, повечето от тях за текст по-надолу или изобщо извън видимата зона.

Намаляването на списъка от 17 файла на 7 не премахна нито един шрифт от сайта. Просто позволи на браузъра да изтегли останалите, когато наистина потрябват.

Скриптове от трети страни изчакват реда си

В одитираната версия скриптът на reCAPTCHA на Google се зареждаше при всяко посещение, преди собствените таг за заглавие и мета описание на страницата, независимо дали посетителят изобщо ще стигне до формата за контакт, която скриптът защитава. Решението не премахна скрипта, а го премести: SEO таговете вече се зареждат първи, а проверката против спам стартира едва когато формата стане видима на екрана.

Списък за проверка на вашия сайт

• Подредете списъка с файлове в панела Network по размер. Всичко над 200 KB в началото изисква основателна причина.
• Сравнете реалната ширина на всяко изображение с показаната. Можете да доставите приблизително двойна ширина, а не шест пъти по-голяма.
• Пребройте предварителните зареждания. Погрижете са да се показват първо шрифтовете.
• Проверете дали скриптовете от трети страни се зареждат само там и тогава, когато са нужни.
• Уверете се, че таговете за заглавие (<title>) и мета описание се зареждат преди скриптовете.

Три малки решения, не редизайн

Пет мегабайта от PNG файлове, десет ненужни предварителни зареждания и един зле нареден скрипт: нищо от това не изискваше редизайн или нов фреймуърк. Имаше нужда единствено някой да отвори панела Network в браузъра си и да вземе три малки решения за размера на файловете, реда на зареждане и приоритета. Бавната скорост е симптом, не диагноза.