Ускорение загрузки страницы в интернет. Используем YSlow на полную. Отказ от масштабирования картинок

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

Хотите попасть в число избранных и достичь поставленных целей?

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

Быстродействие сайта - один из важных показателей, который положительно влияет на ранжирование в поисковых системах и конверсию.

Например, каждая дополнительная секунда загрузки грозит бизнесу потерей 7% целевых действий! Данные анализа Amazon .

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

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

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

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

И все-таки, на какие показатели стоит ориентироваться?

  • 1 секунда - отличный, но труднодостижимый результат.
  • 2–3 секунды - стандартное время отклика большинства успешных ресурсов.
  • 3–5 секунд - маленькая, но для некоторых проектов терпимая скорость;
  • 6–10 секунд - столь низкий показатель негативно влияет на продвижение;
  • от 11 секунд - плачевный результат, при котором надо срочно ускорять сайт.

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

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

Будет полезно!

Отказ от масштабирования картинок

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

Чтобы браузер каждый раз грузил нужный вариант, установите плагин Imager (для WordPress). Это работает так:





new Imager({ availableWidths: });

Оптимизация JavaScript и CSS

Специальные методы упрощения кода уменьшают размеры элементов, сокращая названия функций и удаляя мусор. Можно дополнительно улучшить CSS и JavaScript за счет изменения названий переменных (в случае обновления HTML и правильной работы селекторов).

Упростить код несложно - имеется много сервисов: JSCompress или Refresh-SF. Подойдет для этого и Google PageSpeed Insights. После выполнения на нем анализа страницы, нажмите на «Сократить HTML», а затем на «Посмотреть содержание».

Обратите внимание! Лучше всего размещать JS-файлы в конце страницы, а CSS - в начале. Так ваш ресурс произведет на пользователей положительное впечатление как по внешнему виду, так и по скорости.

Оптимизация веб-шрифтов

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

Начните пользоваться новыми форматами WOFF и WOFF2, при этом исключите все наборы символов, кроме кириллицы и латиницы.

Улучшить ситуацию можно при помощи спецификации link rel=«preload» и CSS-свойства font-display. Первый показатель мгновенно указывает браузеру о необходимости загрузки файла шрифта, второй позволяет управлять поведением браузера в случае задержки.

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

Для подключения кэша браузера необходимо создать файл.htaccess и, воспользовавшись модулем expires, прописать в нем выбранные директивы:

  • Expires - отвечает за актуальность кэша (можно установить срок от недели до года).
  • Cache-Control: max-age - аналог предыдущего заголовка, выполняющий те же функции.
  • Last-Modified и ETag - устанавливают в кэше уникальный id для каждого url. В Nginx для статичных файлов они включены по умолчанию.

Как увеличить скорость загрузки сайта на определенном движке?
  • WordPress

Для оптимизации CSS и JavaScript в таком случае стоит установить плагин Autoptimize. Можно также загружать откорректированные элементы страницы из PageSpeed Tool.
Учтите, что основой «легкости» ресурса является правильно выбранная тема. Если нынешняя версия тормозит ваш проект, есть смысл ее поменять.

  • Opencart

Следует уменьшить размеры статичного контента - для Nix-систем подойдет Google ModPagespeed. Также вы можете воспользоваться Gzip, сжатием изображений.

  • Joomla

Оптимизируйте иллюстрации под Web, тогда они будут обладать меньшим весом. Никогда не загружайте картинки с высоким разрешением для их последующего уменьшения через CSS и HTML. Большое количество «неблагополучных» элементов приведут к серьезному замедлению работы сайта.

  • 1C Битрикс

В административной панели этой CMS существует немало полезных настроек. Например, «Автокэширование» и «Оптимизация CSS», где можно выбрать подходящие вам функции: объединение файлов, создание сжатых копий и т. п.

Заключение

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

