Как сделать загрузку страниц быстрее. Как значительно ускорить загрузку страниц в браузере. Объединить и минифицировать CSS и JS-файлы

«Распределили часть контента (изображения, 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) и в результате оптимизируем то что нет смысла оптимизировать и забываем о том что следовало бы оптимизировать или как добится максимального результата при своей оптимизации.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

new Imager({ availableWidths: });

Специальные методы упрощения кода уменьшают размеры элементов, сокращая названия функций и удаляя мусор. Можно дополнительно улучшить 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», где можно выбрать подходящие вам функции: объединение файлов, создание сжатых копий и т. п.

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

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

Из множества сервисов, которые я использовал для проверки скорости загрузки страниц сайта, мне понравился сервис: Pingdom.com , который наглядно демонстрирует каждую деталь сайта и скорость загрузки необходимой страницы, например для главной страницы блога сайт, при выборе в настройках — «Amsterdam, Netherlands», скорость загрузки сайта будет составлять 1,08 секунды, что не так уж и плохо.
Ниже представлена вся необходимая информация, которая предоставляется сервисом по скорости соединения, ожидания и ответа как сторонних серверов, данные с которых запрашиваются, так и внутреннего сервера.

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

На самом деле все проще чем кажется на первый взгляд, но хочу отметить тот момент, что при использовании Google PageSpeed Insights не видно всех моментов, которые могут ухудшать скорость загрузки страниц сайта, но он вполне подойдет, выполнив все пункты по требованию сервиса, вы сможете значительно улучшить скорость. Для более подробного анализа факторов влияющих на скорость загрузки сайта, необходимо воспользоваться браузером Mozilla Firefox с дополнением Firebug и плагином PageSpeed для Firefox .

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

Итак, после установки плагина и дополнения firebug в правом верхнем углу появится кнопка с изображением жука.

Перейдите на сайт, анализ для которого необходимо выполнить, нажмите на кнопку с жуком. Перед вами откроется окно, последняя вкладка которого будет называться Page Speed.После нажатия на вкладку появится окно с кнопкой Analyze Performance , необходимо нажать на кнопку и ожидать пока страница проанализируется. Далее Перед Вами появится список всех рекомендаций, которые требуется выполнить для улучшения скорости загрузки страниц сайта. После недолгих манипуляций над содержимым страниц блога, я добился результата по PageSpeed = 94 из 100 возможных баллов, что весьма неплохо, можно конечно и улучшить результат, но пока это не критично, главное, что все основные мешающие моменты устранил.

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

Итак, давайте теперь рассмотрим основные рекомендации, которые требуется выполнить для оптимизации скорости загрузки страниц сайта:

Включите сжатие — для настройки сжатия xml, css, js и html в формат gzip требуется добавить следующий код в файл.htaccess на ftp сервере сайта:

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0 no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html mod_gzip_on Yes mod_gzip_item_include file \.js$ mod_gzip_item_include file \.css$

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

Используйте кэш браузера , здесь же указывается валидатор кэша и выполняется пункт Укажите валидатор Кэша – необходимо использовать кэширование на стороне браузера, т.е. клиента, требуется добавить в.htaccess следующие строки кода:

Header set Cache-control: private FileETag MTime Size ExpiresActive on ExpiresDefault "access plus 7 day" BrowserMatch "MSIE" force-no-vary BrowserMatch "Mozilla/4.{2}" force-no-vary

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

Оптимизируйте изображения – для того, чтобы уменьшить размер страниц и соответственно увеличить скорость загрузки, потребуется воспользоваться принципом копирования всех изображений сайта с ftp сервера и пакетной загрузки для дальнейшей обработки в сервис http://www.smushit.com/ , процедура достаточно долгая, если на Вашем сайте количество изображений изменяется тысячами. Могут возникнуть ошибки того, что gif файлы будут пережаты в jpg или png, при этом изменяется имя файла, требуется учесть данный момент, если есть изображения формата gif, лучше их загружать отдельно и потом править вручную. Рекомендации:

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

Отложение синтаксического анализа java-скрипт – можно запустить скрипт некоторого времени загрузки документа, воспользовавшись кодом:

function onLoadScript () { var scri = document.createElement("script"); scri.src = ""; document.body.appendChild(scri); } window.onload = function () {setTimeout(onLoadScript, )}

function onLoadScript () { var scri = document.createElement("script"); scri.src = "jq.js"; document.body.appendChild(scri); } window.onload = function () {setTimeout(onLoadScript, 2000)}

Сократить JS скрипты и CSS стили – необходимо воспользоваться сервисом: http://www.refresh-sf.com/yui/, который удаляет лишние пробелы в коде, тем самым экономит место файла.

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

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

Укажите заголовок Vary: Accept-Encoding – все файлы, открытые для кеширования должны возвращать заголовок, достаточно добавить код в.htaccess на ftp сервере:

Header set Cache-control: private Header append Vary Accept-Encoding Header set Cache-control: public

P.S.: Для сокращения количества запросов к файлам, необходимо сократить количество CSS стилей и объединить их в 1 файл, скрипты js в идеале тоже необходимо объединить в 1 файл.

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

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

Успехов Вам в оптимизации скорости страниц сайта!

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

Снижение скорости загрузки страницы на 1 секунду влечет за собой:

• уменьшение числа просмотров на 11%;
• снижение показателя удовлетворенности пользователя на 16%;
• уменьшение конверсии до 6%.

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

