Назад в блог

Оптимизация скорости работы сайта

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

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

В качестве инструмента для проверки скорости мы будем использовать Google PageSpeed Insights. Google оценивает сайт по скорости загрузки самого сайта, удобству отображения, скорости отрисовки элементов и, причем, как для настольных компьютеров, так и для мобильных устройств.

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

Магазин спортивного питания fizcult.by на компьютере
Сервис доставки еды ТикТак:

Работы по оптимизации скорости сайта являются для нас обязательными в любом проекте, независимо от размеров и бюджета проекта.

Сперва по пунктам, что касается процесса разработки, а затем по настройке сервера:

  • По большей части скорость, конечно, зависит от самой разработки, ее качества. Все проекты мы разрабатываем индивидуально на PHP фреймворке Laravel. Грамотное построение архитектуры проекта, кэша и использование фреймворка позволяет нам на стороне сервера генерировать страницу за 50-100мс. Нормой будет, если у вас эта цифра будет до 400мс.
  • Минификация в один файл скриптов и стилей. Для сборки проектов мы используем Gulp. Независимо от количества файлов и объема проекта, на выходе у нас всегда один файл со стилями и один файл со скриптами.
  • Идеально сделать два минифицированных файла стилей: в одном только общий каркас сайта и расположить его в тэге <head>, а втором уже все остальные стили и расположить его перед закрывающим </body>.
  • В начале HTML документа в тэге <head> располагаем только CSS файлы, все скрипты, включая Google Analytics, Яндекс Метрика, онлайн консультанты и прочее, размещаем перед закрывающим тэгом </body>.
  • Все иконки проектов только в векторе в формате SVG. Их храним в CSS в base64. Картинки у вас должны быть только в контенте, но в верстке.
  • Обязательно делать миниатюры картинок всех необходимых размеров. У нас на проектах выходит по 5-6 миниатюр разных размеров одной картинки.

Настройки сервера

  • На стороне сервера мы не используем Apache. Наша связка: nginx + php7-fpm.
  • Хранить сессии, кэш в Redis.
  • Обязательно SSD диск. Если нет возможности хранить весь сайт на SSD, то, как минимум, базу данных.
  • Отдавать сервером ответ для кеширования браузером статичных файлов. Например, для nginx конфигурация выглядит так:

                          location ~* \.(gif|jpg|jpeg|jpg|bmp|wmv|avi|mpg|mpeg|mp4|htm|html|js|css|deb|bz2|swf|pdf|ico|txt|woff|svg)$
                            charset UTF-8;
                            expires 2w;
                            access_log off;
                          }
                        
  • На стороне сервера включить gzip. Для nginx конфигурация выглядит следующим образом:

                          gzip on;
                          gzip_disable "msie6";
                          gzip_comp_level 5;
                          gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript 
                          application/javascript image/svg+xml svg svgs;
                        

Если вы выполнили весь этот список и тест Google PageSpeed Insights не показал вам зеленый результат - пишите в комментариях, попробуем разобраться, дать советы и, при необходимости, дополним наш список.