«Распределили часть контента (изображения, jQuery) на поддомены, а часть на CDN (cloudflare.com) для сокращения расстояния между сервером и пользователем.» Для сайта плохо - картинки будут привязаны не к сайту, а к CDN. В Яндексе в статистике будете видеть "картинок в индексе - 0".© инфа от яндекса.

То есть включили все галочки в настройках оптимизации сайта на хостинге. С заказчика содрали пару сотен баксов. При этом убили такой параметр в заголовке как lastmodified, ибо при включении этих опций он не передается - такова его специфика. Ощущение, что и сайта нету никакого, просто придумали статью и переписали название чекбоксов с хостинга, думая что справит неизгладимое впечатление.
Браво, примитивнее статьи не читал, кейс на премию Дарвина!

Александр Поречников

Java - это даже и не близко Java Script

Александр Поречников

Вот Вы пишите, Геннадий, что включили http2 и при этом зачем-то обьединяете ресурсы в один файл, Противоречите сами себе? Или просто не знаете как работает http2. И судя по чеклисту, то меряли ли Вы скорость загрузки после простого включения ганзипа, все остальное это такие тонкости и дебри в которые лезут, когда нужно с 500мс сделать 400мс или от нагрузки сервер подвисает (504 ошибки проскакивают). И выкиньте Апач из связки Апач + Нжиникс (если Вы, конечно, не используете специфические плагины Апача) + совет, держите всю статику на СДН, это очень недорого, а толк от этого огромный, как минимум в снижении нагрузки на процессор

Александр Поречников

а для чего созданы зеркала - слейте СДН с основным доменом и все

Александр Поречников

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

Настроили OpCashe, исправьте на OPcache

Александр, несомненно, эти опции модуля pagespeed ускоряют сайт, но при выборе хотя бы одной из них на хостинге last-modified не передается, ответ сервера 304 на запрос if-modified-since не отдается, cache conrol -> max-age становится 0.
Возмутило не это в статье, возмутило то, что автор пишет такие заумные вещи как они план составляли, как воплощали в жизнь мега СЕО технологии и как потратили на это 60 человекочасов, 60 КАРЛ! То есть с заказчика содрали минимум 500 баксов за то, что поставили галки на хостинге. Не жалко, на здоровье! Ну развел и молчи, но не лезь со своими псевдознаниями на нормальные сайты и не отбирай у людей время! Почему уверен что рулили на хостинге -- вот скрин украинского продвинутого хостера, где порядок этих галок практически на 100% совпадает с гениальным планом автора и ко по ускорению сайта.
https://uploads.disquscdn.c...

Александр Поречников

на этом хостинге у нас даже один из старых полустатичных проектов крутится, отличнаый хостинг. По поводу чего Вы высказалась я знаю, но многие не понимают, что на самом деле есть всего несколько способов действительно уменьшить время загрузки, а не "экономия на спичках" - это:
0) включение сжатия на веб-сервере (gzip),
1) установка правильных заголовков на сайте
2) использование не шаред-хостинга, а пусть даже минимальной ВПСки
3) использование более-менее быстрого движка (желательно не Вордпресс, а на фреймворке)
4) минификация статичных файлов (то что редко меняется - стили, картинки, скрипты, шрифты)
5) кеширование страниц/статики

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

Согласен с Вами на 100%, благодарю за лаконизм и точность!

Ляпушкин Никита

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

Филандер

а что за хостинг?)

Филандер

Alexey Tyazhelnikov

Что значит "Расширили время кэш для JavaScript и CSS" ?

Включили последнюю и предпоследнюю галочку на хостинге (пост со скрином выше))))

Геннадий Федоров

Да, так и сделали!
Извините, Вы не компетентны в этом вопросе.

Геннадий Федоров

Спасибо!
Комплекс работ - дает результат.

Геннадий Федоров

Такая и была задача, дать толчок к действиям, а не расписать как необходимо делать

Геннадий Федоров

Спасибо за комментарий!
Признаю, все объединили до перехода на https/http2))
Да, скорость после gzip мерили, не тот результат (не всем угодишь)...

