Как да ускорите зареждането на страници, на които има Google Maps код?

Само преди дни Google обяви пускането на нов сигнал за класиране “Page Experience” от май 2021г. Той ще комбинира Core Web Vitals и UX сигналите. Това се прави, за да се осигури цялостна оценка на взаимодействието на потребителя с всяка страница.
⠀
Какво ще означават тези сигнали:
– ​​скорост на зареждане на страница
– удобство при гледане на мобилни устройства
– наличност на защитен HTTPS протокол
– без натрапчиви реклами

С една дума скоростта вече официално е фактор (преди просто беше неофициално). Затова в тази статия разглеждаме как да ускорите страницата си, ако на нея има вградена карта от Google, Apple или Yandex.

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

Как да оптимизирате зареждането?

Получихме запитване за оптимизиране при вграждане на карти. Ще ви покажем лайфхак, който решава този проблем.

Преди да отговорим, нека първо се спрем на тези въпроси:

• Какво представлява изтеглянето на картата при поискване на страницата на сайта?
• Как да внедрите функцията на вашия сайт още сега?

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

• “Мързеливо зареждане” (lazy load) на вградената карта;
• Асинхронно зареждане;
• Зареждане при необходимост;

Мързеливото зареждане ви позволява да организирате зареждане на данни при превъртане на страницата до обекта.

Асинхронното зареждане ви позволява да зареждате картата след отваряне на страницата.

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

Какво да направите?

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

• Вместо карта показваме моментна снимка на картата, която не се различава от първоначалния интерфейс на картата;
• Когато задържите мишката или кликнете върху снимката, картата се зарежда;

Каква е ползата от внедряването? Решаване на проблема със скоростта на зареждане на страницата. Повечето потребители използват мобилни устройства. Мобилният интернет често е бавен. Използвайте “мързелива карта” за зареждане. Като резултат ще получите:

• Подобряване на стойността на фактора Page Experience. Скоростта на зареждане влияе на оптимизацията на търсачката;
• Подобряване на стойността на преобразуване чрез увеличаване на скоростта;
• Подобряване на поведенчески фактори за класиране;
• Намаляване на количеството предадени данни, което спестява пари за големи сайтове ;
• Намален разход на батерията на устройството;

Стойността в отчета на Google PageSpeed и LightHouse за Chrome също се подобрява.

Как да се приложи?

Внедрете “мързелива карта” на вашия сайт сега

Стъпка 1. Първо получаваме кода на картата от услугата.

Например:
<script type=”text/javascript“
charset=”utf-8″
async
src=”линк“></script>

Стъпка 2. След това създаваме контейнер за блока на картата. Например по този начин:
<div id=”map_container” class=”map container-fluid”>
<script id=”ymap_lazy”
async
data-src=”линк“></script>
</div>

Стъпка 3. Създайте стил за статично изображение на карта. Например:
<style>
.map.container-fluid {
height: 340px;
padding: 0;
background-image: url(/map.jpg);
background-position: center center;
}
</style>

Стъпка 4. Писане на JavaScript кода. Работата на кода е да проследява събития. Например, задръжте курсора на мишката върху персонален компютър или докоснете мобилно устройство. При събитие кодът променя статичното изображение на интерактивна карта.

Например:
<script>
let map_container = document.getElementById(‘map_container’);
let options_map = {
once: true,
passive: true,
capture: true
};
map_container.addEventListener(‘click’, start_lazy_map, options_map);
map_container.addEventListener(‘mouseover’, start_lazy_map, options_map);
map_container.addEventListener(‘touchstart’, start_lazy_map, options_map);
map_container.addEventListener(‘touchmove’, start_lazy_map, options_map);

let map_loaded = false;
function start_lazy_map() {
if (!map_loaded) {
let map_block = document.getElementById(‘ymap_lazy’);
map_loaded = true;
map_block.setAttribute(‘src’, map_block.getAttribute(‘data-src’));
map_block.removeAttribute(‘data_src’);
console.log(‘YMAP LOADED’);
}
}
</script>

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

Страницата на картата се зарежда по-бързо сега.

Този метод е подходящ като всички вградени карти:

• Google Maps
• Карти на Apple
• Yandex карти

Оптимизирането на зареждането на картата е минимално, но влияе върху класирането в търсачките. Връзките са важен сигнал за класиране. Използвайте инструмента за анализ на входящи връзки, за да започнете с поставянето на входящи връзки на вашия сайт.

Заключение

Вграждането на обикновена карта забавя сайта. Горната техника ви позволява да ускорите зареждането на сайта. Ускорението на сайта има положителен ефект върху класирането.

Имате ли въпроси, коментари или коментари относно използването на “мързеливите карти” за зареждане при поискване? Пишете в коментарите.