Пара лишних секунд времени загрузки сайта уменьшают шансы заинтересовать посетителей и осуществить продажи.

KISSmetrics провела исследование на тему того, как скорость загрузки сайта сказывается на поведении пользователей и покупателей:

• 47% пользователей ожидают, что страница откроется меньше чем за 2 секунды;
• 40% пользователей закрывают сайт, если он загружается дольше 3 секунд;
• 79% покупателей, которые остались недовольными удобством сайта, скорее всего, не будут покупать через него в дальнейшем;
• 44% интернет-покупателей расскажут своим знакомым о сайтах, которые их не удовлетворили.

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

Терпение пользователей мобильного интернета

Время загрузки сайта влияет на конверсию. Рассмотрим на примере сети Walmart.

Зависимость показателя конверсии от времени загрузки страницы

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

По итогам Walmart выявило, что уменьшение времени загрузки страницы на секунду способствует повышению конверсии до 2%.

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

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

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

Обобщая вышесказанное делаем вывод, что ускорение сайта приводит к:

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

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

Проверить, сколько HTTP запросов генерируется, можно очень просто - воспользоваться панелью разработчика браузера.

Рассмотрим процесс на примере браузера Google Chrome.

Первым шагом мы заходим на анализируемую страницу, правой кнопкой кликаем по любой пустой области страницы и выбираем в контекстном меню пункт “Просмотреть код”. В нижней части экрана откроется панель Chrome DevTools. Переходим во вкладку Network и перезагружаем страницу. Мы видим список всех запросов, статусы их ответов и время загрузки файлов.

Теперь, когда мы знаем, сколько запросов генерируется, мы можем приступить к их уменьшению.

Самый простой способ сократить количество запросов - объединить и минифицировать (сжать) HTML, CSS и JavaScript файлы. Правильнее всего поставить эту задачу разработчикам. Если нет такой возможности, можно попробовать сделать это самостоятельно.

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

В результате у нас сокращается число запросов, а из финального кода удаляются незначимые для интерпретатора символы (пробелы, табы, переносы строк и т.п.).

Все мы привыкли загружать CSS файл в HTML посредством вставки тега

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

Реализовать асинхронную загрузкуу CSS и JS часто под силу только профессиональным разработчикам. Отметим лишь то, что смотреть нужно либо в сторону использования значения preload атрибута rel в совокупности с атрибутом onload, либо подгружать стили js-скриптом.

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

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

Чтобы реализовать отложенную загрузку, а точнее обработку, такого скрипта, нам всего навсего необходимо прописать атрибут defer тегу .

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

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

Совет, скорее, для профессионалов backend-разработки. Однако чтобы вы смогли таким правильно поставить задачу программистам, не ошибившись с бюджетом, объясним вам, что будет делать профессионал своего дела.

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

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

Для небольших сайтов компаний и визиток подойдет самый простой виртуальный хостинг (shared hosting). Для интернет-магазинов, порталов - VPS/VSD. Для сайтов с большой посещаемостью нужно смотреть в сторону выделенных физических сервером (Dedicated server).

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

Проверить, включен ли у вас на сайте gzip, можно, воспользовавшись любым предложенным поисковиком сервисом по запросу “gzip test”.

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

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript

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

Что такое кэширование? Объясним на примере. Пусть каждый день ваш ребенок спрашивает у вас, сколько ему лет. Вы можете каждый раз пересчитывать возраст на основе даты рождения либо один раз посчитать и использовать это число постоянно в качестве ответа, корректируя данные в каждый день рождения.

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

Это и есть настройки параметры кэширования. Сделать это можно либо в настройках используемой вами CMS либо в файле.htaccess.

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

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

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

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

• видео на Youtube/Vimeo;
• файлы для загрузки в Dropbox/Yandex Disk/Google Drive

В большинстве случаев это бесплатно.

Задача для разработчиков. Очень часто встроенные в CMS визуальные редакторы грешат тем, что создают “грязный код”, в котором стили элементам задаются inline-методом в атрибуте style. Так, например, на странице будет несколько элементов:

Внимание! Важное объявление

Вес страницы увеличивается, скорость обработки браузером уменьшается. Правильнее использовать css-классы. В итоге у нас должно получиться:

Внимание! Важное объявление - 1

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

Сделать это нужно для изображений, видео, iframe, а иногда и для текста (например, в случае сайта онлайн-библиотеки). Как это сделать - тема отдельной статьи.

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

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

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

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

Необходимо пройтись по всем редиректам на сайте и оптимизировать эти цепочки.

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

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

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

Ранее уже было сказано, что Google при ранжировании обращает внимание на скорость загрузки сайта. Особое внимание уделяется мобильной версии.

Советуем использовать сервис Google PageSpeed Insights, с помощью которого можно быстро провести онлайн-аудит как десктопной версии сайта, так и мобильной. После аудита сам сервис предложит вам советы по оптимизации сайта.

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

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

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

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

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

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

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

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

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

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

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

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

Используя кэширование, вы можете значительно выиграть в скорости загрузки вашего сайта: когда пользователь первый раз заходит на ваш сайт, в кэше его браузера сохранятся некоторые 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)”).

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

• уже упомянутый выше 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 пользователей, а вот платная версия дает больше возможностей, в частности вы сможете самостоятельно прописать сценарий, который будут выполнять пользователи (к примеру, нажать на определенную кнопку или перейти в нужный раздел). При этом вы обязаны верифицировать то, что являетесь владельцем сайта.

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