Геннадий Федоров

Вот Вы как спецы судите... посмотрите это со стороны пользователя))

Геннадий Федоров

Ваш комментарий вообще непонятен

Александр Поречников

пользователи обычно не настраивают сервер, не программируют и не создают продукты, то что можно создать "бложик/сайт" на вордпрессе человеку без знаний - это несомненно хорошо, но если у такого человека возникнут вопросы, то ему все равно придется столкнутся с PHP, JavaScript, Nginx, Apache и прочими ранее незнакомыми словами и в этом обычно помогает гугл, поэтому "легкая безграмотность" в терминах приведет к тому, что человек будет искать что-то похожее на "слайдер на Java" и удивлятся что ему какой-то JavaScript подсовывают в результатах. Поэтому взывать к стороне пользователя не стоит

Александр Поречников

часто проблема не в том что скорость повышается от всех манипуляций (пусть даже если и на 0,1%), а в том, что мы не видим других путей оптимизации (CDN, nginx) и не понимаем как это работает (http2) и в результате оптимизируем то что нет смысла оптимизировать и забываем о том что следовало бы оптимизировать или как добится максимального результата при своей оптимизации.

При создании клиентоориентированного сайта вам необходимо учесть и продумать множество вещей, начиная от творческих (дизайн, наполнение) и заканчивая техническими (верстка, размещение в сети Интернет). Для клиентов важна каждая мелочь, поэтому важно смотреть не только на внешнюю сторону вашего проекта - то, что увидит пользователь - но и на внутреннюю, а именно, как быстро пользователь это увидит. Исследования показывают, что примерно половина пользователей ожидает, что сайт загрузиться менее чем за две секунды, а 40% пользователей закроют сайт, если на его загрузку уйдет более трех секунд. Поэтому крайне важно, чтобы ваш сайт загружался быстро, иначе вы рискуете потерять значительную часть своих клиентов. Что же вы можете сделать, чтобы уменьшить время загрузки вашего сайта?

1. Сократите код

Чем объемнее код вашего проекта, тем больше он весит, а значит, тем большее время требуется для его загрузки. Поэтому в первую очередь вам нужно убедиться, что код оптимизирован. Особенно это касается первой, посадочной страницы, на которую попадает пользователь - будет лучше отказаться от тяжелых скриптов JavaScript и Ajax либо убрать их в нижнюю часть страницы. Придерживайтесь известного принципа KISS - Keep it short and simple - пусть код будет коротким и простым.

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

Если вы хотите узнать, все ли в порядке с JavaScript на странице вашего сайта, воспользуйтесь этим сервисом: https://varvy.com/tools/js/

Этот совет также касается HTML и CSS-кода. Как и в случае с JavaScript, особое внимание уделите внешним файлам - к примеру, внешним таблицам стилей, которые по возможности лучше вставить в HTML.

2. Используйте компрессию сайта

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

Проверить, используется ли на вашем сайте gzip для сжатия данных, можно на этом ресурсе: http://www.gidnetwork.com/tools/gzip-test.php

А пройдя по следующей ссылке, вы сможете выяснить, применяется ли в целом какая-либо технология сжатия на вашем сайте: http://www.whatsmyip.org/http-compression-test/

3. Сократите количество переадресаций

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

Проверить свой сайт на наличие переадресаций вы можете при помощи этой программы (есть бесплатная версия): https://www.screamingfrog.co.uk/seo-spider/

4. Уменьшите число плагинов

Данный пункт касается тех, кто пользуется CMS: Wordpress, Joomla или какой-либо другой. Регулярно проверяйте список плагинов, которые вы используете, на предмет ненужных или уже неиспользуемых. Уменьшение количества плагинов положительно скажется на загрузке вашего сайта и его работе в целом. Если вы используете Wordpress в качестве системы управления контентом, то оптимизировать число плагинов вы также можете при помощи специального плагина P3 (Plugin Performance Profiler): https://wordpress.org/plugins/p3-profiler/ Этот плагин покажет вам данные, касающиеся производительности других плагинов, и того, как каждый из них влияет на работу сайта. Это поможет вам определить, от каких плагинов следует отказаться в первую очередь.

