24
Июль
Статья написана для 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(); } }); } }) });