1. Определение скорости страницы
2. Как проверить скорость страницы
3. Как улучшить скорость страницы
4. Больше улучшений скорости страницы
5. Заключение

Как быстро загружается ваш сайт ? Если ответом является что-то иное, чем «мгновенно», вам нужно кое-что настроить. Такие показатели, как скорость страницы и время до первого байта, являются одними из самых важных показателей, влияющих на производительность вашего сайта. Все, что требуется, - это небольшая задержка, чтобы посетитель отвернулся. Мобильные пользователи еще более привередливы: более 50% звонков прекращают свою работу после трех секунд ожидания. Если вам нужны конверсии, ваша задача - сделать все возможное, чтобы ваш сайт быстро загружался на каждом устройстве.

Определение скорости страницы

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

Время до первого байта

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

Как вы, наверное, догадались, TTFB измеряется в миллисекундах. Все, что меньше 100, считается хорошим, в то время как 200-500 мс довольно стандартно. 500 мсек до полной секунды не так уж и велики, и если для достижения первого байта требуется больше секунды, вам нужно проделать определенную работу. Хорошее практическое правило заключается в том, что если вы заметите, что ваша страница не загружается сразу, ваш TTFB требует внимания.

Время загрузки

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

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

Скорость страницы и SEO

Знаете ли вы, Google оценивает веб-сайты по общей скорости страницы? Наличие быстрого сайта может помочь вам подняться по лестнице результатов поиска, и все это без необходимости заново изобретать свою стратегию SEO. Компания не предоставляет каких-либо подробностей о том, как именно скорость связана с рейтингом, а только об этом. Это говорит вам одну важную информацию: скорость важна. Не игнорируйте это!

Как проверить скорость страницы

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

• Google PageSpeed ​​Tool - Получение информации из источника многих веб-стандартов - это всегда хорошая идея. Один из многих инструментов для веб-разработчиков Google включает PageSpeed. Просто введите URL-адрес и нажмите «Ввод», затем выберите результаты рендеринга на рабочем столе и на мобильном устройстве. Затем PageSpeed ​​обрисовывает в общих чертах как скорость, так и оптимизацию, показывая вам быстрый набор графиков и советы по оптимизации ниже.
• YSlow - Проект YSlow с открытым исходным кодом - невероятно полезный инструмент для веб-мастеров. Расширение доступно для самых разных браузеров и работает в фоновом режиме, пока вы заходите на свой сайт в обычном режиме. YSlow затем отображает классифицированные категории вместе с разбивкой по компонентам и общей статистикой сайта.
• WebPagetest - Подробный инструмент для проверки скорости сайта и времени загрузки. Каждой области присваивается рейтинг по буквам и отображается собранная информация в диаграммах водопадов, что позволяет быстро определить проблемные зоны и приступить к их устранению.
• ByteCheck - Более простой инструмент, предназначенный для измерения времени до первого байта (TTFB) и предоставления простого списка предложений для ускорения работы.

Как улучшить скорость страницы

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

Сократить JavaScript и CSS

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

Сокращение JavaScript или CSS - это автоматизированный процесс, который удаляет ненужные элементы из связанного кода, чтобы уменьшить размер файла и помочь браузерам быстрее визуализировать вещи. Алгоритм сжатия удаляет комментарии кода и лишние пробелы, полезные для людей, но не для компьютеров. Эти простые изменения могут вернуть колоссальные 20-30% вашей потерянной скорости.

Если вы не уверены, с чего начать, проверьте CSS Minifier для сжатия кода CSS и JavaScript Minifier для JavaScript.

Оптимизировать изображения

Ааа, изображения. Вкусная глазурь на твоем и без того вкусном торте. Быть осторожен; переусердствовав в файлах PNG и JPG, вы можете превратить мгновенную страницу в кошмар загрузки. Тем не менее, если для работы вашего сайта необходимы определенные элементы или они действительно улучшают пользовательский интерфейс, вам следует подумать об их оптимизации для Интернета.

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

Использовать кеширование в браузере

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

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

Используйте сеть доставки контента

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

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

Сократить HTTP и файловые запросы

Каждый HTTP или файл запрос вашего сайта съедает время. Если он выполняет десятки или даже сотни запросов на повторную загрузку, вы рассчитываете добавлять секунды в ожидание посетителя каждый раз, когда он нажимает. Хитрость в сокращении этих запросов состоит в том, чтобы изменить свое отношение к сайту. Вам действительно нужно загрузить десять разных файлов, когда строка кода CSS может достичь аналогичного результата? Эта кнопка «ОК» действительно должна быть изображением, или строка текста будет работать так же хорошо?

Используйте Gzip

Запуск Gzip на стороне сервера сжимает контент, прежде чем он попадет в Интернет. Это то же самое, что архивирование файла перед отправкой его другу по электронной почте, только это происходит намного быстрее и обрабатывается в фоновом режиме. Доставленный контент сжимается, отправляется в браузер пользователя, затем распаковывается и отображается в одно мгновение. С помощью этого простого трюка большинство пользователей Gzip могут потерять около 70% размера файла своего контента.

Не уверены, что ваш сайт использует Gzip? Запустить Тест gzip выяснить.

Больше улучшений скорости страницы

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

Оптимизация скорости WordPress

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

• Autoptimize - Мощный инструмент оптимизации WordPress, этот удобный инструмент собирает, минимизирует и кэширует скрипты, чтобы значительно снизить нагрузку на сервер. Один из лучших плагинов, связанных со скоростью.
• WP Super Cache - Если вы планируете кеширование, то WP Super Cache - это решение, к которому вам следует обратиться. Этот плагин, разработанный самой командой WordPress, генерирует статические файлы из динамического блога и загружает сервер только для нового контента, когда это абсолютно необходимо.
• WP сжатие изображений - Уменьшайте размер изображений по мере их загрузки, сокращая 65-80% размера файла практически без потери данных.

Использовать статический контент

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

Сосредоточиться на оборудовании

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

Уменьшить, уменьшить, уменьшить

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

Скорость страницы и мобильные устройства

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

Не используйте изображения

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

Дитч Современная Техника

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

Отдельное тяжелое содержание

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

Забудьте внешние элементы

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

Заключение

Скорость страницы - это невидимая основа, которая формирует структуру вашего успешного сайта. Плохая скорость страниц разрушает все, от конверсий до SEO-рейтинга, а хорошая скорость страниц повышает рейтинг страниц Google и делает пользователей счастливыми. Помните: три секунды - это все, что у вас есть. Стремитесь к менее чем одному и соглашайтесь на два, но никогда не прекращайте попытки оптимизировать скорость вашего сайта!

Похожие

Комментарии