5. Оптимизируйте изображения

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

6. Пользуйтесь кэшем браузера

Используя кэширование, вы можете значительно выиграть в скорости загрузки вашего сайта: когда пользователь первый раз заходит на ваш сайт, в кэше его браузера сохранятся некоторые JavaScript и CSS-файлы, которые затем будут автоматически показываться при его следующих визитах, а браузеру не придется тратить время на их загрузку. Для кэширования необходимо правильно настроить HTTP-заголовок Expires. Вы можете сделать это, прописав в файле.htaccess, который находится в корневой папке, следующие строки:

Header append Cache-Control "public" FileETag MTime Size ExpiresActive On ExpiresDefault "access plus 0 minutes" ExpiresByType image/ico "access plus 1 month" ExpiresByType text/css "access plus 1 month" ExpiresByType text/javascript "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/png "access plus 1 month"

В данном случае у всех типов установлен срок в 1 месяц, но вы можете изменить время на то, которое вам нужно: кэш может храниться определенное количество лет (years), месяцев (months), недель (weeks) или дней (days).

Если вы пользуетесь какой-то определенной CMS, то можете установить для этого специальный плагин. В случае с Wordpress подойдет W3 Total Cache: кэширование включается в настройках (выберите Settings у данного плагина в списке всех установленных плагинов, затем General - поставьте галочку у “Toggle all caching types on or off (at once)”).

7. Следите за производительностью сайта

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

  • уже упомянутый выше Page Speed Insights: https://developers.google.com/speed/pagespeed/insights/?hl=ru
    Этот инструмент от Google замеряет скорость загрузки вашего веб-ресурса (от 0 до 100 баллов; чем выше балл, тем лучше). Сервис даст вам рекомендации по улучшению производительности, а также покажет, какие пункты оптимизации вы выполнили. Имейте в виду, что так как в Page Speed Insights вносятся правки и корректировки, то количество баллов, которые получил ваш сайт, также может меняться.
  • Pingdom Website Speed Test: http://tools.pingdom.com/fpt/
    Хороший англоязычный сервис для проверки скорости загрузки вашего ресурса. Будет особенно полезен тем, кто администрирует международные ресурсы, так как позволяет выбрать место, из которого будет производиться тестирование: США, Австралия или Швеция (результат будет отличаться). Выводит множество разных данных и дает рекомендации.
  • Loadimpact: https://loadimpact.com/
    Этот сервис позволяет сгенерировать несколько запросов на ваш сайт, путем чего можно выяснить, во-первых, среднюю скорость загрузки вашего сайта, во-вторых, понять, как ваш сайт поведет себя при определенном количестве запросов (выдержит ли он нагрузку).
  • LoadStorm: http://loadstorm.com/
    При помощи этого сервиса вы можете запустить достаточно серьезное тестирование своего сайта. Бесплатная версия сервиса позволит вам протестировать свой ресурс при помощи 10 пользователей, а вот платная версия дает больше возможностей, в частности вы сможете самостоятельно прописать сценарий, который будут выполнять пользователи (к примеру, нажать на определенную кнопку или перейти в нужный раздел). При этом вы обязаны верифицировать то, что являетесь владельцем сайта.
Заключение

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

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

  • Больше половины посетителей покидают страницу, которая грузится более 3-х секунд;
  • Сайт, который грузится 3 секунды, имеет на 25% меньше просмотров, на 50% больше отказов и на 25% меньше конверсии , чем сайт, который грузится 1 секунду;
  • Прогресс-бар увеличивает время ожидания загрузки страницы;
  • Скорость загрузки напрямую влияет на продажи и на позиции сайта;

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

