Как ускорить загрузку сайта: 7 советов по оптимизации для начинающих
В службу поддержки King Servers часто обращаются владельцы сайтов, которые не понимают, почему их ресурсы загружаются медленно. В итоге мы решили составить простую инструкцию по оптимизации скорости загрузки для начинающих — представляем ее вашему вниманию.
Примечание: в конце статьи приведен список ресурсов для дальнейшего изучения — будем благодарны, если вы сможете дополнить его в комментариях.
Введение: как загружаются сайты
В материале под названием «Что происходит, когда пользователь вбивает адрес сайта Google.com» очень подробно описаны все процессы, связанные с посещением сайта. Если говорить кратко, то между тем, как посетитель сайта вобьет в адресную строку его URL и получит ответ, в общем виде проходит несколько этапов:
Первый шаг: понять, что тормозит
Бывший инженер Facebook и основатель стартапа Pave Джастин Митчел в треде на Quora так описывал начало работы по оптимизации загрузки сайта:
Прежде чем начинать чинить, надо узнать, что сломалось. Если ваш сервер генерирует страницу 5 секунд, то использование CDN не поможет, если у вас на каждый просмотр страницы загружается по 10 мегабайт картинок, добавлять memcache в бэкенд-архитектуру тоже бессмысленно.
Существуют различные инструменты анализа производительности сайтов. К примеру, можно использовать бесплатный сервис от Google, который анализирует производительность сайта и выдает рекомендации по ее улучшению:
Существует несколько важных метрик быстродействия сайта. Одна из них — это время до первого байта (TTFB — time to first byte), которая показывает, как быстро браузер начинает получать данные от сервера после отправки запроса. Также важно замерять начало рендеринга страницы и время загрузки (load time).
При этом, важно анализировать не только сами показатели быстродействия, но рассматривать их применительно к посещаемости конкретной страницы. Если страница не пользуется популярностью у пользователей, то неважно, как быстро она загружается.
Вот какие шаги по серверной оптимизации для ускорения загрузки сайта применяют чаще всего.
Расширение ресурсов сервера
Если медленно работает сам сервер, то нет никакого смысла тратить время и силы на клиентскую оптимизацию. В случае небольших проектов при росте нагрузки сайт часто начинает тормозить именно из-за того, что ему перестает хватать ресурсов хостинга — например, CPU и дисков.
В качестве первого шага логично рассмотреть покупку дополнительных ресурсов. Однако этот метод работает до определенного момента, а затем затраты на оплату услуг хостинга могут вырасти так сильно, что проще и выгоднее будет использовать другие способы оптимизации загрузки. Вот, какими они могут быть.
Кэширование
Один из инструментов ускорения сайтов является серверное кэширование. Как сказано выше, процесс от перехода по ссылке на сайт, до отображения страницы в браузере может включать множество этапов:
Некоторые элементы можно закешировать и не загружать каждый раз при заходе на сайт. Это позволяет серьезно сократить время загрузки:
При всех плюсах — это не единственный стоящий метод оптимизации. Во-первых, закешировать можно не все, во-вторых, думать нужно и том, как в будущем сбрасывать кэш, в третьих, этот метод помогает ускорить сайт для тех пользователей, которые на нем уже были, и ничем не помогает новым посетителям.
Сжатие изображений
Все всегда говорят о необходимости сжатия изображений, но начинающие владельцы сайтов часто не владеют всеми тонкостями и могут использовать для масштабирования больших картинок CSS. В итоге браузер пользователя все равно загружает изображение в полном размере.
Существует несколько инструментов для компрессии изображений, среди которых TinyPNG, Kraken.io и JPEGmini. Кроме того, имеет смысл попробовать включить конвертацию изображений в формат WebP. Он был разработан Google, и по данным компании такие изображения на 26% легче PNG-файлов и на 25-34% меньше JPEG-картинок.
К сожалению, на данный момент формат WebP поддерживается далеко не всеми браузерами — пока среди них только Chrome и Opera.
Еще один «инфраструктурный» метод снижения задержек — использование сетей доставки контента (content delivery network, CDN). Такие сети состоят из серверов в разных точках мира. При подключении сайта к сети на входящих в нее серверах создают копии файлов веб-ресурса, а затем пользователю отдают данные с ближайшего к нему сервера — в итоге скорость загрузки увеличивается.
Использование Gzip
Gzip — простой метод компрессии файлов сайта для экономии ресурсов канала и ускорения загрузки. С помощью Gzip файлы сжимаются в архив, который браузер может загрузить быстрее, а уже затем распаковать и отобразить контент.
Оптимизация кода сайта
Существует целый ряд лучших практик создания кода сайта, которые позволяют оптимизировать его работу без малейших затрат. Прежде всего, специалисты советуют размещать CSS-код в начале страницы, а скрипты помещать в ее конец. Это полезно, потому что таким образом у браузера появляется возможность начать отрисовывать страницу еще до запуска всех скриптов — они могут выполняться совсем не быстро.
Также стоит избегать инлайн-CSS и JS-кода. В таком случае браузеры будут кэшировать эти внешние ресурсы, что позволит сэкономить время загрузки. Также JS и CSS следует минифицировать – сделать это можно с помощью инструментов вроде JSMIN, YUI Compressor и Packer.
Использование связки Nginx+Apache
Для увеличения скорости загрузки страниц можно использовать связку Apache и Nginx. Это два самых распространённых веб-сервера в мире, популярность объясняется мощью Apache и скоростью Nginx. Помимо плюсов, у каждого инструмента есть и свои недостатки: например, в Apache есть ограничения памяти сервера, в то время как Nginx, эффективный для статических файлов, нуждается в помощи php-fhm или аналогичных модулей для загрузки динамического контента.
Тем не менее можно и даже нужно объединить два веб-сервера для большей эффективности, используя Nginx, как статический фронтенд и Apache — как бэкенд. Такое решение положительно скажется на скорости загрузки страниц сайта.
Заключение: полезные ресурсы и статьи по теме оптимизации работы сайтов
Ниже мы собрали ряд полезных статей на русском и английском языке:
Как ускорить сайт или факторы, влияющие на загрузку сайта
Цель: Дать базовые понятия о факторах, влияющих на скорость загрузки сайта. Разобрать каждый этап загрузки. Дать понятие о способах ускорения за счёт оптимизации каждого фактора загрузки, на который можно повлиять.
Сразу хочу пояснить, что не буду давать тут каких-либо конфигов и команд, статья предназначена для представления картины загрузки сайта в целом, а далее уже, обнаружив проблемное место, человек сможет хотя бы погуглить в нужном направлении.
Целевая аудитория: владельцы сайтов, web-студии, специалисты и любители. Постараюсь написать статью таким образом, чтобы она была доступна в понимании всем.
Причина написания статьи кроется в том, что я заметил, что многие даже не понимают истинных причин тормозов их сайтов и решил написать эту статью, чтобы человек сам смог прочитать и понять, чего же ему не хватает. На загрузку сайта влияет очень много факторов, на большую часть из них мы можем повлиять; остальные нам просто нужно учитывать.
Мощность и качество устройства клиента, а так же скорость его интернета и удалённость от локации сервера
Мы можем купить клиенту нормальный компьютер и подключить ему высокоскоростной интернет и более не будем испытывать проблем с этим фактором (конечно же, я шучу). Хотя я бы определённо чаще посещал сайты, владельцы которых обновляли бы мне компьютер и оплачивали интернет. Кроме шуток, что мы на самом деле можем сделать, если у клиента слабый интернет и маломощное устройство?
1. Расположить свой сайт в дата-центре, который находится в непосредственной близости от потенциальных клиентов сайта и убедиться, что он предоставляет достаточно широкий канал под планируемую нагрузку. Проще говоря, выбрать хороший хостинг. Многие недооценивают важность этого пункта, напрасно недооценивают.
2. Чем слабее устройство, тем дольше оно создаёт новые соединения с сервером, а значит, нам нужно сократить количество этих соединений. Зачастую владелец сайта даже не представляет, как тяжело грузится его сайт, и думает, что проблемы тормознутости явно не из-за сайта, а просто у клиентов медленный интернет. Нужно учитывать, что вы как владелец находитесь на своём сайте чаще других и всё содержимое сайта уже давно закэшировано браузером, а значит не подгружается при каждом переходе по страничкам(если конечно у Вас настроено кэширование статики в браузере клиента), а берётся из кэша. Соответственно не только экономится трафик, не нагружая каждый раз Ваш канал интернета, но и не создаётся соединений для загрузки этих файлов.
Количество соединений, этапы загрузки и вес страницы вы можете увидеть в инструментах разработчика браузера. В Google Chrome для того, чтобы открыть инструменты разработчика достаточно на страничке кликнуть в любое место правой клавишей, нажать «Просмотреть код» и там перейти в раздел Network.
Загрузку можно разделить на несколько этапов, каждый этап загрузки страницы вашего сайта важен.
1. Время ответа сервера. Время выполнения этого этапа загрузки обычно называют «временем ответа сервера». Теперь расскажу, что происходит за это время и как это время можно сократить, если оно у вас запредельное и вообще, какое время ответа сервера считать запредельным.
Разобьём этот промежуток на подпункты:
1.1 Отправка запроса браузером клиента.
Скорость интернета и мощность устройства клиента, а также удалённость сервера, на котором расположен ваш сайт, от клиента и его загруженность — вот факторы, которые могут повлиять на этот этап.
Далее до того момента, как сервер отправит готовую страничку в ответ, проходит несколько этапов, и для каждого конкретного сайта этапы могут отличаться. Я возьму в пример сайт на php с БД MySQL.
1.2 Запрос принимается web-сервером, он находит в списке виртуальных хостов тот, что подойдёт под запрос и производит обработку виртуального хоста, в нашем примере сайт на php, значит web-сервер обратится к php для генерации странички, тот в свою очередь для наполнения странички данными обратится в БД. После формирования странички она будет передана web-сервером браузеру клиента.
Очень важную роль играет кэширование на каждом этапе, кэширование на уровне web-сервера, кэширование на уровне php (opcache), кэширование запросов в БД (memcache), могут быть и другие варианты кэширования, я привёл эти как наиболее распространённые. Это как раз тот этап на который Вы можете повлиять и этому этапу нужно уделить время.
Вот способы его ускорения.
Хочу сделать поправку, у меня на скрине ответ сервера для сайта Хабра равен 3,48 с — это плохое время, но Хабр тут по сути не виноват. У меня 3G интернет посредственного качества. Поэтому конкретно этот этап загрузки рекомендую отслеживать при помощи сервиса. Я использую для этого сервис проверки ответа сервера от Яндекс.
Код статуса HTTP должен быть 200.
Ответ сервера тут заметно меньше, чем на моём 3G интернете. В идеале время ответа сервера должно стремиться к нулю, но как минимум он не должен превышать 200 мс, хотя это лично мой критерий. Хотя нет, не только мой. Google PageSpeed если я не ошибаюсь тоже следит, чтобы ответ сервера не превышал 200 мс и, если сайт превышает рекомендованное время, то предупреждает, что нужно сократить ответ сервера.
Ну и в самом низу мы можем увидеть, что ответ сжат при помощи gzip.
Хабр прошёл первый этап загрузки на пятёрочку (нет-нет, я вовсе не подлизываюсь).
Те же, чьи сайты тоже прошли эти требования могут читать дальше, ну а остальным стоит задуматься над моими рекомендациями и продолжить чтение статьи после того, как доработаете первый этап.
2. DOMContentLoaded — именно так этот этап загрузки страницы называется в инструментах разработчика, а если по-простому, это тот самый момент когда визуальная загрузка страницы закончена.
На что тут нужно обратить внимание.
2.1 Количество соединений — у Хабра их много, если их много и у вас, стоит задуматься над сокращением количества этих соединений. Как я уже писал выше, чем больше соединений, тем тем больше требуется ресурсов для их открытия, а это неплохая нагрузка, особенно на слабые девайсы и, кстати, на сам сервер в том числе.
Как же их сократить? В http/1.0 и http/1.1 для каждого отдельного файла создаётся отдельное соединение, значит наша задача сократить количество подгружаемых файлов на страничке.
Вот тут наглядно видно на сколько меньше соединений создаётся при использовании http/2
2.2 Вес страницы и элементов, подгружаемых с неё.
Модуль для web-сервера PageSpeed. Он есть и для nginx — ngx_pagespeed и для apache2 — mod_pagespeed. О том что он может делать, лучше подробнее почитать в официальной документации, его настройки очень гибкие. Я только отмечу, что он способен выполнять конкатенацию на лету что поможет сократить количество соединений и он же отлично жмёт контент, сокращая вес странички и её содержимого.
На этом этапе я могу поставить Хабру твёрдую 4 и то только за отсутствие http/2, хотя я бы наверное ещё сократил объём подгружаемых элементов и сделал конкатенацию.
Этот этап загрузки странички в идеале не должен превышать 2-3 сек(хотя предела совершенству нет конца и у меня есть клиенты, которые хотят быстрее даже при скорости загрузки меньше 1сек). Если у вас это время больше, вам стоит задуматься над рекомендациями, которые я дал выше.
3. Load — это тот момент, когда колёсико браузера перестало крутиться, то есть произошла полная загрузка страницы. Это менее критичный этап загрузки и он зачастую затормаживается сторонними чатами для общения с клиентами на сайте и прочими второстепенными элементами. Если вы выполните рекомендации, которые я дал выше, то этот этап тоже станет быстрее. Ещё хотел бы отметить что если у вас не высоконагруженный проект и при этом у вас VPS, VDS или физ. сервер, постарайтесь, чтобы вся статика грузилась только с вашего сервера. Размещение статики на сторонних сайтах и в CDN принесёт пользу только при высоких нагрузках, а для не нагруженных сайтов сыграет только в минус.
4. На этот этап можно не смотреть вообще, так как по сути страничка загружена и тут браузер всегда будет что-то подгружать, общаясь с сайтом.
5. Данной цифрой на скриншоте я обозначил место, где отображается количество загружаемых элементов на страничке и вес странички со всеми элементами. Нужно учитывать что если для ПК не проблема загрузить страничку в 2,5 Мб, то для мобильного браузера со слабым 3G это становится более проблематично. В частности у меня 3G интернет и Хабр у меня грузится не так быстро как другие сайты. Для мобильных устройств в идеале, чтобы страничка весила меньше 1 Мб. Тут или сокращать размер всего контента на страничках или делать мобильную версию.
Плюсы загрузки контента со стороны:
Надеюсь, данная статья оказалась для вас познавательной.
Топ-10 советов о том, как увеличить скорость загрузки страницы
Я думаю ни для кого не секрет, что скорость загрузки страницы влияет на множество факторов. Если кто-то не в курсе, то вкратце скажу следующее, что скорость загрузки влияет не только на то, дождется ли посетитель, когда загрузится Ваш сайт, но и на SEO оптимизацию. Ведь на сегодняшний день уже многие поисковые системы при ранжировании сайтов, начали учитывать скорость загрузки страницы. Поэтому чем быстрее будет грузиться Ваш сайт, тем больше посетителей Вы можете получить с поисковых систем, а, следовательно, и больше денег на этом заработать.
Поэтому в этой статья я решил собрать топ-10 советов о том, как же можно увеличить скорость загрузки веб-странички и сайта в целом. Статья не претендует на гениальность и рассчитана на новичков.
1. Уменьшите количество HTTP-запросов
80% загрузки страницы ориентировано на загрузку компонентов страницы: скриптов, фотографий, файлов CSS, flash. Спецификация HTTP/1.1 советует, чтобы браузеры параллельно загружали не более 2-х компонентов веб-страницы с одного хоста. Уменьшив количество этих компонентов мы уменьшаем количество HTTP-запросов к серверу и как результат увеличиваем скорость загрузки страницы.
Но как уменьшить количество запросов к серверу не затрагивая внешний вид страницы?
2. Помещайте CSS файлы в начале страницы
Помещая подключение к css файлам в хедере страницы мы получаем постепенный рендеринг страницы, т.е. страница будет загружаться постепенно — сначала заголовок, потом лого наверху, навигация и т.д. – а это в свою очередь служит отличным индикатором загрузки страницы для пользователя и улучшает общее впечатление от сайта.
Если размещать CSS файлы внизу страницы, то это не позволяет многим браузерам рендерить страницу постепенно. Это объясняется тем, что браузер «не хочет» перерисовывать элементы, у которых после загрузки страницы может измениться стиль. Так что все свои CSS файлы всегда подключайте в верхней части страницы в секции HEAD.
3. Помещайте javascript в конец страницы
Помещая javascript-файлы вниз страницы мы позволяем браузеру загрузить страницу с контентом в первую очередь, а уже потом начать загрузку javascript-файлов. Если же Ваш сайт идет в ногу со временем и содержит все возможные интерактивные «примочки», то этих javascript-файлов может быть несколько и весить они могут несколько сотен килобайт, поэтому перед загрузкой страницы заставлять пользователя ждать пока загрузятся все Ваши javascipt-файлы губительно.
4. Минимизируйте css и javascript
Минимизация файла — это удаление из кода всех несущественных символов с целью уменьшения объема файла и ускорения его загрузки. В минимизированном файле удаляются все комментарии и незначащие пробелы, переносы строк, символы табуляции. Здесь все просто. Чем меньше объем файла, тем меньше времени понадобится браузеру на его загрузку. А минимизировать Ваш код помогут вот эти 24 онлайн-сервиса для сжатия и оптимизации CSS кода
5. Используйте поддомены для параллельного скачивания
Как я уже говорил Выше, согласно спецификации HTTP/1.1 на браузеры накладываются ограничения на количество одновременно загружаемых компонентов сайта, а именно не более 2-х компонентов с одного хоста. Поэтому если на Вашем сайте много графики, то ее лучше вынести на отдельный поддомен или поддомены. Для Вас это будет один и тот же сервер, а для браузера – разные. Чем больше поддоменов Вы создадите, тем больше файлов браузер сможет одновременно загрузить и тем быстрее загрузится вся страница сайта. Вам остается лишь изменить адрес картинок на новый. Очень простой, но действенный способ.
6. Используйте кэш браузера
Кеширование становится крайне важным для современных веб-сайтов, которые используют обширное подключение JavaScript и CSS. Дело в том, что когда посетитель зашел на Ваш сайт в первый раз, то браузер выполнит загрузку всех javascript и css-файлов, также загрузит всю графику и флэш, однако правильно выставив HTTP-заголовок Expires, вы сделаете компоненты страницы кешируемыми. Таким образом, когда посетитель зайдет на Ваш сайт снова или перейдет на следующую страницу Вашего сайта, в кэше его браузера уже будут находится некоторые нужные файлы и браузеру не потребуется загружать их снова. Отсюда и выигрыш в скорости загрузки сайта.
Данный фрагмент файла конфигурации Веб-сервера 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. Оптимизируйте ваши изображения
9. Не масштабируйте изображения
10. Используйте Gzip- сжатие
Как показали проведенные исследования, gzip-сжатие текстового файла «на лету» в 95–98% случаев позволяет сократить время на передачу файла браузеру. Если хранить архивированные копии файлов на сервере (в памяти proxy-сервера или просто на диске), то соединение в общем случае удается освободить в 3-4 раза быстрее.
Начиная с версии протокола HTTP/1.1, веб-клиенты указывают, какие типы сжатия они поддерживают, устанавливая заголовок Accept-Encoding в HTTP-запросе.
Accept-Encoding: gzip, deflate
Если веб-сервер видит такой заголовок в запросе, он может применить сжатие ответа одним из методов, перечисленных клиентом. При выдаче ответа посредством заголовка Content-Encoding сервер уведомляет клиента о том, каким методом сжимался ответ.
Переданные таким образом данные меньше первоначальных примерно в 5 раз, и это существенно ускоряет их доставку. Однако здесь есть один недостаток: увеличивается нагрузка на веб-сервер. Но вопрос с сервером всегда можно решить. Так что не будем обращать на это внимание.
Если данный способ сработал, то отлично, если нет, то можно попробовать вот такой вот код:
Но опять таки, данный код работает не на всех серверах, поэтому лучше обратиться в службу поддержки Вашего хостинг-провайдера и уточнить этот вопрос.
Ну вот собственно и все, что я хотел рассказать. В данной статье я постарался перечислить все основные способы клиентской оптимизации для увеличения скорости загрузки веб-страницы. Кроме клиентской оптимизации существует еще и серверная оптимизация. Но это уже тема для отдельной статьи.
Если что-то упустил или у Вас есть, что добавить – пишите свое мнение в комментариях ниже к этому посту. Спасибо за внимание!
Как увеличить скорость загрузки сайта?
Все без исключения владельцы интернет-ресурсов мечтают о большой посещаемости и успешной монетизации своих проектов. Однако удается это, к сожалению, не всем.
Хотите попасть в число избранных и достичь поставленных целей?
В таком случае придется позаботиться о многих нюансах: не только разработать концепцию, выбрать подходящий дизайн, разместить полезный контент, но и увеличить скорость загрузки сайта.
Быстродействие сайта — один из важных показателей, который положительно влияет на ранжирование в поисковых системах и конверсию.
Например, каждая дополнительная секунда загрузки грозит бизнесу потерей 7% целевых действий! Данные анализа Amazon.
Чем плох медленный сайт? Он не просто раздражает, а еще и приводит к серьезным проблемам в решении ежедневных задач. Проблемы с отрисовкой страницы спустя 10 секунд после клика — это сигнал о поломке, который приводит к уходу пользователя, снижению продаж и ухудшению поведенческих факторов.
Существует еще и техническая сторона вопроса. Если вы упустите из внимания столь важный показатель как скорость загрузки, это приведет к увеличению необходимого объема ресурсов хостинга и, соответственно, к дополнительным затратам. То есть работа над улучшением производительности оправдана как с экономической, так и с технической точки зрения.
В этой статье вы узнаете, как повысить скорость загрузки сайта на любом движке с помощью самых эффективных способов.
Какой должно быть время загрузки?
Пользователи не любят ждать: чем медленнее работает портал, тем ниже их лояльность. Поэтому в ваших интересах разогнать сайт до скорости гепарда:).
И все-таки, на какие показатели стоит ориентироваться?
Внимание! Выше представлены обобщенные данные. Идеальные для каждого конкретного случая цифры зависят от местоположения, функционала, объема и типа сайта.
В определенных нишах вполне нормально, если страницы загружаются по 5–6 секунд. Так, широко известная компания OZON не может похвастаться быстродействием интернет-магазина, но это не мешает ей иметь высокую конверсию.
Лучше всего об оптимальном именно для вас показателе расскажет Google PageSpeed Insights. Постарайтесь получить хотя бы не менее 70–80 баллов — это средняя планка, равная 2–4 секундам. В первую очередь обратите внимание на следующие метрики:
Более детально мы рассмотрим сервис Google PageSpeed Insights чуть позже, а пока поговорим об особенностях формирования производительности сайтов.
От чего зависит скорость загрузки?
Прыть сайта можно условно разделить серверную и клиентскую часть (их впоследствии мы и будем оптимизировать).
Итак, полный цикл загрузки при первом посещении выглядит подобным образом:
Отдельные этапы иногда меняются местами или осуществляются параллельно, однако суть остается неизменной.
Пункты с первого по четвертый относятся к серверной оптимизации, а все остальные — к клиентской.
Чтобы грамотно увеличить скорость загрузки страницы, необходимо тщательно проверить каждый этап и найти ключевые источники проблем.
Учтите! Роботы Яндекса и Google не кэшируют файлы. Кэширование влияет на загрузку второй и последующих страниц, в то время как поисковые системы всегда загружают страницу как новую. А вот потенциальных клиентов сайта результат данной опции в виде быстрого открытия статьи или каталога приятно удивит, если только они не используют утилиты очистки.
На что влияет скорость загрузки сайта?
Индексация, ранжирование, конверсия — три заветных слова для каждого разработчика и вебмастера. И все эти понятия в той или иной степени зависят от такого фактора, как время загрузки проекта.
Индексация
Крайне важно сделать так, чтобы страницы попали в индекс как можно быстрее и в максимально полном объеме.
Роботы имеют определенный лимит на посещение — значит, чем дольше грузятся материалы, тем меньше страниц будет проиндексировано. А если изображения и тексты загружаются слишком долго, поисковики посчитают, что ресурс недоступен. В результате этого произойдет неиндексация новых страниц или выпадение из индекса ранее проиндексированных.
Совет здесь один: желаете избавиться от проблем с индексацией? Пора увеличить скорость загрузки сайта!
Ранжирование
Быстродействие веб-проекта считается одной из 200 метрик, влияющих на ранжирование ресурсов в поисковой выдаче. По сути, оно представляет собой неотъемлемую часть юзабилити — удобства сайта для пользователей.
Сейчас, когда поведенческие факторы играют первостепенную роль, это особенно важно. Некоторые читатели не захотят долго ждать загрузку и просто закроют страницу, что поисковые системы зачтут за отказ. Чем больше количество отказов, тем ниже будут ваши позиции в результатах поисковой выдачи.
Обычно при низкой скорости загрузки, поисковики действительно уменьшают рейтинг сайта. При этом даже невероятная прыть не является залогом улучшения позиций, так как роботы оценивают ресурсы комплексно, с учетом всех показателей. Уже неоднократно замечено, что быстрые порталы получают преимущество лишь по сравнению с медленными аналогами. Если же сравнивать их с проектами, имеющими среднее время загрузки, разница будет ничтожной.
Важно! Согласно исследованиям американской компании MOZ, четкая взаимосвязь между скоростью полной загрузки страницы и ее позицией в «Гугл» отсутствует. А вот быстрота получения первого байта (показатель Time To First Byte) 100% влияет на ранжирование: чем резвее ответ сервера, тем выше сайт в выдаче.
Конверсия
Давно доказано, что «торможение» интернет-площадки сокращает продажи и приводит к отказу от услуг. В таком случае неважно, насколько хороший у вас контент или заманчива реклама — пользователи просто не станут дожидаться загрузки страницы, покинут сайт.
Многочисленные опросы говорят о том, что 47% готовы ждать полную отрисовку не более двух секунд, задержка даже в одну лишнюю секунду чревата потерей лояльности на 16%. К тому же 88% участников исследования заявили: они вряд ли вновь воспользуются сайтом после неудачной попытки. Кстати, мобильные пользователи не менее требовательны к производительности ресурсов (85% из них хотят, чтобы страницы открывались так же быстро, как и на компьютере).
От медленной работы страдают не только продажи, но и различные показатели: число внутренних переходов, длительность пребывания на блоге. Решив повысить скорость загрузки сайта, вы увеличите не только конверсию, но и лояльность к вашей компании в целом.
Лучшие инструменты для мониторинга скорости загрузки
Готовы изменить свой web-проект к лучшему? Прежде всего, надо проверить показатели при помощи специальных сервисов.
Простой и удобный анализатор для мгновенной оценки клиентской оптимизации. Перейдите по ссылке https://developers.google.com/speed/pagespeed/insights/, введите в поле адрес интересующего вас сайта и нажмите «Анализировать».
PageSpeed позволяет узнать скорость, а также уровень оптимизации для компьютеров и мобильных. Причем быстродействие сайта определяется двумя метриками: FCP и DCL.
FCP (First Contentful Paint) — первая отрисовка контента. Низкий показатель указывает на вероятные проблемы с самим соединением либо размерами используемых ресурсов.
Что касается DCL (DOMContentLoaded), то это не менее значимый параметр, означающий полную загрузку HTML и построение DOM-дерева.
Инструмент хорош возможностью посмотреть скорость сайта и определить проблемные зоны, а также оценить качество его оптимизации. К тому же Google PageSpeed Insights дает наглядные рекомендации по поводу улучшения ситуации.
Представленный сервис может помочь в расчете среднего времени загрузки и количества обращений к серверу. Кроме того, он в деталях отображает важную информацию о быстродействии изображений, стилей, JavaScript, скриптов и других элементов страницы — вы сразу обнаружите проблемные участки, тормозящие ваш сайт, получите советы по их улучшению.
Информер сохраняет каждый тест, поэтому владельцу сайта удобно следить за историей производительности.
Пользуетесь инструментами для вебмастеров? В своих отчетах они продемонстрируют вам параметры скорости ресурса и подскажут, как увеличить скорость загрузки страницы. Обратите внимание: в данном случае время события тестируется на основе сведений о реальных читателях.
В результате замера вы получите общую сводку по средней скорости ответа сервера, поиска домена, переадресации и загрузки страницы. Отдельная колонка предназначена для данных о производительности сайта с учетом браузера и страны.
Также Google Аналитика предоставляет информацию о пользовательской скорости загрузки, резвости отдельных страниц по сравнению с общим быстродействием проекта.
Как и при использовании большинства других сервисов, здесь вы получите ценные советы и по изменению онлайн-площадки, чтобы она работала должным образом.
Вы сможете лично оценить все преимущества веб-аналитики, пройдя авторизацию, открыв необходимое представление. После этого вам нужно перейти в раздел «Отчеты», выбрать «Поведение», а затем «Скорость загрузки сайта».
Тестирует производительность ресурса, предоставляя много полезной информации. Благодаря сохранению истории этот сервис дает возможность сравнить, как ухудшилась или улучшилась скорость после внесения правок. GTmetrix сообщает об ошибках, подгружая и сортируя по приоритету рекомендации от Google и Yahoo.
Пользоваться им просто: надо перейти на https://gtmetrix.com/ и ввести в поле адрес сайта, а затем нажать на кнопку Analyze.
Посетив данный анализатор, вы сумеете визуально оценить быстродействие проекта на телефонах и компьютерах. К тому же сервис предоставляет подробную информацию, способную помочь в оптимизации.
PR-CY пользуется популярностью среди вебмастеров, благодаря продуманному интерфейсу и точным сведениям.
А знаете ли вы? Результаты исследований Strangeloop Networks доказывают, что за последние несколько лет время загрузки web-проектов возросло на 21%. Если раньше статьи чаще всего дополнялись картинками низкого качества, то сейчас ресурсы наполнены тяжелыми элементами (первоклассными изображениями, галереями, видео, анимацией и внешними приложениями). Все это улучшает визуальное впечатление, однако замедляет работу сайта. Здесь, как и во многих других вопросах SEO, важно найти золотую середину.
Как ускорить загрузку и сохранить симпатии пользователей?
Вам, наверное, интересно, какие имеются подручные средства для оптимизации ресурса? Потратив всего 5 минут своего времени, вы узнаете все эффективные приемы и сможете применить их на практике.
Чтобы увеличить скорость загрузки сайта, необходимо пройтись как по серверной, так и по клиентской части — именно из этих обобщающих сегментов и складывается упомянутая метрика.
Серверная часть
Такая оптимизация является очевидной и понятной: она легко тестируется и координируется системным администратором. К тому же медленный ответ сервера создает трудности всем пользователям, независимо от типа их устройства и скорости подключения.
Улучшение хостинга
Нехватка ресурсов хостинга — проблема № 1 для небольших блогов. Иногда рентабельнее увеличить скорость дисковой системы и CPU, перейдя на тариф с расширенными возможностями. Если же цена получения дополнительных ресурсов значительно выше стоимости работ по улучшению производительности, стоит воспользоваться следующими методами.
Настройка сервера Nginx
Выделенный веб-сервер Nginx — отличный способ повысить производительность сайта. Особенно хорош он при обработке статического контента (до 600 тысяч запросов в секунду на Linux), впрочем, даже такой показатель можно улучшить с помощью правильной настройки.
Это не только ускорит работу, но и уменьшит уязвимость сервера.
Вам нужно выполнить сборку с такими командами:
Для ускорения сайта рекомендуется включить в секцию Server следующие строки:
Обязательная процедура для тех, кто желает повысить скорость загрузки сайта. Так вы сможете уменьшить размер пересылаемого трафика.
Откройте файл конфигурации, который находится по адресу /etc/nginx/nginx.conf и добавьте в секцию http < … >следующую информацию:
В том же файле необходимо найти конструкцию Server и дописать туда:
— ( expires 7d — количество дней хранения кэша на ПК пользователя).
Примечание! Воспользоваться этими советами и ощутимо снизить вес страниц смогут только владельцы выделенных и виртуальных серверов, потому что на виртуальном хостинге доступ к редактированию конфигурации Nginx отсутствует. Но в таком случае вы можете обратиться в техническую поддержку провайдера и попросить специалистов внести необходимые вам корректировки.
Настройки сервера Apache
Самая быстрая возможность оптимизировать веб-сервер — воспользоваться модулем mod-pagespeed от Google. После его установки, соединитесь через SSH с сервером и введите такие команды:
Зайдите в директорию /var/cache/mod_pagespeed и удостоверьтесь, что модуль работает корректно. В ней должны появиться папки сайта с кэшированием запросов к Apache — все настроено автоматически.
Что делает данный инструмент? Он удаляет лишние пробелы и атрибуты HTML-документов, объединяет несколько JS, CSS и HTML файлов в один, конвертирует картинки под установленный в тегах img / > размер, а также способствует оптимизации другими способами.
Gzip — сжатие на стороне сервера
Этот способ архивирования файлов сервером с последующей их распаковкой на стороне пользователя поможет вам существенно увеличить скорость загрузки страницы. Важно, что технологию компрессии поддерживают все без исключения браузеры.
Работа осуществляется на стороне сервера без задействования клиентского оборудования. Единственный минус подобного решения — рост нагрузки на сервер, однако он незначительный.
Для включения gzip-кэширование можно обратиться в техподдержку хостинга или же активировать его самостоятельно — это не требует каких-либо специальных знаний.
Или прописать в нем такие строки:
Внимание! Gzip сжимает файлы от одного до девяти единиц. Оптимальным параметром считается пятерка.
CDN для загрузки популярных JavaScript библиотек
Content Delivery Network (CDN) представляет собой своеобразную сеть доставки содержимого — большое количество серверов, расположенных по всему миру. Веб-сервер, предназначенный для отдачи контента клиенту на максимально возможной скорости, выбирается на основе определенных показателей. Чаще всего он отличается наименьшим временем отклика. К тому же браузер кэширует JavaScript, позволяя не загружать библиотеку повторно.
Благодаря сокращению расстояния от контента до посетителя вы сможете улучшить производительность сайта и снизить нагрузку на свой сервер. Еще одно достоинство — CDN способен не только раздавать изначальное содержимое, но и оптимизировать контент: компрессировать тексты и сжимать картинки.
На Content Delivery Network часто переносят все файлы JavaScript, изображения и CSS, оставляя на основном сервере лишь файл HTML.
Настройка кэширования на стороне сервера
Суть операции заключается в том, чтобы записать в файл все, что происходит на сервере, для дальнейшей быстрой выдачи статичной версии. Таким образом, вы сможете увеличить скорость загрузки сайта, а также уменьшить нагрузку на базу данных и сервер.
Создайте на сервере папку с любым допустимым названием (например, cache) и напишите в начале PHP-страницы следующее:
В конце после тэга не забудьте добавить:
Оптимизация базы данных
По мере роста сайта объем базы данных будет увеличиваться, что приведет к ее торможению. Соответственно, необходимо регулярно избавляться от мусора в виде спама, ревизий, ненужных таблиц.
Это можно сделать вручную через phpMyAdmin хостинга (пункт SQL). Не хотите попусту тратить время? Воспользуйтесь специальными плагинами или настройте автоматическую оптимизацию. Сделать это несложно.
Установите на ПК программу Notepad++ и подключитесь через FTP к хостингу. Найдите в папке public_html файл wp-config.php и перетащите на рабочий стол. После этого откройте его с помощью Notepad++ и найдите строчку с названием базы данных. Под ней надо добавить следующее:
Первая команда отключит ревизии постов, а вторая станет через день очищать корзину.
Обновите файл и перетащите его мышкой обратно на хостинг, заменив старую версию новой.
Оптимизация TCP, TLS, HTTP/2
В этом разделе объединены тонкие сетевые настройки, способствующие ускорению сервера. Они не меняют показатели разительно, зато их оптимизация не требует финансовых вложений.
TCP — популярный сетевой протокол, функционирующий на основе «окна перезагрузки». Чем выше габариты окна (количества пакетов для передачи), тем больше пропускная способность. Ваша задача — правильно рассчитать и настроить размер буфера TCP. Большинство разработчиков используют для этого параметры задержки и полосы пропускания, умноженные на два. Чтобы изменить размер буфера, используйте вызов Setsockopt в С или методы setReceiveBufferSize и setSendBufferSize в Java. Такая корректировка ориентирована на ускорение масштабных порталов и серверов. Главное — регулярно обновлять систему.
Что касается тюнинга TLS, он сократит время ответа и повысит уровень безопасности соединений. Найдите конфигурационный файл на Nginx и проведите следующие изменения:
Теперь немного о HTTP/2. В этот достаточно молодой протокол заложены механизмы быстродействия, рассчитанные на уменьшение влияния сетевых задержек. Чтобы увеличить скорость загрузки сайта, SEO-профи рекомендуют отказаться от встраивания файлов в HTML-код, доменного шардинга, спрайтов и конкатенации файлов.
Количество HTTP-запросов
Время открытия страницы на 80% зависит от загрузки Flash, CSS, скриптов и картинок. Уменьшение числа упомянутых элементов приводит к ускорению веб-проекта. Но как сократить количество запросов без изменения внешнего вида?
Для этого достаточно применить встроенные в страницу Inline-изображения и CSS-спрайты — комбинированные картинки, которые состоят из небольших фрагментов.
Если вы используете на странице несколько JS и CSS-элементов, их можно объединить в один файл — это действенный и простой прием.
Уменьшение редиректов
Создание перенаправлений — стандартная практика продвижения, когда надо сообщить серверу, что адрес страницы был изменен. 301-редиректы помогают избежать 404-ошибок, но при этом они замедляют работу сайта. Особенно явной становится проблема для пользователей мобильных устройств, которым приходится совершать дополнительные переходы. Google советует по возможности уменьшить количество перенаправлений.
Чтобы быстро найти все редиректы на своем ресурсе, воспользуйтесь специальной программой. После установки на компьютер утилита Screaming Frog за считанные минуты определит проблемные места.
Клиентская часть
Этот сегмент менее удобен в управлении, так как направлен на процессы, которые осуществляются в браузере пользователя. Тем не менее их оптимизация порадует вас хорошим результатом, позволив заметно повысить скорость загрузки сайта.
Настройка асинхронной загрузки
Современные страницы перегружены тяжелыми файлами JavaScript, которые замедляют дальнейшее отображение страницы. Соответственно, в местах с этими строками загрузка тормозится, ведь все HTML-элементы открываются по очереди. Однако с выходом HTML5 вебмастерам стала доступна асинхронная загрузка, во время которой скрипты запускаются в последнюю очередь.
Ускорить сайт можно при помощи специального скрипта Google ExtSrcJs. Надо лишь заменить:
Удаление лишних плагинов
Большинство генераторов и визуальных редакторов легко создадут необходимый вам код, правда, он будет «мусорным» – лишние строчки кода приведут не только к торможению ресурса, но и к возникновению ошибок, мешающих загрузке. Это надо исправлять. Кроме того, опытные специалисты рекомендуют всегда удалять ненужные расширения, плагины и темы.
Оптимизация размера страницы
Уменьшив размер страницы и количество «тяжелого» контента, вы ускорите работу сайта и сэкономите деньги на оплате услуг хостинга, если платите за трафик.
Для оптимизации попросите провайдера включить опцию сжатия HTTP. Это как минимум вдвое уменьшит размер графики и других элементов страницы.
Физическое сжатие графики и смена расширения файлов
Следуя простым советам, вы сможете увеличить скорость загрузки страницы без потери ее визуальной привлекательности.
Для сжатия графических файлов онлайн используйте tinyjpg.
Отказ от масштабирования картинок
Не стоит менять размер изображений с помощью CSS, width и height. Лучше предварительно внести корректировки, воспользовавшись графическим редактором.
Вместо одной масштабируемой иллюстрации, которая занимает много места и замедляет загрузку, стоит использовать несколько картинок, адаптированных под разные устройства.
Чтобы браузер каждый раз грузил нужный вариант, установите плагин Imager (для WordPress). Это работает так:
Оптимизация JavaScript и CSS
Специальные методы упрощения кода уменьшают размеры элементов, сокращая названия функций и удаляя мусор. Можно дополнительно улучшить CSS и JavaScript за счет изменения названий переменных (в случае обновления HTML и правильной работы селекторов).
Упростить код несложно — имеется много сервисов: JSCompress или Refresh-SF. Подойдет для этого и Google PageSpeed Insights. После выполнения на нем анализа страницы, нажмите на «Сократить HTML», а затем на «Посмотреть содержание».
Обратите внимание! Лучше всего размещать JS-файлы в конце страницы, а CSS — в начале. Так ваш ресурс произведет на пользователей положительное впечатление как по внешнему виду, так и по скорости.
Оптимизация веб-шрифтов
Подключенные веб-шрифты — стандарт оформления современных сайтов. Но, к сожалению, они негативно сказываются на производительности сайта. Проблема усугубляется при расположении указателей на файлы шрифтов в CSS и применении публичных сервисов, требующих дополнительные подключения.
Начните пользоваться новыми форматами WOFF и WOFF2, при этом исключите все наборы символов, кроме кириллицы и латиницы.
Настройка кэширования на стороне браузера
Использование кэша предполагает то, что файлы сайта будут загружаться с сервера лишь один раз. В дальнейшем они сохраняются на компьютер и «подтягиваются» при загрузке с ПК пользователя.
Как увеличить скорость загрузки сайта на определенном движке?
Для оптимизации CSS и JavaScript в таком случае стоит установить плагин Autoptimize. Можно также загружать откорректированные элементы страницы из PageSpeed Tool.
Учтите, что основой «легкости» ресурса является правильно выбранная тема. Если нынешняя версия тормозит ваш проект, есть смысл ее поменять.
Следует уменьшить размеры статичного контента — для Nix-систем подойдет Google ModPagespeed. Также вы можете воспользоваться Gzip, сжатием изображений.
Оптимизируйте иллюстрации под Web, тогда они будут обладать меньшим весом. Никогда не загружайте картинки с высоким разрешением для их последующего уменьшения через CSS и HTML. Большое количество «неблагополучных» элементов приведут к серьезному замедлению работы сайта.
В административной панели этой CMS существует немало полезных настроек. Например, «Автокэширование» и «Оптимизация CSS», где можно выбрать подходящие вам функции: объединение файлов, создание сжатых копий и т. п.
Заключение
Теперь вы знаете, насколько важно быстродействие ресурса для его конверсии, индексации и ранжирования. Надеемся, статья ответила на все ваши вопросы и помогла оптимизировать сайт с минимальными усилиями!
