Москва
+7 (495) 663-16-12

Как ускорить загрузку сайта?

Знаете ли вы, что ваш сайт может подгружать свыше 90% неиспользуемых на странице css-стилей и javascript кода?

Это приводит к тому, что:

  • Веб-страница больше весит;

  • Страница медленнее прорисовывается;

  • Дольше загружается;

  • Уменьшается время нахождения посетителей на сайте;

  • Ухудшаются позиции сайта в поисковых системах.

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

    Простой пример: есть сайт "site.ru/index.php" с лендингом на главной странице, рассказывающем о преимуществах компании. У этого сайта есть личный кабинет на отдельной странице "site.ru/cabinet.php".

    Распространенная ошибка на основе примера: главная страница сайта имеет свою структуру и набор необходимых для работы стилей/js скриптов, а личный кабинет имеет другой необходимый для нормальной работы набор. Ошибка заключается в том, что большинство сайтов подгружают все css стили и все js файлы сайта вне зависимости от типа страницы. То есть главная страница сайта может подгружать лишние стили и скрипты, предназначенные для страницы личного кабинета, а это приводит к многократному увеличению веса главной страницы сайта и последующим неблагоприятным последствиям, вплоть до неправильной работы сайта.

    Даже такой гигант, как vkontakte  (см.скриншот) до сих пор работает с этой ошибкой. Колонка "Unused Bytes" показывает нам проценты неиспользуемого кода каждого из подгружаемых файлов.


    Почему так происходит?

    К примеру, классическая сборка Wordpress использует одинаковый header.php (шапку) для всех страниц сайта, в который через functions.php (функции темы) подключаются все css и js файлы сайта.

    Лучше всего для каждой страницы сайта в теге <head> указывать пути только к необходимым для этой страницы css файлам, а пути к js файлам по возможности вынести перед закрывающим тегом </body>. К примеру, для Wordpress нужно будет создать отдельные шаблоны (header.php и footer.php) для различающихся страниц. Но если у вас таких «различающихся» страниц десятки, а то и сотни? На это потребуется довольно много времени...

    Ускоряем CSS и JS

    1) Нужно понять, какие из css стилей используются для большинства страниц сайта и подгружать их в первую очередь → Critical css. Следует сформировать «критический css» и минифицировать его вес (можно с помощью сервиса: https://pegasaas.com/critical-path-css-generator/).


    2) Выполнить отложенную загрузку css стилей,  в которых нет необходимости для прорисовки страницы сайта. 
    Для этого в коде сайта нужно заменить rel=«stylesheet» на rel=«preload» для тех стилей, которые должны прорисовываться в первую очередь, а для всех остальных добавить тег <link> событие Onload, которое подгрузит стили после полной загрузки страницы.


    3) Выполнять асинхронную загрузку JavaScript, добавив атрибут async или defer.

     Скрипт с атрибутом async выполнится при первой же возможности после его полной загрузки.



    Скрипт с атрибутом defer выполнится после полной загрузки страницы.


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

    Для контрольной проверки оптимизации сайта используйте:

    Инструмент от Google «Pagespeed insights»:  https://developers.google.com/speed/pagespeed/insights/

    Или популярный инструмент среди зарубежных разработчиков «Gtmetrix»: https://gtmetrix.com/