Рассмотрим способы ускорить время загрузки страниц сайта. По факту все способы очень просты и чаще всего сводятся к оптимизации "веса" страницы и грамотной загрузке кода.

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

1. Включить сжатие gzip

На каждом сайте есть подключаемые файлы со стилями.css и скриптами.js. Их можно сжимать на "лету" (при загрузке страницы). Проще говоря мы уменьшаем их вес и тем самым сайт быстрее грузится. Мои файлы в среднем сжимались на 75%. Например, если файл весил 45 кбайт, то после сжатия он стал весить уже 12 кбайт. Итого, экономия 33 КБайта веса на файле с таблицей стилей.

Включить сжатие проще простого. Нужно лишь написать следующие строки кода в файл .htaccess (файл находится в корне сайта):

mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

Проверить включено ли сжатие можно на сайтах

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

2. Включить кэш браузера

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

Header append Cache-Control "public" FileETag MTime Size ExpiresActive On ExpiresDefault "access plus 0 minutes" ExpiresByType image/ico "access plus 1 years" ExpiresByType text/css "access plus 1 years" ExpiresByType text/javascript "access plus 1 years" ExpiresByType image/gif "access plus 1 years" ExpiresByType image/jpg "access plus 1 years" ExpiresByType image/jpeg "access plus 1 years" ExpiresByType image/bmp "access plus 1 years" ExpiresByType image/png "access plus 1 years"

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

Мое мнение, что в любом случае, срок 1-7 дней можно всегда поставить.

Это самое простое, что можно было сделать, идем дальше.

Возможно Вам будет интересно:

3. Оптимизируйте изображения

Использование изображений jpg - для контрастных и gif - где мало количество цветов. Это все аксиомы. Ни в коем случае не использовать лишний раз png или bmp, поскольку оба формата являются совсем не оптимизируемыми.

Уже существующие изображения jpg и png можно легко еще сжать с помощью программ и сервисов. Лично я поискал в интернете сервисы для сжатия изображения. Сравнил результаты, сделал вывод, что онлайн сервис tinypng.com нравится мне больше всех. Иногда ему удается уменьшить изображение даже на 75%, при этом качество остается почти без изменений.

Если сайт использует в качестве фона большое изображение, то его можно очень сильно сжать. Например, мне удалось сжать с 300 Кбайт до 86 Кбайт картинку с задним фоном для одного из сайтов.

4. Подгружать файлы с другого домена

У браузеров есть ограничение на количество одновременно исполняемых запросов (не более двух параллельно). Другими словами, если на сайте будет куча изображений (даже маленьких), это сильно увеличивает время его загрузки. Поэтому применяют следующую хитрость:

Создают поддомен для хранения фотографий, javascript и другое. Например, если ранее фото лежало по адресу /img/foto.jpg , то теперь адрес нужно поменять на img.site.ru/img/foto.jpg . Для браузера это будет другой домен и таким искусственным методом мы ускоряем загрузку.

Примечание

Сейчас довольно модно применять "CSS-спрайт ". Смысл следующий: к примеру у нас на сайте есть куча маленьких картинок для фона (я думаю это знакомо каждому). Все эти картинки можно объединить в одно большое изображение, а с помощью CSS "вырезать" нужные куски в нужных местах.

5. Оптимизация CSS и JS

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

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

6. Правильное расположение CSS и JS

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

Примечание

Если Вы подгружаете библиотеку AJAX (от Google), то, конечно, грузить с сайта гугла напрямую ее быстрее плюс можно быть почти на 100% уверенным, что в браузере пользователя уже есть ее кэш. Но бывает, что гугл почему не доступен или тормозит загрузку, поэтому чтобы минимизировать этот риск можно прописать следующий код:

window.jQuery || document.write("");

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

Примечание

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

