Ускоряем загрузку сайта

20 способов ускорить загрузку сайта в 2018 году

Почему это важно

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

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

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

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

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

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

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

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

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

Увеличение скорости загрузки сайта как способ увеличить конверсию

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

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

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

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

Влияние оптимизации загрузки сайта на органический трафик

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

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

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

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

  1. росту конверсии;
  2. снижению показателя отказов (процентное соотношение количества посетителей, покинувших сайт прямо со страницы входа или просмотревших не более одной страницы сайта);
  3. подъему в поисковых системах.

20 способов как ускорить загрузку сайта

1. Сократить число HTTP запросов

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

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

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

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

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

2. Объединить и минифицировать CSS и JS-файлы

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

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

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

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

3. Реализовать асинхронную загрузку CSS и JS

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

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

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

4. Настроить отложенную загрузку javascript-кода

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

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

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

5. Ускорить получение первых байтов (TTFB)

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

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

6. Сократить время ответа сервера

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

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

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

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

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

8. Провести анализ сжатия страниц

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

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

9. Включить сжатие страниц

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

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

10. Настроить параметры кэширования

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

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

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

11. Сжать все изображения и видео

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

12. Использовать CDN

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

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

13. Использовать облачные сервисы

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

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

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

14. Сократить число inline-стилей

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

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

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

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

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

15. Реализовать отложенную загрузку изображений, видео, iframe и контента

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

Читать еще:  Что такое аллегория на примерах из литературы

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

16. Провести анализ кода и сократить число используемых плагинов

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

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

17. Уменьшить число редиректов

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

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

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

18. Сократить число внешних скриптов

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

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

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

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

19. Провести аудит быстродействия мобильной версии сайта

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

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

Как увеличить скорость загрузки сайта — практические советы

Здравствуйте, дорогие друзья! Хотите, поделюсь с вами надежными способами увеличить посещаемость сайта и сделать так, чтобы поисковые системы больше его любили? Сегодня поговорим о критически важном факторе — таком как скорость загрузки. Как увеличить скорость загрузки сайта и сделать его более комфортным для посетителей? Давайте разбираться!

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

Прежде всего разберемся с факторами, которые непосредственно влияют на скорость загрузки сайта на WordPress, на Joomla, на dle на Битрикс и на любом другом движке.

● Скорость работы веб-хостинга. Я уже много раз повторял на страницах моего блога, как важно пользоваться услугами надежной веб-хостинговой компании. Beget, Timeweb, Sprinthost — помните, мой обзор? Выбирать есть из чего. Никакие секретные приемы по увеличению скорости html страниц вам не помогут, если у вас медленный хостер.

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

Что же делать? Если вам надо вставить счетчик сайта, просто зайдите в html код и вставьте, не надо скачивать специальный плагин для этого.

● Чистота кода. Конечно, этот пункт будет понятен в основном специалистам, но если вкратце, то надо следить за тем, насколько легкой или тяжелой является та или иная тема, которую вы используете. Например, вы можете использовать специальный графический редактор по типу Adobe Muse или другого.

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

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

Продвинутые способы

Теперь приступим к более тщательной борьбе с тормозами.

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

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

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

В этом случае значительно снижается нагрузка на сервер. Если в случае с Opencart или Bitrix эту проблему приходится решать вручную (в большинстве случаев), то для WordPress существуют специальные плагины. Например, я могу рекомендовать Hyper Cache.

● Сократите размер кода, написанного на JavaScript и CSS. Тут идея очень простая. JavaScript — это серверный язык, а значит, код исполняется на сервере. Чем больше кода, тем больше загрузка процессора и потребление оперативной памяти. CSS отвечает за визуальное представление страниц сайта.

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

● Удалите ненужные изображения и в целом уменьшите объем всей графики на сайте. Простой пример. Предположим, в header (это верхняя часть сайта) вы хотите использовать какое-то красивое изображение. Оно состоит из логотипа, фото авто и графического меню. Всего — три изображения. Все выводится и работает отлично.

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

