Скорост на слаби устройства: защо сайтът ви е бърз само при вас

Най-често срещаното изречение при разговор за скорост: „при мен се отваря мигновено“. Обикновено е вярно и обикновено не значи нищо, защото е казано от човек с нов компютър, кабелна връзка и сайт, който вече е в кеша на браузъра.

Реалните посетители са в други условия и точно там се губят парите.

Защо разработчикът не вижда проблема

Всеки ред се умножава по останалите. Общо взето онова, което се отваря за секунда при разработчика, при посетителя отнема пет до осем.

Какво точно забавя при слаб хардуер

Важно е да се разделят две различни ограничения: мрежата и процесорът. Първото се лекува с намаляване на теглото, второто с намаляване на работата.

• JavaScript. Главната причина. Файл от 300 килобайта се сваля за секунда, но се разчита и изпълнява на слаб телефон няколко пъти по-дълго, отколкото на компютър. Това не е за мрежата, а за процесора.
• Шрифтове. Всяка дебелина е отделен файл. Четири дебелини по два стила означава осем сваляния, преди да се появи текст.
• Неадаптирани изображения. Картинка с ширина 2000 пиксела на екран от 360 се сваля изцяло и после се мащабира, харчейки и трафик, и памет.
• Външни скриптове. Всеки е отделна връзка към чужд сървър, чиято скорост не контролирате.
• Сложна анимация. Онова, което е плавно на компютър, подскача на евтин телефон, ако анимираните свойства карат оформлението да се преизчислява.

Как да проверите без да купувате телефон

Не е нужно да купувате старо устройство, стигат инструментите за разработчици в браузъра:

1. Отворете инструментите за разработчици, раздел мрежа.
2. Включете ограничение на скоростта на ниво бавна мобилна връзка.
3. В раздела за производителност включете забавяне на процесора четири-шест пъти.
4. Задължително сложете отметка за изключване на кеша.
5. Презаредете страницата и гледайте часовника.

Това приблизително отговаря на телефон от среден клас отпреди три години при нестабилна връзка. Разликата с видяното преди това обикновено е неприятна.

Втора проверка, още по-проста: вземете телефона, изключете Wi-Fi и отворете сайта с мобилен интернет някъде навън, а не в офиса.

Какво да поправите първо

Подредено по съотношение резултат към усилие:

1. Време за отговор на сървъра. Ако е над секунда, останалото няма значение. Това е първото за проверка и най-честият реален проблем.
2. Излишни външни скриптове. Пребройте ги и махнете онези, за които няма отговор за какво служат.
3. Изображения. Съвременен формат, размери според реалния екран, задължително зададени ширина и височина.
4. Шрифтове. Две дебелини вместо осем, с показване на текста веднага.
5. JavaScript. Отложете всичко, което не е нужно за първия екран.
6. Анимация. Само прозрачност и трансформации.

Първите три обикновено дават по-голямата част от резултата и не изискват преработка на сайта.

Бюджет за производителност

Най-действеният инструмент и почти никой не го използва. Идеята е проста: предварително да се уговорят граници, които страницата не надхвърля.

Стойността на бюджета не е в самите числа, а в това, че превръща въпроса „да добавим ли още една джаджа“ от въпрос на вкус във въпрос на аритметика. Ако новият инструмент не се вписва в границата, нещо трябва да отпадне.

Защо това има значение за парите

Аудиторията със слаби устройства и лоша връзка не е маргинална част. Това са хора в движение, в градския транспорт, извън града, с евтини телефони. В много ниши именно те са мнозинството от мобилния трафик.

И най-важното: тези хора не пишат до поддръжката „сайтът ви е бавен“. Те просто затварят раздела, а в аналитиката това изглежда като обикновено отказване. Затова проблемът остава незабелязан с години – той не подава никакъв сигнал освен число, което лесно се приписва на нещо друго.