Медленный сайт не нравится никому - ни пользователям, ни поисковикам. При нынешней скорости интернета люди уже не готовы долго ждать загрузки страницы. Это вам не подключение по диал-апу, где ожидание было неизбежно. А поисковые системы, борясь за качество результатов поиска, не хотят выдавать пользователям плохие (в данном случае, медленные) сайты. Поэтому при прочих равных медленный сайт будет в выдаче ниже, чем его более шустрые конкуренты.

Какую скорость загрузки считать нормой

Чем быстрее, тем лучше. Но в среднем, 2-3 секунды для загрузки основной части контента страницы - это вполне нормально.

От чего зависит скорость загрузки

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

Тормозить загрузку сайта могут проблемы на каждой из сторон и в промежутке между ними.

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

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

Как проверить скорость сайта

Из множества онлайн-сервисов для проверки скорости сайта самый популярный, пожалуй, это инструмент Google PageSpeed . Работать с ним просто - указываем адрес сайта и жмем кнопку «Анализировать».

В результате мы увидим такие показатели (отдельно для компьютеров и для мобильных):

  • Через какое время браузер получает ответ от сервера и начинает отрисовывать контент страницы (FCP - First Contentful Paint).
  • Через какое время пользователь видит основной контент в браузере (DCL - DOM Content Loaded).
  • Насколько сайт оптимизирован в плане скорости загрузки.
  • Конкретные рекомендации по оптимизации. Нажимая на ссылки «Как исправить», видим адреса проблемных картинок и файлов, с которыми нужно что-то сделать (в основном, сжать).

Желательно попасть в зеленую зону - и в блоке «Скорость сайта» (Page Speed), и в блоке «Оптимизация».

Еще один хороший сервис для проверки скорости загрузки, правда, на английском - Pingdom . Отличительная черта - вот такие красивые графики (называются waterfall - водопад) показывают какие файлы, в каком порядке и сколько времени загружаются:

А теперь к сути:

Как ускорить сайт Шаг 1. Оптимизация картинок

Неоптимизированные картинки - самая «тяжелая» часть сайта. Поэтому работа с картинками может дать значительный прирост к скорости.

На что смотрим:

    Размер картинок (ширина и высота)

    Если вы отсняли товар и получили фотографии шириной около 5000 пикселей, можете смело уменьшать ширину до 1600, в большинстве случаев этого будет достаточно. Исключением будут те сайты (в основном, интернет-магазины), где можно рассмотреть товар с «лупой», но и там увеличенная картинка загружается не сразу, а только если человек решил воспользоваться этим инструментом.

    Вес картинок (килобайты)

    Изображения с фотоаппарата можно (и нужно) сжимать в объеме перед выкладкой на сайт. Делают это либо в Фотошопе (или другом редакторе изображений), либо через онлайн-сервисы, например, TinyPNG или Optimizilla .

    Превью к большим картинкам

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

Например, Спортмастер использует картинки товаров в трех вариантах:

Картинка для списка товаров (весит 7 Кб)

Картинка для карточки товара (весит 18 Кб)

Картинка для просмотра товара с «лупой» (весит 942 Кб)

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

При проверке скорости сайта через Google PageSpeed вы получите готовый список картинок, которые следует оптимизировать:

Шаг 2. Gzip-сжатие

Gzip - это программа для сжатия файлов на сервере (аналог zip-архивов на компьютере). При включенном Gzip сервер, перед тем как отправлять браузеру код страницы (а также скрипты, стили и прочую текстовую информацию), сперва заархивирует эти файлы. Браузер получит архив и распакует его на компьютере пользователя. Сжатая информация будет передаваться быстрее между браузером и сервером.

Как включить Gzip-сжатие:

    Если у вас есть доступ к файлу htaccess, добавьте в него такие строчки (в конец файла):


    AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
    AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
    AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
    AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml

    Если у вас не Apache, а Nginx (кто знает, тот поймет), то вам понадобится файл конфигурации nginx.conf. Дописываем код в секцию http {...} и перезапускаем сервер:

    gzip on;
    gzip_static on;
    gzip_comp_level 5;
    gzip_min_length 1024;
    gzip_proxied any;
    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;

    Если у вас нет доступа к htaccess или конфигурации сервера, напишите в техподдержку хостинга, что вам нужно включить gzip-сжатие.

