Статья написана для CMS WordPress.
В компании YourFuture с каждым днем все больше и больше клиентов садятся на поддержку и продвижение сайта. Первое что делает наша команда – это аудит проекта, фикс багов, внедрение разметки и прочее. Самое основное со всего аудита – скорость сайта, которую можно проверить на сервисе Google PageSpeed Insights.
Возьмем для примера нашу работу Eco House корпоративный сайт в которой было скажем так, прилично разных библиотек из-за анимации. Добились мы таких результатов:
Что же мы сделали чтоб оказаться в зеленой линии Google?
Вот вам советы которые помогут вывести ваш проект в зеленую линию.
1. Самый эффективный способ это сжать все CSS и JS файлы, можно это сделать через эти сервисы — https://jscompress.com/ и https://csscompressor.com/ . Теперь ВНИМАНИЕ! все CSS / JS вставляйте прямо в код, CSS в <head></head> (как правило файл header.php) и JS в файл footer.php
CSS стили надо обводить тегом <style>тут ваши стили (с файлов что решили вынести в код)</style> пример:
JS стили надо обводить тегом <script>тут ваш JS (с файлов что решили вынести в код)</script> пример:
2. Если вы используете Google Maps на страницах сайта – есть специальный скрипт который откладывает загрузку вашей карты до тех пор пока не доскролите к ней. #map — ваш ID или CLASS карты
jQuery(function($) {
$(document).ready(function(){
if( 1024 >= $(window).width() && $('#map').length) {
var map_loaded_mob = false;
$(window).scroll(function (event) {
var scroll = $(window).scrollTop() + $(window).height();
var map_distance = $('#map').offset().top - 500;
if (!map_loaded_mob && scroll >= map_distance) {
console.log('map_init');
map_loaded_mob = true;
initMap();
}
});
}
})
});