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

16 секретов по ускорению загрузки сайта

Здравствуйте, для вашего удобства мы решили собрать все рекомендации по ускорению загрузки сайта на Moguta.CMS на одной странице.

Базовые настройки системы для ускорения загрузки

1. Доступно два типа кэширования

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

   Для управление настройками кэширования в Moguta.CMS необходимо перейти в раздел «Настройки» - «Магазин» - «Кэширование».
   
   В настройке "Способ кэширования объектов" доступно два типа DB и MEMCACHE.

   DB - предполагает загрузку информации в отдельную таблицу в базе данных. При первом открытии страницы, ее содержание сохраняется в таблицу.
   
   

   MEMCACHE - предполагает хранения данных сайта в памяти сервера на котором работает ваш сайт. Алгоритм загрузки страницы похож на выше описанный для метода DB. Получение кэша через MEMCACHE происходит намного быстрее, чем через DB, и, соответственно, сильнее увеличит скорость загрузки вашего сайта.
   (На вашем сервере ОБЯЗАТЕЛЬНО должен быть установлен PHP модуль memcache. Если модуль не установлен могут возникнуть проблемы в работе сайта, и придется его восстанавливать по инструкции )
   
   Для подключения данного способа кэширования изучите инструкцию .
   
   

   Для включения кэширования поставьте галочку напротив пункта «Использовать кэширование объектов» и выберите способ кэширования( DB или MEMCACHE), поле «Время хранения кэша в секундах» можно оставить по-умолчанию.
   
   

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

2. Объединение стилей и javascript файлов

   При открытии страницы браузер загружает множество CSS и JS файлов, из ядра движка, из вашего шаблона, из каждого подключенного вами плагина и т.д. Чем больше число таких файлов, тем больше обращений к серверу требуется при формировании страницы, что замедляет скорость ее загрузки в браузере.
   
   

   Moguta.CMS имеет возможность объединить все CSS и JS файлы в один, что поможет довольно ощутимо ускорить загрузку сайта.
   
   

   Для включения этой функции перейдите в раздел «Настройки» - «SEO», поставьте галочку напротив пункта «Объединить все CSS и JS в один файл» и нажмите кнопку «Создать images для CSS».
   
   

   Обратите внимание, что если вы установили новый плагин, то необходимо будет повторно нажать кнопку «Создать images для CSS» и очистить кэш. Данная кнопка предназначена для сбора всех картинок упоминаемых в CSS в одну папку с кэшем. Необходимо это для сохранения корректности путей этих картинок в конечном файле.

3. Миниатюры товаров

   Moguta.CMS автоматически создаёт миниатюры изображений товара при их загрузке для того, чтобы ускорить загрузку сайта, однако для лучшего результата необходимо произвести некоторые настройки, а именно — размер создаваемых миниатюр должен соответствовать размеру выводимых изображений в вашем шаблоне.
   
   

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

   Для того, чтобы изменить размер создаваемых миниатюр, перейдите в раздел «Настройки» - «Магазин» - «Изображения».
   
   

   Обратите внимание — новые размеры миниатюр будут применяться только для новых загруженных изображений.
   
   

   Что нужно знать, чтобы не утяжелить сайт

4. Старайтесь использовать минимум JavaScript кода

   Старайтесь использовать как можно меньше Javascript. JS анимация делает сайт более интересным и привлекательным, но также и сильно замедляет загрузку страниц. Оцените необходимость подключенных скриптов, возможно какие-то из них есть возможность убрать.
   Также не перегружайте сайт подключением различных виджетов от разных сервисов (онлайн чаты, виджеты соцсетей, обработка ухода клиента с сайта).

5. Не используйте бесплатный хостинг

   

   Использование платных хостингов несёт в себе множество преимуществ, но в рамках данной статьи самое главное то, что для них используются намного более производительные сервера, а следовательно ваш сайт будет загружаться заметно быстрее. При использовании бесплатных хостингов, есть большая вероятность не просто заставить клиентов долго ждать, но и потерять сайт в поисковой выдаче. Бесплатные хостинги часто ложат сайты в то время когда на сайт приходит поисковый робот и для поисковиков вы становитесь не доступны, соответственно ваш сайт понижается в выдаче.

6. Не перегружайте страницу товарами

   Чем больше товаров выводится на странице каталога, тем дольше он будет загружаться. Для оптимальной скорости загрузки сайта рекомендуется использовать не больше 15-20 товаров на странице. Конечно тут многое зависит от внутреннего содержания каталога (количества вариантов и характеристик товаров) и подключенных плагинов. Если вы используете много плагинов, выводящих свои элементы (кнопки купить, рейтинг, и т.п. ), то для вывода каждого элемента может потребоваться дополнительный запрос к базе. Соответственно чем больше товаров на странице, тем больше будет запросов от таки плагинов. В совокупности это может замедлить скорость формирования страницы.
   
   

   Для изменения количества выводимого количества товаров на сайте необходимо перейти в раздел «Настройки» - «Магазин» - «Группы товаров».
   
   

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

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

   Технические советы о том как ускорить загрузку сайта