Если сжатие работает, то в результатах проверки PageSpeed вы увидите (в блоке «Внедренные приемы оптимизации»):

Шаг 3. Кэширование на стороне браузера

Когда браузер загружает сайт, то он сохраняет часть информации с него (файлы стилей, скриптов, картинки) в свою собственную память (кэш, cache). Тогда на других страницах этого сайта или при повторном заходе на текущую страницу браузер не будет запрашивать эту информацию заново с сервера (что долго), а подгрузит ее из собственной памяти (что быстрее). Поэтому в настройках браузера есть кнопки «Очистить кэш», и все мы знаем сочетание клавиш CTRL+F5 (обновить страницу с очисткой кэша).

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

    Через файл htaccess (кэшируем статические файлы на 10 дней):


    ExpiresActive On
    ExpiresDefault "access plus 10 days"
    ExpiresByType image/gif "access plus 10 days"
    ExpiresByType image/jpg "access plus 10 days"
    ExpiresByType image/jpeg "access plus 10 days"
    ExpiresByType image/png "access plus 10 days"
    ExpiresByType image/svg+xml "access plus 10 days"
    ExpiresByType text/css "access plus 10 days"

    Для Nginx добавляем в конфигурацию:

    server {
    ...
    location ~* \.(jpg|jpeg|gif|png|ico|css|js|txt)$ {
    root /var/www/user/data/www/site.ru;
    expires 10d;
    }
    ...
    }

    Если к настройкам сервера доступа нет, опять же пишем в техподдержку и просим настроить кэширование статических файлов.

Аналогично списку картинок, Google PageSpeed выдает список ресурсов, для которых кэширование не настроено, а можно было бы:

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

Шаг 4. Минимизация css- и js-файлов

Минимизация - это сокращение объема файла за счет удаления пробелов, пустых строк, комментариев, использования более коротких имен переменных и т.п. Браузеру все равно, с каким файлом работать - обычным или минимизированным, а весит такой файл меньше.

Пример обычного кода:

Speedometer-wrapper {
position : relative ;
}
.speedometer-wrapper .list {
margin-top : 80px ;
margin-left : -20px ;
padding-bottom : 85px ;
}

После минимизации:

Speedometer-wrapper {position :relative }.speedometer-wrapper .list {margin-top :80px ;margin-left :-20px ;padding-bottom :85px }

Популярные плагины и библиотеки (jQuery, Bootstrap и пр.) всегда имеют минимизированные версии своих скриптов и стилей - подключайте на сайт именно их. Например, обычная версия скрипта jQuery весит 265 Кб, а ее сжатый вариант - 85 Кб. Чувствуете разницу?

Единственный минус минификации - теряется читабельность файла. Если понадобится внести изменения в сжатый файл - сделать это будет сложно, человеку работать с таким файлом неудобно (там одна сплошная строка). Поэтому для минификации своих скриптов обычно используются дополнительные плагины к CMS - они автоматически сжимают css- и js-файлы перед загрузкой на сайт. А верстальщик при этом может спокойно работать с обычными версиями файлов.

PageSpeed и здесь заботливо показывает нам список файлов, размер которых можно уменьшить за счет минимизации:

Шаг 5. Порядок загрузки css- и js-файлов

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

Чтобы браузер мог загружать файлы сайта оптимальным образом, рекомендуется все файлы стилей (css) и шрифтов подключать в начале кода страницы (в теге ), а все файлы скриптов (js) - в конце страницы, перед закрывающим тегом .



...



...


...



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

Шаг 6. Лишние плагины или счетчики

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

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

Шаг 7. Использование CDN

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

