Практика: оптимизация сайта fitlab59.ru

Публикация №231 от 25.03.2018

Компания «Альтер Модус» любит оптимизировать интернет-ресурсы (сайты): что-то умеем, чему-то предстоит учиться. Сегодня нам достался лендинг fitlab59.ru — одностраничный сайт под рекламу в Яндекс.Директ. Это простой вариант оптимизации потому, что тут всего одна страницу и на ней немного элементов. Решения рассмотренные в этой статье рассчитаны под конкретный маленький сайт, который не имеет лишнего кода и имеет избыточную систему управления ресурсами. Здесь не рассказывается обо всем подряд, а лишь о некоторых частных случаях.

Цель

Нам важно сделать сайт быстрым, который бы понравился пользователям и поисковым машинам. Ну, а о внешнем виде нужно договариваться с заказчиком индивидуально.

Инструменты

В качестве инструментов мы используем:

1. PageSpeed Insights (расширение Chrome и онлайн версию https://developers.google.com/speed/pagespeed/insights/)
2. Lighthouse (расширение Chrome)
3. Проверка структурированных данных Google (https://search.google.com/structured-data/testing-tool/u/0/)
4. Nu Html Checker (https://validator.w3.org)
5. Проверка оптимизации для мобильных (https://search.google.com/test/mobile-friendly)

По нашему мнению этого вполне достаточно.

Если говорить кратко, то нужно исполнить все рекомендации и требования.

Вот пример оценки Lighthouse:

где максимальная оценка 100.

Вот пример оценки PageSpeed Insights:

где максимальная оценка 100.

Примечание: если на сайте установлен счетчик Яндекс.Метрика или GTM, то это -1 балл.

Довольно сложно честно привести какой-либо действующий сайт под максимальную оценку, но поднять ее, как правило, можно всегда. Да, вы всегда можете слукавить и производить всю грязную работу после загрузки страницы и обходя инструментальную проверку, но вашим пользователям от этого лучше не станет.

С чем же мы столкнулись на данном сайте?

Вставка загрузки в onload порождает ошибку PageSpeed Insights: для отображения верхней части страницы браузеру приходится ожидать всю страницу и выполнять действия, предназначенные для определения страницы. Таким образом, запрос вынесен рядом с блоком, который обновляет.

<article class="dark" id=first>
	<div class="text">
		<h1>EMS тренировки в Перми</h1>
		<p>20 минут тренировок у нас<br /> = <br /> 3 часа занятий в спортзале</p>
		<p>Оставьте заявку сейчас и получите скидку 50%<br /> на пробную индивидуальную тренировку<br /> с персональным тренером.</p>
		<button>Записаться на пробное занятие</button>
	</div>
</article>

<script>
	document.getElementById('first').style.backgroundImage = 'url(/images/bg_' + window.innerWidth + '.jpg)';
</script>

Все изображения, кроме главного экрана подгружаются по мере прокрутки за 100 пикселей до начала визуализируемого блока.

window.onload = function() {
    initReviews();
}
window.onscroll = function() {
    checkReviews();
}
function initReviews() {
    window.reviewsLoaded = false;
    checkReviews();
}
function checkReviews() {
	if ((window.pageYOffset > getTop('reviews') - window.innerHeight-100) && !window.reviewsLoaded) {
		window.reviewsLoaded = true;
		var reviews = document.getElementsByClassName('review');
		for (var i in reviews) {
			if (typeof reviews[i].getAttribute == 'function') {
				var src = reviews[i].getAttribute('data-src');
				reviews[i].innerHTML = '<img src="' + src + '" width=208 height=369 title="Instagram отзывы EMS" />'; 
			}
		}
	}
}
function getTop(e) {
	var bodyRect = document.body.getBoundingClientRect(), elemRect = document.getElementById(e).getBoundingClientRect();
	return (elemRect.top - bodyRect.top);
}

Дополнительно можно добавить различные проверки на существование элементов, совместимость со старыми версиями браузеров и прочие.

На сайте установлен счетчик Яндекс.Метрика, но его наличие убирает 1 балл из оценки PageSpeed Insights. Для решения этой проблемы можно перенести скрипта метрики watch.js на свой сервер, а в коде вызове изменить адрес скрипта на новый. Если что-то поменяется в настоящем скрипте, то данные могут поступать неправильно (или не поступать вообще) в статистику до момента обновления вашего скрипта. Иными словами, это решение не на 100%, но на практике сбоев не отмечалось.

Что получилось

Мнение о CMS

Как говорилось выше, сайт не имеет крупной системы управления ресурсами. Для данного сайта это не требуется.

Кроме того, есть мнение, что системы управления ресурсами (CMS) залезли не в ту область — область Front-End. Из названия видно, что система управляет ресурсами. На практике — создает удобства для пользователя по работе с данными (формы, кнопки, списки и т. п.). Почему CMS связалась с шаблонами и фронтендом — не понятно. Зона ответственности должна заканчиваться на базе данных, все, что дальше — шаблоны, сетевые сервисы и т. п. - не дело CMS.

Ссылка на статью: https://altermodus.ru/ru/articles/231/

• Автор: Сергей Смагин
• Дата: 25.03.2018 00:00
• Версия для печати