8. Подключение кэширования статики на сервере (Apache+Nginx)

   Выбирайте хостинг с настроенной связкой Apache и Nginx.
   
   
   Связка двух веб-серверов, один из которых выполняет функцию фронтенда (Nginx), другой - бэкенда (Apache2), предназначена для снижения общей нагрузки на сервер. Достигается это за счет того, что более легкий и необремененный дополнительным функционалом Nginx первым принимает все запросы пользователей. Он самостоятельно выдает по запросам статический контент (изображения, css-файлы, javascript-скрипты..), не озадачивая этой функцией тяжеловесный Apache, который, в свою очередь, обрабатывает динамический контент. Это даёт существенный прирост к скорости загрузки вашего сайта.
   
   
   

9. Используйте PHP7

   Ещё одним важным плюсом при выборе хостинга является поддержка им PHP7, последней версии популярного языка программирования.
   
   

   Тесты, выполненные на реальных приложениях, показывают, что PHP 7 в среднем вдвое быстрее своей предыдущей версии PHP 5.6, а также использует на 50% меньше памяти во время обработки запросов.
   
   

10. Перестаньте пользоваться хостингами и переходите на VDS/VPS

    Если посещаемость вашего интернет-магазина больше тысячи человек в день, то имеет смысл задуматься об аренде виртуального выделенного сервера (VDS/VPS) взамен обычного хостинга.
    
    
    
    Преимущество таких серверов в том, что вам предоставляется свой собственный сервер с полным доступам ко всем файлам и настройкам, все ресурсы которого будут использоваться вами, а не распределятся между другими пользователями сервера.
    
    

    Из минусов стоит отметить, что использование VDS/VPS предполагает наличие системного администратора, а также немного более высокие цены относительно обычного хостинга.

11. Фильтруйте ботов и открывайте сайт только для доверенных ботов

    Столкнувшись со спам-ботами, многие веб-мастера ограничиваются премодерацией комментариев. Этого мало по трем причинам.
    
    

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

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

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

    Как защититься от спам-ботов в Moguta.CMS
    
    

    1. Найдите в корневой директории сайта файл .htaccess.

    2. Откройте и после строки RewriteBase / добавьте следующий код:
    
    

    #SetEnvIfNoCase User-Agent ^-?$ search_bot #без юзерагента
    SetEnvIfNoCase User-Agent "Phantom" search_bot
    SetEnvIfNoCase User-Agent "^SolomonoBot" search_bot #есть такой полезный сервис solomono
    SetEnvIfNoCase User-Agent "^News" search_bot
    SetEnvIfNoCase User-Agent "Ezooms" search_bot
    SetEnvIfNoCase User-Agent "MJ12bot" search_bot
    SetEnvIfNoCase User-Agent "^fastbot" search_bot
    SetEnvIfNoCase User-Agent "^TurnitinBot" search_bot
    SetEnvIfNoCase User-Agent "Parser" search_bot
    SetEnvIfNoCase User-Agent "Python" search_bot
    #SetEnvIfNoCase User-Agent "Linux" search_bot #запрет всем посетителям с линукса, очень часто парсеры работают именно на линуксе
    SetEnvIfNoCase User-Agent "xpymep" search_bot
    SetEnvIfNoCase User-Agent "Butterfly" search_bot
    SetEnvIfNoCase User-Agent "WBSearchBot" search_bot
    SetEnvIfNoCase User-Agent "infobot" search_bot
    SetEnvIfNoCase User-Agent "Indy" search_bot
    SetEnvIfNoCase User-Agent "^Moreoverbot" search_bot
    SetEnvIfNoCase User-Agent "Baiduspider" search_bot #самая китайская поисковая система, а нужен ли ваш сайт в китае?
    #SetEnvIfNoCase User-Agent "WebMoney" search_bot #иногда этот вебманевский бот листает страницы абсолютно без паузы и сильно грузит сервер
    SetEnvIfNoCase User-Agent "^magpie-crawler" search_bot
    SetEnvIfNoCase User-Agent "^InternetSeer" search_bot
    SetEnvIfNoCase User-Agent "^DLE_Spider" search_bot
    SetEnvIfNoCase User-Agent "^Yeti" search_bot
    SetEnvIfNoCase User-Agent "^start" search_bot
    SetEnvIfNoCase User-Agent "^SeznamBot" search_bot
    SetEnvIfNoCase User-Agent "libcurl" search_bot
    SetEnvIfNoCase User-Agent "^Java" search_bot
    SetEnvIfNoCase User-Agent "^MLBot" search_bot
    SetEnvIfNoCase User-Agent "AcoonBot" search_bot
    SetEnvIfNoCase User-Agent "^findlinks" search_bot
    SetEnvIfNoCase User-Agent "Lightspeedsystems" search_bot
    #SetEnvIfNoCase User-Agent "Q" search_bot
    SetEnvIfNoCase User-Agent "DigExt" search_bot
    SetEnvIfNoCase User-Agent "Exabot" search_bot
    SetEnvIfNoCase User-Agent "SearchBot" search_bot
    SetEnvIfNoCase Referer "^https://www.acunetix-referrer.com" search_bot
    SetEnvIfNoCase Referer "^https://acunetix-referrer.com" search_bot
    
    

    В конце файла пропишите
    
    

    Order allow,deny
    allow from all
    Deny from env=search_bot

