24

Июль

Как ускорить сайт на WordPress и улчушить показатель PageSpeed Insights

Читать статью

Статья написана для 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();
                    }
                });
            }
        }) 
    });
Заказать расчет
Спасибо ;)

Мы уже набираем ваш номер телефона...

Написать нам
Спасибо ;)

Мы уже набираем ваш номер телефона...