Скорость загрузки сайта является важнейшей составляющей позитивного user experience, а также одним из факторов ранжирования сайта в поисковой выдаче. Правда такова, что сегодня пользователи не хотят ждать загрузки страницы более 5 секунд. Если ваш сайт загружается недостаточно быстро, вы теряете потенциальных клиентов.
Учитывая то, что 50% онлайн-трафика приходит с мобильных устройств, пользователи ожидают почти мгновенной загрузки сайта и в мобильной версии. В этой статье вы узнаете, как набрать 100 из 100 с инструментом Google PageSpeed Insights для мобильной и десктопной версии вашего сайта.
Мотивация
При проверке сайта Google его же инструментом PageSpeed Insights было замечено, что проблем с декстопной версией сайта нет – 100/100, а вот результаты мобильной версии оставляют желать лучшего – 71/100.
Значит ли это, что результат 100/100 недостижим?
Как заставить страницы загружаться быстрее
В первую очередь необходимо отметить, что инструмент PageSpeed – это всего лишь руководство для повышения качества веб-сайтов. Инструмент предоставляет рекомендации для оптимизации веб-сайта, которая способствует повышению скорости загрузки страниц, но достижение желаемого результата зависит от настроек сервера.
Некоторые из этих шагов требуют технической экспертизы, другие – нет. Этой инструкции можно следовать в любой Системе управления сайтом.
Шаг первый: Оптимизируйте изображения
Инструмент PageSpeed Insights предлагает оптимизировать картинки посредством уменьшения размера файлов. Для этого можно предпринять следующие меры:
· Сожмите все изображения, используя инструменты Compressor.io и TinyPNG (или любые другие бесплатные инструменты). В некоторых случаях эти инструменты позволяют уменьшить размер изображений более чем на 80% без ущерба их качеству.
· Уменьшите размер изображений до необходимых параметров, не ухудшив при этом их качества. Допустим, если нужно изображение размера 150x150px, именно такого размера картинку нужно загрузить на сервер. Не рекомендуется использовать изображения большего размера, чем вы хотите поместить на сайт, или уменьшать их размер с помощью CSS или HTML тегов.
Можно скачать изображения, сжать и отформатировать их вручную или воспользоваться сервисом PageSpeed Tool и скачать уже оптимизированное изображение. То же самое можно сделать с JavaScript и CSS.
Шаг второй: Сократите объем ресурсов CSS и JavaScript
Размер ресурса можно уменьшить, удалив ненужные байты, например, лишние пробелы, переносы строки и отступы. При создании кодов программисты часто оставляют свободные места и комментарии. Иногда, удалив их, можно уменьшить размеры файлов в два раза.
Для решения этой проблемы можно установить инструмент Gulpjs на сервер. Инструмент автоматически создаёт новый CSS файл и удаляет все пробелы. Он также автоматически создаёт новый CSS файл для всех внесённых вами изменений. В этом случае разработчиком удалось уменьшить размер главного CSS файла с 300kb до 150kb.
Если вы используете WordPress, целесообразно будет установить плагин Autoptimize.
Также можно загрузить уже оптимизированные файлы, предложенные PageSpeed Tool.
Шаг третий: Оптимизируйте время ответа сервера
Чтобы уменьшить время ответа сервера, можно переместить все статичные файлы с веб-сайта на CDN.
CDN – это сеть серверов, разбросанных по всему миру, которые позволяют оптимизировать доставку и дистрибуцию контента (изображений, файлов CSS и JavaScript) конечным пользователям в сети Интернет. CDN хранит копии контента вашего веб-сайта на своих серверах. Когда пользователь заходит на ваш сайт, статичный контент загружается с ближайшего к нему сервера.
Допустим, главный сервер вашего сайта находится в Техасе, и вы не используете CDN. Пользователю из, например, Амстердама придётся ждать, пока сервер загрузит сайт из Америки. Если вы используете CDN, ваш сайт загрузится с сервера, ближайшего к Амстердаму, что займёт гораздо меньше времени.
Ниже представлена схема функционирования CDN c GTmetrix.
На CDN можно перенести все изображения, файлы JavaScript и CSS и оставить на главном сервере только файл HTML. Размещение изображений на CDN может существенно повысить скорость загрузки страниц сайта.
Шаг четвёртый: Используйте кеш браузера
Использование кеша браузера предполагает, что файлы с вашего веб-сайта – изображения, файлы CSS и JavaScript – загружаются с сервера всего один раз, и браузер сохраняет их на компьютере. В следующий раз при загрузке страниц все необходимые файлы «подтянутся» с компьютера пользователя.
Чтобы использовать кеш браузера, нужно создать файл.htaccess и прописать в нём необходимые директивы, используя модуль expires. Продолжительность хранения данных в кэше может быть установлена по времени, по последнему изменению файла или по времени доступа клиента.
Шаг пятый: Удалите из верхней части страницы ресурсы, блокирующие отображение
Главной проблемой, с которой приходится столкнуться разработчикам в этом случае, является перемещение кода JavaScript из верхней и основной части страницы в нижнюю часть по всему веб-сайту.
Если вы используете WordPress, плагин Autoptimize, который уже упоминался ранее, может вам в этом помочь. Для этого вам всего лишь нужно поменять настройки плагина.
Шаг шестой: Включите сжатие
Включить сжатие можно в настройках вашего сервера. Если вы сомневаетесь в своей компетенции в данном вопросе, попросить вашу техническую поддержку включить сжатие GZIP для вашего сервера.
Шаг седьмой: Оптимизируйте мобильную версию
Адаптивная версия мобильного сайта предполагает использование правильного разрешения изображений, параметров шрифта и хорошей навигационной системы.
Узнать, как ваш веб-сайт выглядит на различных девайсах, можно в Google Chrome. В правом верхнем меню кликните на «Дополнительные инструменты», а затем – «Инструменты разработчика».
Вывод:
Итак, четыре наиболее важных шага, которые необходимо предпринять, чтобы улучшить качество сайта:
1. Используйте CDN.
2. Используйте кеш браузера.
3. Удалите блокирующие отображение ресурсы из верхней части страницы.
4. Оптимизируйте размер изображений и сожмите их.
Скорость загрузки страниц сейчас очень весомый сигнал для поисковых систем. Да и для пользователей это значимый фактор, на который сложно не обратить внимание, если с ним проблемы. Улучшая скорость сайта можно не только получать плюсы в ранжировании, но и получать больше доверия и коэффициент конверсий. Ниже приведен список наиболее полезных инструментов, которые помогут провести анализ и выявить самые слабые места сайта в плане скорости.
1. Google PageSpeed Insights
Инструмент оценки скорости загрузки страниц от Google. Показывает значение от 0 до 100 как для компьютеров, так и для мобильных устройств. Тут же указывает на слабые места сайта и дает рекомендации по оптимизации скорости.
2. Pingdom Tools
Дает оценку по скорости, показывает количество обращений к серверу и среднее время загрузки. В сводной таблице подробно отображет данные по каждому запросу к серверу (стили, скрипты, изображения и др). Легко оценить, что именно на сайте замедляет загрузку.
3. WhichLoadFaster
Загружаете два сайта для сравнения (себя и конкурента), визуально наблюдаете, кто загружается быстрее (удобно демонстрировать клиентам). В конце загрузки отображается информация, какой сайт выиграл и во сколько раз быстрее он загрузился.
4. Web Page Performance Test
Загружает страницу два раза, сравнивает количество обращений – выявляет, насколько хорошо организовано кеширование, показывает подробную статистику по каждому из тестов. Сохраняет скриншоты, как сайт выглядит на каждой секунде загрузки. Также в удобной форме демонстрирует, какая группа запросов заняла больше всего времени. Сервер находится в Далласе (США ).
5. GTmetrix
Еще один полезный инструмент для теста скорости сайта. Отображает много сводной информации, также хранит историю, чтобы можно было сравнить, насколько улучшилась или ухудшилась скорость загрузки. Подгружает рекомендации Yahoo и Google для оптимизации скорости, сортируя их по приоритету. Тестовый сервер находится в Ванкувере (Канада).
6. Load Impact
Сервис тестирует, насколько сайт выдерживает нагрузку (легкий DDOS ). Эмулируется несколько десятков пользователей и более сотни активных соединений. Так как тест длится несколько минут, то в это время нагрузки можно использовать и другие инструменты для оценки скорости загрузки страниц в час пик. По окончанию теста можно посмотреть график, как меняется скорость загрузки от количества активных пользователей.
7. Monitis Tools
Анализирует загрузку сайта с разных участков Земли - серверы в США , Европе и Азии. Отображает сводную статистику по каждому тесту.
8. SiteSpeed.me
Посылает запросы к анализируемой страницы с разных датацентров (около 30 серверов) и определяет скорость для каждого из них. Подсвечивает лучшие, худшие и средние показатели по времени и скорости.
9. PR-CY
Массовая проверка скорости сайта. Можно задавать до 10 адресов – сравнивая таким образом время загрузки и размер документа для каждого из ресурсов.
10. WebPage Analyzer
Отчет по загрузке страницы и всех дополнительных скриптов/стилей/изображений. Простой и часто необходимый инструмент.
Если вы используете какие-то другие бесплатные онлайн-инструменты для проверки скорости загрузки страниц сайта, делитесь ими в комментариях.
50% интернет-трафика уже сейчас приходится на долю мобильных устройств, и их пользователи ожидают, что страницы сайта будут загружаться практически мгновенно. Поэтому в этой статье мы рассмотрим, как при проверке скорости загрузки страниц бесплатным инструментом Google PageSpeed Insights Tool получить 100/100 баллов как для мобильной, так и для десктопной версии сайта.
Как увеличить скорость загрузки страниц
Прежде чем перейти непосредственно к советам, стоит обратить внимание, что Google PageSpeed Tool лишь предоставляет рекомендации, следуя которым можно достичь более высокой производительности сайта. Итоговый результат зависит, в первую очередь, от вашей серверной инфраструктуры, ресурсов и выбранных настроек.
Для применения некоторых советов требуются глубокие технические знания, для других - достаточно общего понимания принципов работы сайта. Все рекомендации подходят для использования в любой CMS системе.
Шаг #1: Оптимизируем изображения
PageSpeed Insights Tool проверит изображения на вашем сайте, и если скорость их загрузки окажется недостаточно высокой, Google предложит их оптимизировать. Вы можете увеличить скорость загрузки изображений, уменьшив их вес и размер. Чтоб решить эту задачу достаточно выполнить два шага:
- Для начала, сожмите все изображениями инструментами типа Compressor.io или TinyPNG . Оба инструменты бесплатны, но крайне эффективны. В некоторых случаях они сжимают картинки на 80% без потери качества.
- Уменьшите размер изображений до минимально возможного. Допустим, вы хотите, чтоб размер отображаемой на сайте картинки составлял 150x150px. В таком случае фактический размер изображения, хранящегося на вашем сервере, не должен превышать размеров отображаемого изображения, то есть он также должен составлять 150x150px. Не стоит подгонять размер картинки с помощью CSS или HTML кода.
Вы можете выгрузить все изображения, сжать их и изменить размер. Неплохо взять за правило оптимизировать каждое новое изображение перед добавлением на сайт. То есть все изображения должны быть правильного размера и сжаты без потери качества.
Google предложит сразу загрузить оптимизированные изображения на сайт.
Шаг #2: Максимально сократите CSS и JavaScript код
Google может попросить вас сократить JavaScript и CSS код.
Под сокращением в первую очередь подразумевается удаление лишних пробелов, пустых строк, ненужных комментариев и так далее, которые разработчики оставляют при написании кода. Все вместе эти нежелательные элементы могут увеличить размер JavaScript и CSS файла в два раза.
Например, код в документе, приведенном ниже,
может быть сокращен до:
Чтобы быстро решить эту задачу можно установить на свой сервер инструмент, который называется Gulpjs . На основе вашего файла он автоматически создает новый CSS файл, в котором удалены все ненужные пробелы. Фактически, этот инструмент может помочь сократить размер файла в два раза. Еще больше информации о том, как удалить лишние элементы кода, можно почерпнуть в официальном справочном руководстве Google .
Шаг #3: Используйте кэш браузера
Для многих сайтов пункт об использовании кэша браузера - настоящее испытание. Для решения этой проблемы можно использовать сеть CDN.
CDN - это сокращение от content delivery network, то есть “сеть доставки контента”. Чаще всего это множество серверов со специализированным ПО, которые ускоряют доставку (“отдачу”) контента конечному пользователю. С её помощью можно кэшировать и сохранять многие элементы сайта, такие как изображения, CSS и JavaScript файлы. CDN хранит копии содержимого сайта на серверах. Если пользователь заходит на сайт, контент для него загружается с ближайшего к нему сервера.
Допустим, главный сервер вашего сайта расположен в Техасе, если вы не используете CDN, то пользователь, который находится в Амстердаме, будет вынужден ждать, пока ваш американский сервер загрузит для него контент, а это может занять немало времени. В то же самое время использование CDN позволяет загружать сайт из точки, расположенной к пользователю максимально близко. А в данном случае, максимально близко к Амстердаму.
Как результат, сайт загружается значительно быстрее.
Если вы переместите все изображения, файлы JavaScript и CSS на сеть CDN, то ваши удаленные пользователи сразу заметят ощутимое увеличение скорости загрузки страниц. Но даже использование CDN не гарантирует, что вы пройдете тест Google. Google также обращает внимание на все внешние ресурсы, которые вы используете на своем сайте.
Эту проблему можно решить, заменив счетчики изображениями, которые вы можете спокойно хранить с помощью CDN. Вместо того чтобы размещать сторонние скрипты, которые получают информацию о количестве подписчиков из Twitter, Facebook, Google Plus и других соцсетей, можно хранить эти данные самостоятельно, снизив, таким образом, скорость загрузки страниц.
Если ваш сайт интегрирован с Google Analytics и вы не хотите отказываться от интеграции, то решение проблемы может потребовать дополнительных усилий.
Google редко меняет код Analytics, как правило, не более пары раз за год, поэтому можно создать скрипт, который будет проверять Analytics на наличие изменений раз в сутки. Новый код будет загружаться только, если были обнаружены изменения. В таком случае, вы сможете спокойно хранить JavaScript код Analytics, не скачивая его при этом с серверов Google каждый раз при обращении к ним.
Если скрипт обнаружит изменения, то новая версия автоматически скачается и сохранится в вашей сети CDN.
Та же самая операция будет повторяться каждый раз, когда происходит обновление кода. Новая версия скачивается и сохраняется на CDN. Этот же скрипт можно использовать и для других сторонних ресурсов.
Шаг #4: Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы
Удаление кода, блокирующего отображение верхней части страницы - один из самых сложных моментов при оптимизации скорости загрузки страницы, поскольку требует глубоких технических знаний. Обратите внимание, что код JavaScript следует всегда размещать в конце файла .
Если ваш сайт на Wordpress, то решить задачу вам может помочь тот же самый плагин Autoptimize. Зайдите в настройки, уберите галочку возле “Force JavaScript in Head” и поставьте рядом с “Inline all CSS.”
Шаг #5: Включите сжатие
Включить сжатие можно прямо в настройках вашего сервера. Если вы не знаете, как это сделать, обратитесь к вашему системному администратору и попросите включить GZIP сжатие на сервере.
Шаг #6: Оптимизируйте сайт для мобильных устройств
То, насколько удобно пользователям мобильных устройств работать с вашим сайтом, зависит от многих факторов, в первую очередь от того, оптимизирован ли дизайн сайта под мобильные устройства, как он отображается у пользователя, насколько хорошо подобран фон, удобно ли продумана навигация по сайту и так далее.
Google Chrome позволяет проверить, как ваш сайт будет отображаться при просмотре на разных мобильных устройствах. Нажмите на контекстное меню в правом верхнем углу, после этого выберите пункт “Дополнительные инструменты”, а затем “Инструменты разработчика”. В выпадающем меню вы можете выбрать тип устройства и проверить, как выглядит ваша страница при просмотре с каждого из них.
Заключение
В статье перечислены только самые основные шаги, которые можно предпринять чтобы оптимизировать скорость работы сайта. Обратите внимание, что не стоит останавливаться на оптимизации только главной страницы, необходимо также уделить внимание внутренним страницам.
Ниже кратко перечислены три основных шага, которые помогут добиться более высокой производительности сайта:
- Используйте сеть CDN (content delivery network).
- Удалите код, блокирующий отображение верхней части страницы. (Не размещайте JavaScript в середине файла. Код JavaScript должен находиться в конце документа).
- Оптимизируйте размер изображений и сожмите их.
Ставили ли вы перед собой задачу оптимизировать скорость работы сайта? Если да, то какие шаги вы предпринимали?
Скорость страницы определяет общее время, необходимое для полной загрузки веб-сайта. При анализе сайта скорость загрузки может иметь решающее значение для SEO. Пользователи быстро покидают страницу, когда загрузка занимает слишком много времени, а поисковые системы игнорируют страницы с низкой производительностью.
Кроме полезности для SEO есть и другие причины для улучшения скорости страницы. Быстрые веб-сайты имеют бо́льшую конверсию, они намного удобнее для пользователя. Это может привлечь большее количество людей на ваш сайт и заставить их вернуться снова.
Исследования Google
Давайте рассмотрим некоторые недавние исследования: среднее время, затрачиваемое на загрузку мобильной целевой страницы, составляет 15 секунд. Учитывая, что в течение трех секунд посетители должны решить, хотят ли они оставаться на вашем сайте – это огромное расхождение.
Исходя из данных, представленных выше, мы видим, что вероятность ухода со страницы во многой степени зависит от времени ее загрузки:
- При времени загрузки от 1 до 3 секунд вероятность отказа увеличивается до 32%
- От 1 до 5 секунд до 90%
- От 1 до 10 секунд вероятность отказа уже 123%
- Не трудно догадаться, какое количество посетителей мы теряем.
Скорость страниц будет важным фактором для ранжирования
Еще в 2010 году Google заявил , что скорость страниц будет ранжирующим фактором, но это было ориентировано только для десктопной версии сайтов.
А не так давно был анонсирован новый фактор ранжирования в мобильном поиске под названием «Speed Update». Обновление вступит в силу в июле 2018 года, поэтому у владельцев сайтов будет время подготовиться.
По заверению компании санкции грозят только страницам, загружающимся медленно и предоставляющим негативный пользовательский опыт.
Так же не стоит забывать, что скорость сайта – это один из многих факторов ранжирования. К примеру, если у вас хорошо оптимизирована страница по Google PageSpeed, но имеет малополезный неуникальный контент – то навряд ли она сможет занять достойные позиции в поисковиках.
- 1. Используйте кэширование в браузере и сжатие gzip/deflate. В случае, если у вас стоит apache, это настраивается в htaccess.
- 2. Оптимизируйте изображения. Удаление ненужной информации и сжатие картинок способны значительно уменьшить их вес.
- 3. Сократите ресурсы javascript, css, html код. Если сайт находится в стадии разработки, то для удобства редактироватия кода этот пункт лучше оставить на потом.
- 4. Используйте новую версию протокола HTTP/2. Он более эффективен, надежен и подвержен меньшему количеству ошибок.
- 5. Переходите на PHP7. Работает более чем в два раза быстрее, чем его предшествующая версия.
Если вам понадобится помощь квалифицированного специалиста, вы всегда можете на бесплатный анализ и оценку стоимости работ.
В одной из следующих статей мы поговорим о том, что такое блокирующие скрипты и почему не всегда от них можно избавиться.