12. Оптимизируйте изображения на страницах сайта

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

    JPEG – отлично подходят для детализированных изображений с большим количеством цветов, такие как фотографии. Этот формат хорошо поддается сжатию и оптимизации.
    
    

    PNG – ваш выбор, когда вам нужно высококачественное изображение с прозрачностью.
    
    GIF - для анимации.
    
    

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

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

    Вот несколько онлайн сервисов для оптимизации изображений:

    www.punypng.com

    www.jpegmini.com

    compressor.io

    Не масштабируйте изображения.
    
    
    Не изменяйте размер изображения при помощи атрибутов width и height тега, либо при помощи CSS. Это тоже негативно влияет на скорость загрузки страницы. Если у вас есть изображение размером 500x500px, а вставить на сайт вы хотите изображение с размером 100x100px, то лучше изменить размер оригинальной картинки при помощи графического редактора Photoshop или любого другого. Чем меньше вес картинки, тем меньше времени потребуется для её загрузки.

13. Минимизируйте CSS и JS

    Минимизация файла — это удаление из кода всех несущественных символов с целью уменьшения объема файла и ускорения его загрузки.
    
    

    
    В минимизированном файле удаляются все комментарии и незначащие пробелы, переносы строк, символы табуляции. Здесь всё просто - чем меньше объем файла, тем меньше времени понадобится браузеру на его загрузку.
    
    

    Минимизировать CSS и JS для ускорения работы сайта можно, например, здесь - shostak.ru/minimization.

14. Используйте CDN

    CDN (Content Delivery Network) — это множество веб-серверов, разнесённых географически для достижения максимальной скорости отдачи контента клиенту.
    
    

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

15. Используйте Gzip-сжатие

    Как показали проведенные исследования, gzip-сжатие текстового файла «на лету» в 95–98% случаев позволяет сократить время на передачу файла браузеру.
    
    

    
    Если хранить архивированные копии файлов на сервере (в памяти proxy-сервера или просто на диске), то соединение в общем случае удается освободить в 3-4 раза быстрее.
    
    

    Для того, чтобы включить GZIP-сжатие на своем сайте, необходимо в файле .htaccess прописать следующие строки кода:

    AddEncoding gzip .gz

    AddOutputFilterByType DEFLATE image/x-icon

    AddOutputFilterByType DEFLATE text/css

    AddOutputFilterByType DEFLATE text/javascript

    AddOutputFilterByType DEFLATE application/x-javascript

    AddOutputFilterByType DEFLATE text/html

    AddOutputFilterByType DEFLATE text/plain

    AddOutputFilterByType DEFLATE application/rss+xml

    BrowserMatch "MSIE [456]" no_gzip dont-vary

    BrowserMatch "SV1;" !no_gzip !dont-vary

    BrowserMatch "Opera" !no_gzip !dont-vary

    BrowserMatch "Firefox/[0-3]\." gzip-only-text/html

    BrowserMatch "Firefox/3\.[1-9]" !gzip-only-text/html

    BrowserMatch "Chrome/2" gzip-only-text/html

    BrowserMatch "Safari" gzip-only-text/html

    BrowserMatch "Konqueror" gzip-only-text/html

    
    
    Файл .htaccess находится в корневой папке вашего сайта, открыть его можно любым текстовым редактором.

16. Следуйте советам сервисов для проверки оптимизации вашего сайта

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

    https://developers.google.com/speed/pagespeed/insights/

    https://tools.pingdom.com

    https://www.webpagetest.org/

    https://gtmetrix.com/

    На сервисеGoogle PageSpeed Insights я бы хотел остановиться поподробнее.
    
    

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

    
    Также Google PageSpeed Insights позволяет скачать уже оптимизированные CSS, JS файлы и изображения для вашего сайта.
    
    
    Но не стремитесь выполнить абсолютно все рекомендации, зачастую это бывает невозможно, и одни рекомендации взаимоисключают другие. Как видно на скриншотах выше, даже у такого серьёзного ресурса как vk.com PageSpeed нашёл проблемы.
    
    

    Самое главное

    Нужно стремиться чтобы сайт открывался не дольше 2-3 секунд. Не важно одну две или даже три секунды открывается сайт, но вот если больше, то это уже повод, чтобы задуматься об ускорении загрузки сайта.
    
    
    
    Также вам необходимо понимать, что есть два параметры скорости загрузки страницы.
    
    Первое - скорость отображения контента (в этот момент страница уже открыта и показана пользователю, при этом индикатор открытия страницы еще отображается, до тех пор пока не будут подключены все статичные файлы и асинхронные скрипты).
    
    И второе - это скорость фактического формирования страницы, когда все что должно было подключиться - подключилось. Ориентироваться нужно именно на первый параметр. Т.е. не больше трех секунд должно пройти до момента отображения верстки сайта.