● Уменьшите разрешение графических файлов и их итоговый объем. Это очень простой способ. Скачайте свою страничку с помощью любимого браузера и посмотрите, какой объем она занимает. Если несколько мегабайт (а особенно если больше 5), значит, стоит призадуматься. Дело в том, что 5 мегабайт для 10 тысяч пользователей — это 50 тысяч мегабайт, или десятки гигабайт. В месяц можно и на терабайт заскочить. Тут действительно хороший выделенный сервер понадобится.

Чтобы оптимизировать загрузку изображений, можно перевести их из формата png в jpg. Да, это может отрицательно сказаться на качестве, особенно если у вас изображение с прозрачным фоном, но не воспринимайте все так буквально. Форматы ведь бывают разные!

● Используйте сжатие. Я не буду особо распространяться, потому что это — вопрос достаточно сложный. Хочу лишь обратить ваше внимание на то, что существует такая технология как gzip. С ее помощью можно значительно ускорить загрузку сайта, просто поставив один плагин и настроив его.

Разные способы для разных движков

Когда речь заходит об оптимизации разных сайтов, важно понимать, что не все зависит от вас. Да, если вы купили доменное имя, сориентировали его на купленный вами же сервер, тогда действительно, решение данных вопросов — только ваша ответственность. Но многие пользователи создают собственные странички на Тильде или на Wix, или на WordPress.org.

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

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

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

А теперь мы подобрались к главному вопросу. Чем мерять будем-то?

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

Почему так важно пользоваться именно Гуглом? Потому что это лидирующая поисковая система в мире, и уж если Гугл скажет, что с вашим сайтом все ОК, ему будут вторить и другие повторялки. Если же какой-то малоизвестный сервис поставил вам условные «пять баллов», а Гугл пишет, что надо увеличить скорость ответа от сервера, значит, надо продолжать оптимизационные действия.

Все гениальное просто! — это самый лучший принцип решения технических проблем. Я вам настоятельно рекомендую обратить внимание на такой параметр как скорость ответа сервера. Вы как вебмастер имеете 100%-ое простое влияние на него. Если Гугл вам подсказал, что со скоростью что-то не так, то один из вариантов — это долго и нудно копаться в коде, удалять плагины, сносить весь сайт и тестировать доступность голой html страницы, а другой, и очень простой, — просто перенести свой сайт на сервера другой веб-хостинг компании.

Читать еще:  Платный опрос — заработок на опросах с выводом денег

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

Правильная публикация статей

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

● Например, почти каждая современная статья сопровождается как минимум одним фото. А знаете ли вы, что качественное изображение, снятое на зеркальный фотоаппарат, может занимать более 5 Мегабайт? Если вы добавите его в свой пост, то все будет отображаться, как положено, но при этом серверу сначала надо будет его загрузить, потом сжать, и только после этого продемонстрировать пользователю.

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

● Второй момент, на который стоит обратить внимание, — это чистота текста. Старайтесь, чтобы в тексте не было мусора (он часто встречается, когда вы просто копируете содержимое с какого-нибудь редактора, например, с того же Microsoft Word).

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

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

7 советов, как ускорить загрузку сайта

Предисловие

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

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

Заключение

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

10 советов о том, как увеличить скорость загрузки страницы

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

Читать еще:  Kwork — как сделать отличный логотип для сайта за 2 дня и 500 рублей

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

1. Уменьшите количество HTTP-запросов

80% загрузки страницы ориентировано на загрузку компонентов страницы: скриптов, фотографий, файлов CSS, flash. Спецификация HTTP/1.1 советует, чтобы браузеры параллельно загружали не более 2-х компонентов веб-страницы с одного хоста. Уменьшив количество этих компонентов мы уменьшаем количество HTTP-запросов к серверу и как результат увеличиваем скорость загрузки страницы.

Но как уменьшить количество запросов к серверу не затрагивая внешний вид страницы?