Когда пользователь, например, из Хабаровска, хочет загрузить что-то из CDN, то он получает контент не с основного сервера (который может быть, например, в Москве), а с ближайшего к пользователю сервера (который может быть и в том же Хабаровске). Широка страна моя родная, поэтому запрос Хабаровск-Хабаровск пройдет быстрее запроса Хабаровск-Москва. Пусть на миллисекунды, но в умножении на число файлов и их размер это может дать хорошее увеличение скорости.

Как правило, CDN используют в двух случаях:

  • Загрузка сторонних скриптов. Это все те же jQuery, Bootstrap, шрифты Web Fonts. Например, можно указать браузеру загружать их не со своего сервера, а с серверов Гугла, Bootstrap или других CDN.
  • Загрузка картинок и скриптов со своих CDN. Крупные сайты (Ozon, Avito и пр.) настраивают собственные CDN, используя либо собственные же сервера, либо (чаще) сервера CDN-сетей, например, Google Cloud или StackPath . Некоторые CMS уже включили поддержку CDN в свой функционал. Например, у Битрикса есть бесплатный модуль «Ускорение сайта (CDN)».
Шаг 8. Сокращение числа http-запросов

Чтобы браузер делал меньше обращений к серверу (а это и есть http-запросы), нужно сократить число необходимых ему файлов. Например, если у вас есть три отдельных скрипта (для слайдера, для модальных окон и для всплывающих подсказок), то можно объединить их в один файл, а потом еще и минифицировать (см. шаг 4).

Так как объединять файлы вручную не совсем удобно (если в будущем понадобится заменить один из скриптов), то обычно настраивают их автоматическое слияние. У большинства CMS для этого есть свои плагины (например, Autoptimize для WordPress).

Настроенное кэширование для браузера (шаг 3) и удаление лишних скриптов (шаг 6) тоже уменьшают число http-запросов.

Шаг 9. Оптимизация шрифтов

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

Также сократить число файлов можно, отказавшись от использования устаревших форматов. Раньше каждый шрифт загружался в форматах eot, ttf, woff, svg для корректного отображения в браузерах. Сейчас современные браузеры позволяют ограничиться только двумя форматами - woff и woff2.

Кроме того, популярные шрифты можно загружать с Google Fonts . Во-первых, это снимет нагрузку с вашего сервера. Во-вторых, файлы со шрифтами уже будут оптимизированы, это перекладывается с ваших плеч на Google (что, согласитесь, приятно).

Шаг 10. Сокращение HTML-кода

Помимо сжатия файлов стилей и скриптов (шаг 4), можно настроить минимизацию и для HTML-кода самой страницы. Думаю, это актуально для длинных страниц - статей в блогах, больших списков товаров и т.п. Для настройки стоит поискать подходящий плагин для своей CMS (например, Html Minifier для Joomla).

Шаг 11. Оптимизация работы сервера

Если у вас выделенный сервер (ваш системный администратор может управлять его настройками), можно попробовать проапгрейдить его параметры. Например, добавить оперативной памяти или заменить процессор. Также сисадмин может провести «уборку» на самом сервере - удалить неиспользуемые и обновить текущие модули.

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

Шаг 12. Оптимизация скриптов и баз данных

Один из этапов загрузки сайта - это генерация сервером итогового HTML-кода, который он отдаст браузеру. Этот код генерируется движком сайта (CMS). Если движок написан неграмотно, то он может «собирать» страницу весьма долго, делая лишние запросы к файлам и базам данных, используя «медленные» алгоритмы программирования и т.д.

Поэтому при выборе CMS для сайта рекомендуется смотреть в сторону популярных движков (Битрикс, Open Cart, WordPress, MODx и т.д.), которые зарекомендовали свое быстродействие и надежность. А так как эти системы постоянно дорабатываются (в том числе, и в плане скорости работы), то следует регулярно обновлять CMS на своем сайте.

Нет слоупокам

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

Если нужна помощь в оптимизации скорости загрузки сайта - пишите , посмотрим ваш сайт и подскажем, можно ли его ускорить.