Чат, карта, видео и пиксели: колко скорост ви струват добавките

Сайтът ви е бил бърз в деня, в който е пуснат. После някой е добавил чат, карта в долната част на всяка страница, видео от YouTube на началната, пиксел за рекламата във Facebook и бутони за споделяне. Всяка добавка е изглеждала дребна, а заедно често тежат повече от самия сайт. Тази статия е за тях: какво струва всяка, как да видите какво зарежда вашият сайт и с какво по-леко да я замените.

Защо външната добавка е по-скъпа, отколкото изглежда

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

Затова добавката рядко струва само собствената си тежест. Тя заема и процесора на телефона точно в секундите, в които човекът се опитва да превърти или да натисне бутон. Това е показателят INP, обяснен в статията скоростта на сайта е пари: колко бързо страницата реагира на пръста. Тежките снимки са отделна тема. Тук става дума за чуждия код.

Цената има още две страни. Повечето добавки изпращат данни за посетителя на фирмата, която ги предлага, а това означава банер за съгласие и още редове в политиката за поверителност. Част от тях са и абонаменти, които се плащат всеки месец, дори когато никой не ги ползва.

Чатът, картата и видеото

Чатът в ъгъла на екрана

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

Има по-лек начин, който изглежда по същия начин. В ъгъла стои само картинка на балончето, а истинският чат се изтегля чак когато някой го натисне. В ръководствата на Google за разработчици това се нарича фасада и дълго време беше препоръчвано изрично за чатовете на Intercom, Drift, Help Scout и Messenger. Посетителят, който иска да пише, чака малко повече. Всички останали не чакат нищо.

За малък бизнес често още по-добрият вариант е обикновена връзка: бутон за обаждане, за Viber или за WhatsApp. Тя не тежи практически нищо, а разговорът продължава в приложение, което човекът и без това отваря всеки ден.

Проверете и дали в сайта ви не е останал чат, който вече не работи. Meta спря приставката за чат на Messenger в сайтовете на 9 май 2024 г. Ако някой я е слагал при вас, старият код вече не показва чат и няма какво да търси там.

Картата на страницата за контакт

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

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

Още по-лекият вариант е статична снимка на картата с бутон „Отвори в Google Maps“. На телефона бутонът отваря приложението с навигация, което шофьорът така или иначе ще ползва. Под картата напишете адреса с думи и една-две ориентировъчни точки, например „след бензиностанцията, вторият вход вдясно“. Този ред помага повече от всяка карта и не тежи нищо.

Видео от YouTube на началната страница

Къща за гости иска хората да видят двора, стаите и гледката. Видеото от YouTube е добър избор. Проблемът е в начина на вграждане. Стандартното вграждане тегли плейъра на YouTube още при отварянето на страницата, преди някой да е натиснал „пусни“. Според ръководството на Google за отложено зареждане отлагането на едно такова видео спестява около 500 KB при първото отваряне на страницата.

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

И едно решение, което не е техническо: не слагайте видеото най-горе, на мястото на голямата снимка. Първото, което човек вижда, трябва да се появи веднага. Видеото може да е второто.

Пикселите, шрифтовете и бутоните за споделяне

Рекламните пиксели и таговете за статистика

Пикселът на Meta, тагът на Google Ads, пикселите на TikTok и LinkedIn са малки скриптове, които съобщават на рекламната платформа кой е дошъл и какво е направил. Всеки се свързва със своя сървър и често зарежда допълнителни файлове. Поотделно не тежат много. Проблемът е, че се трупат.

Типичната история е в онлайн магазин. Първата агенция слага своя пиксел. Втората слага своя и не маха стария. Кампанията от миналата Коледа е свършила, а тагът ѝ още се зарежда. След няколко години в сайта има седем проследяващи кода, а данните се гледат от два.

Пикселите събират данни за посетителя, затова по правилата за лични данни трябва да се зареждат едва след съгласие в банера за бисквитки. Това има полезен страничен ефект: докато човекът не е казал „да“, пикселите не тежат нищо. Ако при вас те тръгват още преди банера, проблемите са два наведнъж - скорост и закон.

Какво да направите: веднъж в годината поискайте списък на всички тагове в сайта и до всеки - кой гледа данните от него. Ако никой не може да отговори, тагът се маха.

Шрифтовете

Всеки шрифт е отделен файл, а често и всяка негова дебелина. Сайт с три вида шрифт в по пет дебелини може да тегли петнадесет файла, преди текстът да изглежда както трябва. Обикновено стигат един или два шрифта и две-три дебелини.

Когато шрифтовете се теглят от сървърите на Google, браузърът отваря още една връзка към чужд сървър, а адресът на посетителя стига до Google. През януари 2022 г. съд в Мюнхен присъди 100 евро обезщетение на посетител на сайт именно защото адресът му е изпратен към Google чрез шрифтовете, без негово съгласие. Решението е германско и е за един случай, но изводът е практичен: шрифтовете могат да стоят на сървъра на самия сайт. Така браузърът не отваря излишна връзка и не изпраща нищо на никого.

И още едно правило: текстът трябва да се показва веднага с обикновен шрифт, а специалният да го замени, когато пристигне. Иначе на бавна връзка човекът гледа празни места там, където трябва да има думи.

Бутоните за споделяне

Години наред най-разпространената услуга за бутони за споделяне беше AddThis. Oracle я спря на 31 май 2023 г. и поиска от собствениците на сайтове да махнат кода ѝ. Струва си да проверите дали той не е останал и във вашия сайт. А бутонът „Харесвам“ на Facebook, вграден с техния код, тегли около 215 KB според същото ръководство на Google.

Бутонът за споделяне всъщност не изисква чужд код. Обикновена връзка, която отваря страницата за споделяне на Facebook или LinkedIn, върши същата работа. А на телефона може да се отвори менюто за споделяне на самия телефон, откъдето човекът избира Viber, имейл или каквото ползва.

Как да проверите какво зарежда вашият сайт

1. Отворете pagespeed.web.dev, въведете адреса на началната страница и гледайте резултата за мобилни устройства.
2. Потърсете раздела за код от трети страни (на английски „3rd parties“). Там е списъкът на чуждите услуги, които сайтът ви зарежда, и колко тежи всяка от тях.
3. Направете същото за страницата за контакт и за една страница с услуга или продукт. Добавките често са различни на различните страници.
4. До всяка добавка от списъка напишете три неща: за какво служи, кой я ползва и кога за последно е била полезна.
5. Помолете човека, който поддържа сайта, да махне за проба най-съмнителната добавка, и пуснете теста отново. Разликата в числата е нейната цена.

Кога добавката си заслужава

Нищо от това не значи, че сайтът трябва да е гол. Чат в онлайн магазин, на който оператор отговаря в работно време и който реално носи поръчки, си заслужава - просто да се зарежда при натискане. Пиксел за кампания, която върви и чиито резултати някой чете, също си заслужава, след съгласие. Картата на страницата за контакт е полезна, ако се зарежда, когато човекът стигне до нея.

Въпросът не е „има ли добавка“, а „какво носи срещу това, което взема“. Добавка, която носи по едно запитване на месец, а бави всяка страница за всеки посетител, може да ви струва повече клиенти, отколкото ви доведе. Мерете я с вашите числа: колко запитвания идват през нея и как се променя резултатът на телефона без нея.

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

Темискорост на сайтавъншен кодчат в сайтавградено видеорекламни пиксели