На самом деле есть несколько способ.

  • Использование CSS-спрайтов. CSS-спрайт — это комбинированное изображение, которое содержит в себе несколько маленьких изображений, которые в нужный момент для нужного элемента страницы вырезаются используя свойства: background-image и background-position.
  • Использование Inline-картинок. Inline-картинки используют URL-схему data: для встраивания картинки в саму страницу. Это, однако, увеличит размер HTML-документа. Встраивая inline-картинки в ваши таблицы стилей вы добьетесь уменьшения запросов к серверу, а размер HTML останется прежним.
  • Объединение нескольких файлов в один. Если у Вас на страничке подключается больше одного css- или js-файла, то Вы можете объединить их в один. Это очень простой, но действенный способ уменьшения количества http-запросов на сервер. О том, как это делать на лету я писал в своей заметке здесь «Разгони свой сайт. Статическое сжатие css- и js- файлов на лету»

2. Помещайте CSS файлы в начале страницы

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

Если размещать CSS файлы внизу страницы, то это не позволяет многим браузерам рендерить страницу постепенно. Это объясняется тем, что браузер «не хочет» перерисовывать элементы, у которых после загрузки страницы может измениться стиль. Так что все свои CSS файлы всегда подключайте в верхней части страницы в секции HEAD.

3. Помещайте javascript в конец страницы

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

Кроме того, внешние .js-файлы блокируют параллельную загрузку. Спецификация HTTP/1.1 советует, чтобы браузеры параллельно загружали не более 2-х компонентов веб-страницы с одного хоста. Таким образом, если картинки для вашего сайта располагаются на разных хостах, вы получите более 2-х параллельных загрузок. А когда загружается скрипт, браузер не будет начинать никаких других загрузок, даже с других хостов.

4. Минимизируйте css и javascript

Минимизация файла — это удаление из кода всех несущественных символов с целью уменьшения объема файла и ускорения его загрузки. В минимизированном файле удаляются все комментарии и незначащие пробелы, переносы строк, символы табуляции. Здесь все просто. Чем меньше объем файла, тем меньше времени понадобится браузеру на его загрузку. А минимизировать Ваш код помогут вот эти 24 онлайн-сервиса для сжатия и оптимизации CSS кода
5. Используйте поддомены для параллельного скачивания

Как я уже говорил Выше, согласно спецификации HTTP/1.1 на браузеры накладываются ограничения на количество одновременно загружаемых компонентов сайта, а именно не более 2-х компонентов с одного хоста. Поэтому если на Вашем сайте много графики, то ее лучше вынести на отдельный поддомен или поддомены. Для Вас это будет один и тот же сервер, а для браузера — разные. Чем больше поддоменов Вы создадите, тем больше файлов браузер сможет одновременно загрузить и тем быстрее загрузится вся страница сайта. Вам остается лишь изменить адрес картинок на новый. Очень простой, но действенный способ.

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

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

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

Данный фрагмент файла конфигурации Веб-сервера Apache проверяет наличие модуля mod_expires и, если модуль mod_expires доступен, включает отдачу HTTP-заголовков Expires, которые устанавливают срок хранения перечисленных выше объектов в кэше браузеров и прокси-серверов равный одному году с момента первой загрузки. Установив такой срок жизни кэша браузера, может возникнуть сложность с обновлением файлов. Поэтому если Вы изменили содержимое css или javascript-файла и хотите, чтобы эти изменения обновились в кэше браузера, то необходимо изменить название самого файла. Обычно в название файла добавляют его версию, например так: styles.v1.css

7. Используйте CDN для загрузки популярных JavaScript библиотек

Если на Вашем сайте используется популярный javascript фреймворк, например jQuery, то для его подключения лучше использовать CDN.

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

Одним из таких CDN — является Google Libraries. Это CDN для популярных open-source JavaScript библиотек. Загрузка популярных javascript фреймверков с Google Libraries позволяет увеличить скорость загрузки страницы и снизит траффик на ваш сервер.

О том как загружать jQuery с репозитория Google я писал вот в этой заметке «Увеличиваем скорость загрузки страницы загружая jQuery с репозитория Google».

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

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

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

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

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

9. Не масштабируйте изображения

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

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

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

Начиная с версии протокола HTTP/1.1, веб-клиенты указывают, какие типы сжатия они поддерживают, устанавливая заголовок Accept-Encoding в HTTP-запросе.

Accept-Encoding: gzip, deflate

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

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

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

Если данный способ сработал, то отлично, если нет, то можно попробовать вот такой вот код:

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

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

Ссылка на основную публикацию
Adblock
detector