Оптимизация скорости загрузки сайта для Google в 2021 году
Оптимизация скорости загрузки сайта для GooglePage Speed
Как ускорить загрузку страниц и увеличить ранг в PageSpeed рейтинге? — советы экспертов
В компании Google сделали исследование поведения пользователей на сайтах разных направлений, с целью выявления лучших показателей. В результате данного теста, выяснилось, что если страница сайта загружается более 3 секунд — вероятность отказа повышается в 2.5 раза. И в этом исследовании ясно показано: скорость имеет значение! Поэтому для повышения рейтинга сайта гугл требует чтобы загрузка любой страницы сайта была не более 3-х секунд, оптимальным показателем является 1-2 секунды. Поэтому Google рекомендует разработчикам сайтов заняться оптимизацией своих проектов и предлагает для анализа эффективности скорости загрузки страницы использовать инструмент: Google PageSpeed.
Google PageSpeed Insights показывает не только скорость загрузки страницы вашего сайта, но дает информацию и подробные рекомендации по технической оптимизации.
Рассмотрим основные аспекты оптимизации скорости загрузки сайта
Оптимизация базы данных (связи, индексы)
Оптимизация SQL запросов
Такие запросы как «SELECT *» лучше не использовать, так как в память выгружаются все поля таблицы которые не всегда нужны. Оператор LIKE тоже лучше использовать в редких случаях. Все справочники по возможности лучше загонять в массив и работать с массивом. Также желательно использовать кеширование данных вывода SQL запроса (можно кеш сохранять в файлы или оперативную память)
Кеширование результатов SQL запросов
Существенно повышает скорость — кеширование результатов SQL запросов. К примеру, одну и ту же страницу сайта за секунду могут загрузить несколько раз, и при этом каждый раз идет обращение в базу данных. Так как запросы в базу это достаточно медленная операция, и обращение к базе данных дает в основном нагрузку на файловую систему — это очень снижает производительность и скорость. Поэтому все повторяющиеся запросы должны кэшироваться
Пример кеширования результатов SQL запросов в PHPОптимизация (сжатие) изображений
Чтобы загрузка изображений работала быстрее гугл предложил оптимизировать их за счет сжатия файлов, уменьшения размеров.
- Все изображения на сайте сжать, используя онлайн инструменты Compressor.io и TinyPNG. Данные инструменты бесплатные, но есть ограничения — не более определенного количества фото. Данные сервисы уменьшают размер графического файла примерно на 60-80% при этом качество фото может ухудшится.
- Также следует уменьшить размеры фото до нужного реального размера например 200x200px, а подгоняться при помощи стилей CSS width/height.
Подключение файлов JavaScript/CSS и шрифтов Fonts и отложенная загрузка
Подключение файлов JavaScript, CSS желательно объединить в общий CSS файл и общий JS файл для того чтобы уменьшить количество коннектов при заргузке страницы.
Также нужно добавить свойство async (асинхронная загрузка) для подключаемых скриптов. После добавление этого свойства в GPSpeed пропадет замечание по поводу асинхронной загрузки. Также старайтесь использовать сложные и массивные JS библиотеки по минимуму.
В данном примере все JS скрипты объединены вместе с библиотекой jQuery в один файл core.min.js и загружается асинхронно async и defer — отложено
Пример отложенного вызова CSS файла через JavaScript
В подключении шрифтов font-display параметр swap может показывать текст не дожидаясь полной загрузки всего шрифта.
Пример на CSSОбязательно загружайте все изображения с помощью отложенной загрузки lazyload
При этом обязательно нужно подключить lazyload.min.js
Если у вас на странице есть svg элементы, то их лучше добавлять в HTML коде, без дополнительного обращения к тегу img. И svg необходимо ужимать тоже.
Минимизация (сжатие) JavaScript, CSS и HTML
Минимизация (сжатие) JavaScript, CSS, HTML позволяет сократить вес файлов, устраняя пробелы, переносы строк, ненужные символы и комментарии. Разработчики при разработке сайта оставляют много места на отступы и комментарии, что существенно удваивает объем JavaScript и CSS.
Детальнее вы можете узнать по ссылке: https://developers.google.com/speed/docs/insights/MinifyResources
Включение сжатия gzip
GZIP это формат сжатия в вебе. Перед отображением страницы, файлы загружаются с сервера уже в сжатом виде. Данный тип сжатия поддерживают все современные браузеры.
Включить gzip сжатие файлов вы можете в настройках вашего хостинга.
Рекомендации по установке GZIP сжатия можете посмотреть здесь: https://developers.google.com/speed/docs/insights/EnableCompression
Удаление блокирующих кодов
Устранение блокирующих кодов является сложным этапом в повышении скорости загрузки страницы, требующий технических знаний. Нужно проводить анализ всего кода JavaScript начиная сверху от «header» и «body» до расположенного внизу «footer» на всех страницах сайта.
Более детально можно посмотреть по ссылке: https://developers.google.com/speed/docs/insights/BlockingJS#InlineJS
Оптимизация версии сайта для мобильных устройств
Анализ мобильного формата показывает адаптивность мобильной верстки сайта под различные размеры экранов, использование динамических размеров шрифтов, и наличие правильной навигации.
Для любителей сайтов на бесплатных CMS, таких как: WordPress, Joomla, Drupal, Opencart, Magento, ModX, ImageCMS и другие.. проводить оптимизацию скорости загрузки сайта для рейтинга гугл будет достаточно сложно или невозможно. Это связано с спецификой программной организации бесплатной CMS и использованием шаблонных решений, которые оптимизировать не всегда удается или удается на небольшой процент(: Плюс не каждый специалист сможет это сделать так как данный процесс требует определенные знания и опыт, и нужно будет вносить коррективы в ядро системы.
Комментарии: (0) Написать комментарийОт чего зависит скорость загрузки сайта? Полезные советы по сайту
Информация, поданная в статье, поможет вам разобраться, от чего зависит скорость загрузки страниц сайта и как проверить это самостоятельно.
Любой веб-ресурс состоит из разного рода контента: это содержательная часть, текстовая информация, изображения, скрипты и другие элементы. Все это собирается в единую страницу в браузере.
В момент, когда пользователь заходит на сайт, страница открывается путем подгрузки различных элементов: как статических, так и динамических. Этот процесс может происходить быстро или медленно, в зависимости от количества контента и элементов сайта. Например, если мы имеем дело с интернет-магазином, то изображений на странице каталога будет 50 и больше. Следовательно, он должен грузиться дольше, чем, к примеру, сайт-визитка. Но, на самом деле, такие сайты также могут грузиться в пределах 2-3 секунд, что является стандартом загрузки страниц.
Существуют методы оптимизации скорости загрузки интернет-страниц – об этом и расскажем подробнее, а также ответим на вопрос: “От чего зависит скорость загрузки сайта?”
Скорость загрузки контента
Скорость загрузки контента определяется быстротой получения пользователем обратного ответа от веб-сервера. При этом важно, чтобы интернет-канал пользователя был достаточно быстрым. Стоит учитывать, что это зависит от многих факторов, таких как хостинг, а также веб-сервер и его характеристики.
Что такое скорость ответа сервера?
Скорость ответа сервера – это время задержки между отправкой сигнала пользователем и получением этого сигнала обратно от сайта. Учитывается время задержки, которое измеряется в миллисекундах.
Что влияет на скорость ответа сервера?
Влияет удаленность сервера, о котором прежде упоминалось, и его настройка. Для того, чтобы оптимизировать этот процесс, используют технологию CDN.
Нагрузка на сервер и оптимизация
Нагрузку на сервер проще всего представить на примере интернет-магазина, поскольку такие сайты чаще всего имеют высокую посещаемость в связи с частыми внесениями изменений (к примеру, почасовое/ежедневное изменение ценовой политики), но они также имеют контент, который не меняется.
Например, фотографии товаров – они всегда одинаковые. Если нам известен адрес этого изображения, то, как правило, по нему всегда будет доступна одна и та же фотография. Чтобы отобразить картинку пользователю, движок и хостинг довольно сильно нагружаются, учитывая, что количество посещений интернет-магазина в день может достигать от 1000 до 5000 пользователей. Также может содержаться много изображений товаров. Кроме изображений есть и другой контент. И это все замедляет работу сервера… Если запросов к базе данных слишком много – сервер может не справиться и выдать для некоторых пользователей 500 код ошибки.
Чтобы сократить количество запросов к базе данных, можно хранить уже сформированный ответ в кэше — так вместо пяти запросов будет выполнен всего один. Эту задачу необходимо доверить опытным программистам, которые смогут обнаружить запросы, нуждающиеся в оптимизации.
Что такое кэширование?
Кэширование — размещение данных в специально отведенном месте для ускоренного доступа при последующем обращении. При посещении веб-страницы, браузер пользователя сохраняет данные на компьютере, чтобы потом их не скачивать во второй раз, не нагружая базу данных лишними запросами.
Что такое CDN?
CDN распределяет копии контента страницы сайта на множество серверов. Сайт загружается с ближайшего к пользователю сервера CDN. Статический контент кэшируется примерно на неделю, а то и на месяц. Снижается нагрузка на сервер.
Технология CDN позволяет кэшировать изображения и другой статический контент примерно на дней 30. Поэтому, во время загрузки страниц, никаких обращений к серверу для отображения картинок не поступает. Они уже подгружаются с распределенных серверов, значительно снижая нагрузку на основной сервер.
Как быстро проверить все страницы своего сайта на скорость загрузки?
Как сделать массовую проверку всех страниц сайта через GTmetrix API?
GTmetrix – полезный инструмент для проверки скорости сайта. Отображает много сводной информации. Тестовый сервер находится в Ванкувере (Канада).
Если вы имеете навыки программирования, вам может быть полезна эта информация. Зарегистрируйтесь и получите свой ключ API в кабинете.
Бесплатно можете проверить на скорость загрузки до 100 страниц по 20 страниц в день.
GTmetrix API предлагает разработчикам простой способ использовать сервис тестирования производительности GTmetrix. Используя GTmetrix API, вы можете интегрировать тестирование производительности в вашу среду разработки или в ваше приложение.
API-интерфейс GTmetrix основан на API-службах тестирования Web Testing Framework (WTF), который представляет собой RESTful API.
Изучив API, вы сможете легко проверить страницы вашего сайта
Как проверить скорость загрузки сайта через Screaming Frog SEO Spider +xpath
Для того, чтобы проверить скорость загрузки сайта через Screaming Frog SEO Spider +xpath, нам нужно проверить все страницы через Screaming Frog SEO и добавить собранные URL в Google таблицу.
Создаем страницу в Google таблицах
Page speed | URL | Проверка |
https://developers.google.com/speed/pagespeed/insights/?url= | URL для проверки | https://developers.google.com/speed/pagespeed/insights/?url=URL для проверки |
по такому принципу
Там, где поле проверки, выбираем “сцепить” формулой
=$A$2&B2
Дальше нужно проверить все страницы через Screaming Frog SEO и добавить собранные URL в Google таблицу в столбец “URL”.
Дальше скопировать все ссылки, которые образовались в столбе “Проверка”.
Добавить в парсер через Screaming Frog SEO и сделать следующее:
Переходим в настройку парсера
Дальше переходим в Spider Speed Configyration
Потом в Custom — Extraction
Берем данные с сайта
Можем, при желании, воспользоваться плагином в браузере Xpath Helper и достать нужные данные.
Для мобильных:
//*[@id=»page-speed-insights»]/div[2]/div[2]/div[2]/div[1]/div[1]/div/div[1]/a/div[2]
Для компьютеров:
/html/body/div[1]/div/div[2]/div[2]/div[2]/div[2]/div[1]/div/div[1]/a/div[2]
Есть и другие команды, которые также могут быть полезны для вас – подробнее о них смотрите далее.
Подписываем столбцы
Оценка мобильной оптимизации:
(//div[@class=’lh-gauge__percentage’])[2]
Мобильный FCP:
(//div[@class=’metric-value’]//text())[1]
Первая задержка мобильного ввода (FID):
(//div[@class=’metric-value’]//text())[2]
Время загрузки первого контента для мобильных:
(//div[@class=’lh-metric__value’]//text())[1]
Время загрузки достаточной части контента для мобильных:
(//div[@class=’lh-metric__value’]//text())[4]
Индекс скорости загрузки для мобильных:
(//div[@class=’lh-metric__value’]//text())[1]
Время окончания работы ЦП для мобильных:
(//div[@class=’lh-metric__value’]//text())[5]
Время загрузки для взаимодействия для мобильных:
(//div[@class=’lh-metric__value’]//text())[3]
Приблизительное время задержки при вводе для мобильных:
(//div[@class=’lh-metric__value’]//text())[6]
Детали процесса можно узнать здесь:
https://www.screamingfrog.co.uk/web-scraping/
Есть более новый способ сделать это через обновленную версию Screaming Frog SEO Spider 12.6.
Для этого нужно посетить сайт, нажать получить ключ
И ввести его в поле Screaming Frog SEO Spider 12.6 как на скриншоте
и все, можно проверять и получать нужные данные об оценке скорости загрузки страницы.
Проверить через Google Аналитику
Если у вас есть доступ к analytics.google.com вашего сайта, вы сможете измерить скорость загрузки всех ваших страниц.
Группа отчетов «Скорость загрузки сайта» позволяет понять, насколько быстро загружается ваш сайт и насколько оперативно он реагирует на действия пользователей. Такая статистика позволяет оптимизировать сайт и следить за результатами таких изменений.
Отчет «Скорость загрузки сайта» позволяет оценить время реакции ресурса по трем основным показателям:
-
Время загрузки страницы
-
Скорость выполнения или время загрузки любого обращения
-
Скорость, с которой браузер обрабатывает документ
Почитать дополнительную документацию можно здесь:
https://support.google.com/analytics/answer/1205784?hl=ru
Что говорит Google?
Google говорит, что в последнее время скорость работы сайта считается одним из важнейших факторов, который влияет на его общую оценку…
Учитывая, что пользователей, которые посещают сайт с помощью мобильных устройств, становится все больше – Google нацелен на то, чтобы удовлетворить их потребности. Ведь если контент на мобильном устройстве будет грузиться достаточно долго, пользователи будут часто покидать такие страницы, не дожидаясь загрузки. Сайт, который быстро загружается, будет всегда иметь преимущество перед сайтом, который загружается медленнее 3-х секунд.
Ресурсы для проверки загрузки страницы
- https://developers.google.com/speed/pagespeed/insights/
- https://tools.pingdom.com/
- https://www.webpagetest.org/
- https://gtmetrix.com/
- https://analytics.google.com/
Заключение
Скорость влияет и на SEO-продвижение. Поэтому, показатели PageSpeed Insights стоит проверять раз в неделю-месяц, а также исправлять код и настройки сервера. Важно переводить сайты на CDN. Особенно это касается таких сайтов, как каталоги или интернет-магазины. Используйте различные сервисы для проверки скорости сайта, так как на один сервис полагаться не стоит – он не дает целостности всей картины. О том как улучшить показатели скорости загрузки будет отдельная статься.
Заказывайте хостинг и выбирайте домен в компании «Хостинг Украина».
У нас качественный и надежный сервис, удобное система управления через админ-панель, интеллектуальные системы защиты и техническая поддержка, которая поможет решить все возникающие вопросы в любое время суток.
Наши цены: SSD хостинг от 1$, VPS на SSD от 12$, Cloud (облачный) хостинг от 3$, облачный VPS от 6$.
Присоединяйтесь к «Хостинг Украина» и мы позаботимся о технической стороне вашего бизнеса.
Кликай и подписывайся!
Только зарегистрированные пользователи могут оставлять комментарии
Как влияют на SEO cкорость загрузки сайта и показатели Page Speed Insight от Google
Многие клиенты у нас часто спрашивают насколько важно соблюдать рекомендации Page Speed Insight от Google и какие минимальные баллы должны быть у сайта.
Многие клиенты у нас часто спрашивают насколько важно соблюдать рекомендации Page Speed Insight от Google и какие минимальные баллы должны быть у сайта.
Отвечаем честно — этот показатель мало на что влияет при продвижении сайта. В ТОПе часто сидят страницы с 30-40 баллами из 100, а иногда даже встречали сайты, где гугловый сервис вообще показывал 0 баллов.
Пример:
Запрос “купить iphone x”
В выдаче мы видим сайты Restore, Mvideo c примерно 70-ю баллами, но также есть и сайт МТС с 42 баллами из 100:
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fshop.mts.ru%2Fcatalog%2Fsmartfony%2Fapple%2Fiphone-x%2F&tab=desktop
Были бы они выше в поисковой выдачи, если бы они добились тех же 70 баллов из 100, или может быть даже все 100/100? Нет! Так как у МТС на момент съема позиций ассортимент товаров “В наличии” меньше, чем у остальных:
Далее, запрос “Пластиковые окна Москва” — уж какая конкуренция то!
Первый сайт — 85 баллов из 100, неплохо!
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.plastika-okon.ru&tab=desktop
Второй сайт — 56 баллов из 100, — срочно, срочно оптимизировать???!
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.mosokna.ru&tab=mobile
Но ведь третий сайт из выдачи имеет уже 80 баллов из 100:
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fpexay.ru&tab=desktop
То есть ничего делать не нужно?
Нужно! Но без фанатизма. Гнаться за 100/100 смысла нет никакого, это вам не поможет в СЕО и ощутимой разницы пользователи между 70/100 и 100/100 не почувствуют.
Мы в Invicto рекомендуем выполнять следующие требования:
- Сжимать картинки так, чтобы их физический размер не был больше отображаемого на сайте. Здесь речь идет не о придирках Page Speed Insight вроде уменьшите эти картинки на 30 кб, а о более больших проблемах — нередко мы видим каталоги забитые картинками, оптимизация которых может уменьшить вес страницы на 1-2, ато и все 10 мегабайт — если видите такое, то этим определенно стоит заняться!
- Время ответа сервера. Здесь всё просто — следите за тем, чтобы отклик сервера не превышал 0,2 секунды — если 0,5 то ещё терпимо, а вот если секунда-две, то лучше заняться решением проблемы, которая может быть связана с настройкой или просто некачественным хостингом
- Сжимать большие скрипты. Сейчас всё реже, но ранее мы встречали сайты, чьи скрипты можно было просто ужать с помощью gzip на 300-500 килобайт и это значительно улучшало показатели по скорости загрузки.
- Используйте кэш браузера. Здесь всё просто — прописываем кэш для тех ресурсов, для которых это возможно. Не нужно (да вы и не сможете) пытаться прописать кэш для Яндекс Метрики, Google Аналитикс и других сторонних сервисов, как бы настойчиво Page Speed Insight вас об этом не просил.
Что даёт оптимизация скорости?
Во-первых владельцы смартфонов и слабых ПК будут вам во многом благодарны за то, что страницы вашего сайта быстро грузятся и сильно не забивают оперативную память.
Во-вторых если у вас очень долгий ответ сервера, то это и правда может негативно повлиять на позиции вашего сайта, как в Яндексе, так и в Google — висящие по 3-5 и более секунд пустые вкладки браузеров взбесят даже бездушных поисковых роботов.
В-третьих. Краулинговый бюджет — лимит страниц, которые поисковые роботы обходят за определенный лимит времени, например за один день. Чем быстрее обрабатываются ваши страницы, тем больше роботы смогут обработать и отправить в индекс. Это особенно критично для крупных интернет-магазинов. Небольшим сайтам по этому поводу даже можно не заморачиваться.
На этом, пожалуй, всё что вам нужно знать про влияние скорости загрузки сайта и в частности показателей Page Speed Insight на SEO.
P.S. При разработке сайтов мы учитываем все эти рекомендации и делаем всё именно так, чтобы ваш сайт быстро работал и хорошо индексировался.
Google развеял SEO-мифы о скорости загрузки сайтов
В ней сотрудник поисковика Мартин Сплитт рассказал, почему важно оптимизировать скорость загрузки сайта и разрушил несколько SEO-мифов.
Ключевые идеи видео
- Скорость загрузки страниц не настолько важный фактор ранжирования, как думают многие SEO-специалисты. Скорость важна, но быстрые страницы не будут выше в поиске, чем страницы с более релевантным контентом.
- Долгая загрузка вызывает чувство огорчения и разочарования у пользователей, поэтому скорость так важна для поисковика.
- В мире много областей с плохим интернетом. Этот факт нужно учитывать при разработке сайтов.
- Средний размер веб-страниц обычно составляет несколько мегабайт. Рекомендуемый размер должен составлять около 500 KB. Чем меньше размер страницы, тем быстрее она будет загружаться.
- Обычно SEO-специалисты все делают правильно, когда речь заходит об оптимизации скорости, но есть несколько проблемных моментов. Например, многие думают, что использование изображений минимального размера положительно влияет на скорость, а тактика «ленивой» загрузки не всегда в приоритете у специалистов.
- SEO-специалистам не стоит зацикливаться на отчетах и рекомендациях инструментов, таких как Lighthouse. Сервис может подсчитать, что конкретное изменение уменьшит скорость загрузки страницы на X секунд, но внедренные изменения не всегда могут привести к немедленному увеличению скорости сайта.
- Специалистам не стоит заблуждаться, думая, что сайт работает быстро, потому что он быстро загружается на их смартфон последней модели. Разные виды устройств загружают сайты с разной скоростью. Оптимизаторам следует отслеживать, с каких устройств пользователи заходят на ваш сайт, и оптимизировать скорость под них. Можно даже купить наиболее используемое устройство, чтобы понимать, как пользователи видят ваш сайт.
AMP не является фактором ранжирования.
- Технология AMP важна в той мере, в какой важна скорость страницы. Но само по себе использование AMP не является сигналом при ранжировании.
- Скорость сайта учитывается как фактор, когда есть две страницы с приблизительно одинаковым содержимым. Более быстрая страница в таком случае окажется выше более медленной.
13 лучших инструментов для проверки скорости загрузки страниц сайта – Блог TRINET
Зачем увеличивать скорость сайта?
Скорость загрузки сайта — один из важных факторов ранжирования в поисковой выдаче. Она влияет на улучшение поведенческих факторов, например:
- уменьшает количества отказов
- увеличивает глубину просмотра
- увеличивает время изучения сайта
и как следствие увеличивается конверсия, так как быстрым сайтом удобно пользоваться.
Что важно измерять и какие инструменты для этого нужны:
Оценка от Google — формальный параметр оценки скорости загрузки сайта в пожалуй самом популярном сервисе PageSpeed Insights. Многие другие сервисы работают по тому же принципу и мало чем друг от друга отличаются, например: Seolik.ru, Pr-cy.ru, Uptrends, Pingdom Tools. Наиболее информативным из всех на наш взгляд является Gtmetrix. Все эти сервисы дают советы и рекомендации по улучшению сайта, чтобы он загружался быстрее.
Время ответа сервера — это время, которое проходит между отправкой запроса серверу и получением первой информации от него.
Для проверки времени ответа сервера можно использовать панель вебмастера Яндекс.
Порядок работы через Яндекс.Вебмастер:
- Заходим в систему https://webmaster.yandex.ru/
- Нажимаем “Инструменты” в правом верхнем углу
- Переходим “Проверка ответа сервера” https://webmaster.yandex.ru/tools/server-response/
- Проверяем время ответа сервера в миллисекундах
Хорошим ответом является менее 1000 мс, что равнозначно 1 сек.
Порядок работы через Google Chrome
- Заходим в браузер
- Переходим на страницу, на которой хотим измерить скорость ответа сервера
- Нажимаем правой кнопкой мыши
- Выбираем пункт “Посмотреть код”
- В открывшемся окне выбираем вкладку “Network”
- Нажимаем кнопку Ctrl+F5
- Chrome показывает на диаграмме Ганта, как загружаются все части сайта.
Такой проверкой можно понять, что загружается медленно.
Время до отрисовки — это время от перехода на страницу до начала появления страницы в браузере. Именно этот параметр воспринимается пользователями, как скорость сайта. Есть сервисы, которые могут показать отрисовку сайта по секундам, например: WebPagetest, Dareboost.
Такая проверка очень удобна для демонстрации клиентам.
Время полной загрузки (время до загрузки DOM) — это время, за которое загрузился весь контент страницы — картинки, скрипты, CSS, и т. п.
Для больших международных сайтов важна скорость загрузки из разных точек мира, а не одной локальной страны. Для этого можно воспользоваться следующими сервисами: Sitespeed.me — 7 точек, GiftofSpeed — 8 точек, Dotcom-Monitor — 25 точек (тестирует скорость загрузки при первом визите и при повторном).
Также для больших проектов важно понимать, как будет меняться скорость загрузки с увеличением нагрузки на сервер для этого есть сервис Load Impact.
Проверка скорости по отчетам из веб-аналитики
Чтобы увидеть статистику скорости загрузки с выборкой по большому числу пользователей, а также посмотреть динамику изменения скорости загрузки за длительный период можно воспользоваться сервисами Яндекс.Метрика и Google Analytics .
Проверка скорости через сервис Яндекс.Метрика
Для этого нужно:
- Зайти в Метрику
- Выбрать интересующий сайт
- Нажать: Отчёты — Стандартные отчёты — Мониторинг — Время загрузки страниц.
Какую полезную статистику можно получить из этих данных?
Можно увидеть, какая скорость загрузки сайта у реальных пользователей, найти наиболее медленные страницы на сайте, понять, из каких регионов сайт загружается быстрее.
Проверка скорости через сервис Google Analytics
- Зайти в Analytics
- Выбрать нужный сайт
- Нажать Отчеты — Поведение — Скорость загрузки сайта
Как использовать полученную информацию и как увеличить скорость загрузки сайта?
Время ответа сервера
Для уменьшения времени ответа сервера рекомендуем сделать следующие действия:
- Выбрать надежного хостера с мощными серверами и хорошим каналом связи;
- Арендовать выделенный сервер;
- Использовать кэширование страниц;
- Оптимизировать базы данных;
- Использовать кэширование скриптов;
- Не используйте обращения к сторонним серверам.
Кеширование
Кэширование — это размещение информационных данных в определенном месте на компьютере для ускоренного доступа к ним в будущем. Чтобы информация не загружалась каждый раз заново при открытии сайта, какое-то время они хранится на компьютере.
Например, при переходе со страницы на страницу картинка логотипа хранится на компьютере пользователя. Конечно кэширование может быть запрещено юзером. Время хранения файлов на компьютере пользователя может меняться в зависимости от их типа. Гугл может вам снизить свои баллы, если время хранения файлов недостаточно долгое. Можно настроить время этого хранения например через htaccess.
Картинки
Не стоит использовать слишком большие размеры изображений, чем это необходимо для сайта. Рекомендуем уменьшить все изображения до размеров, в которых они отображаются на сайте.
Google PageSpeed Insights рекомендует использовать формат изображений WebP. Но такой формат не поддерживается сервисом Яндекс.Картинки. Если у вас тематика, связанная с большим трафиком из Яндекс.Картинок, мы рекомендуем использовать PNG и JPG. Их нужно максимально сжать без потери качества.
Если у вас, например, большой тяжелый лонгрид с множеством иллюстраций, то вам поможет “ленивая загрузка” картинок. В таком случае изображения будут подгружаться только тогда, когда пользователь до них доберётся на странице.
Из-за того, что количество потоков загрузки сайта ограничено, все картинки грузятся отдельным потоком. Для ускорения загрузки нужно уменьшить количество потоков. Поэтому, если на сайте много мелких картинок (инфографики, иконок меню и т.д.) их лучше свести в один файл.
Скрипты и CSS
Так как уже говорилось ранее — количество потоков загрузки сайта ограничено. А каждый скрипт и каждая CSS занимает свой поток, то нужно также сократить количество их одномоментной загрузки. Для этого нужны следующие действия:
1. Отключить лишние CSS и скрипты. Часто бывает, что когда-то давно на сайт были добавлены скрипты, или обновлены CSS, а теперь они не используются, но всё равно продолжают подгружаться, занимая потоки загрузки. Нужно проверить все скрипты и CSS и отключить лишние.
2. Соединить CSS в один файл, также для уменьшения количества потоков.
3. Google PageSpeed Insights также порекомендует свести скрипты в один файл, но это практически невозможно.
Для ускорения загрузки страницы со скриптами рекомендуем отложенную или асинхронную загрузку скриптов. В этих случаях загрузка скрипта не блокирует дальнейшую обработку страницы, а сам скрипт выполняется либо после полной загрузки страницы (отложенная) или сразу после загрузки скрипта (асинхронная).
Обычная загрузка
Асинхронная загрузка
Отложенная загрузка
Дополнительно возможности увеличения скорости загрузки сайта.
Вы можете добавить турбо-страницы. Такая технология уменьшает скорость загрузки с мобильных устройств для пользователей из поисковой выдачи Яндекса, улучшает ранжирование в ПС Яндекс, а значит и число пользователей из этого источника.
Для информационных сайтов возрастет трафик, но часто падает прибыли с платной рекламы, так-как на турбо-страницах возможно размещать рекламу только РСЯ.
Использование турбо-страниц на коммерческих сайтах может привести к снижению конверсии, так как функционал этой технологии ограничен, и пользователи не увидят дизайн как у вашего сайта, форм захвата и т.д.
Чтобы понять выгодно это для вас или нет рекомендуем проводить тестирование. Подключить турбо страницы достаточно просто — через функционал Яндекс Вебмастер.
На позиции в Google использование турбо-страниц никак не влияет.
Значок отображает турбо страницу
Пример турбо для интернет-магазина
С AMP страницами немного другая картина. Технология AMP создана независимыми разработчиками и активно продвигается в Гугле. Эта технология улучшит скорость загрузки и ранжирование страниц именно в Google. Для некоторых CMS (например WordPress) есть плагины, которые могут автоматически формировать AMP страницы в других случаях придется прибегнуть к помощи разработчиков.
Итог
Мы крайне рекомендуем провести проверку вашего ресурса и его различных страниц на скорость загрузки — это поможет и ранжированию, и конверсии. Если у вас возникнут вопросы, задавайте их в комментариях. Если вы не хотите разбираться самостоятельно, то закажите технический аудит у компании TRINET, и мы поможем вам с увеличением скорости загрузки сайта и с любыми другими вопросами по продвижению сайта.
Ускорение загрузки сайта в Google Analytics
Пользователям нравятся быстрые сайты. Такие сайты, как правило, имеют более низкие показатели отказов, более высокую удовлетворенность клиентов и эффективное взаимодействие.
Чтобы помочь владельцам сайтов улучшать производительность сайтов, команда Google Analytics запустила новый отчет «Предложения по ускорению загрузки» (Speed Suggestions).
Теперь вы можете не только измерять и визуализировать производительность вашего сайта, но и ускорять медленные страницы, следуя рекомендациям Google. Предложения по увеличению скорости загрузки подбираются специально для вашего сайта.
1. В отчете «Ускорение загрузки» вы найдете среднее время загрузки для самых посещаемых страниц вашего сайта. Чтобы просмотреть «Предложения по увеличению скорости загрузки» сайта перейдите во вкладку Поведение > Скорость загрузки сайта > Ускорение загрузки.
Ускорение загрузки сайта в Google Analytics2. Нажмите на название интересующей вас страницы в столбце Предложения Page Speed. Вам откроется страница Page Speed Insights.
Ускорение загрузки сайта в Google AnalyticsИнструмент PageSpeed Insights, интегрированный в Google Analytics анализирует содержание страницы, скорость ее загрузки и генерирует конкретные предложения по улучшению.
3. Нажимайте на ссылки на панели навигации, чтобы прочитать советы по увеличению скорости загрузки сайта страницы. Вы узнаете, почему вам была дана та или иная рекомендация и как применить ее на практике.
Ускорение загрузки сайта в Google AnalyticsОценка скорости загрузки страницы показывает, насколько вы можете повысить скорость загрузки той или иной страницы. Чем выше эта оценка, тем меньше потенциальный прирост. Оценивается не сама скорость, а потенциал ее увеличения. Оценка 100 означает, что система проанализировала страницу, но не может предложить никаких рекомендаций по ускорению ее загрузки.
Как скорость загрузки сайта влияет на ранжирование
Влияние скорости загрузки сайта на его ранжирование
Точно сказать можно одно: чем больше будет скорость загрузки сайта, тем лучше, ведь посетителям не нужно долго ждать когда контент отобразиться в браузере, особенно это актуально для владельцев мобильных устройств. Если же сайт грузится очень медленно, то согласно официальной позиции Google такой сайт может потерять свои позиции в поисковой выдаче.
Какова же должна быть скорость загрузки сайта? Лучше всего, чтобы она была в диапазоне 1-5 секунд. Если скорость превышает данный диапазон, то следует обратить внимание, почему это происходит и, возможно, потребуется выбрать другой хостинг и (или) оптимизировать сайт .
Какие факторы влияют на скорость загрузки страницы?
Можно выделить несколько основных: производительность сервера, его загруженность и время отклика сервера, но также важным критерием является и сам сайт. Обилие тяжелой графики, flash анимации и JS скриптов могут негативно сказываться на скорости сайта. На производительность же сервера влияет, в первую очередь, оборудование, используемое хостинг-провайдером. Проверьте, не экономит ли на оборудовании ваш хостинг-провайдер. Данную информацию всегда можно получить от службы поддержки. Чтобы проверить показатель загруженности сервера, можно взять тестовый период, который предлагают многие хостинг-провайдеры. Также можно использовать различные скрипты для оценки производительности сервера.
Чем ниже время отклика тем лучше, тогда сайт будет загружаться быстрее. Если сайт насыщен множеством графических элементов и динамических блоков, то его необходимо расположить географически ближе к целевым пользователям (CDN). Остальные пользователи могут не беспокоится, расположен ли сайт в их городе или в другой стране.
По вопросу влияет ли скорость сайта на ранжирование можно сказать однозначно, что поисковая система Google учитывает скорость загрузки сайта в поисковой выдаче, получая информацию о скорости загрузки страниц из разных источников в т.ч. браузера Google Chrome и Google Analytics. Официальных заявлений от Яндекс не поступало, однако большинство SEO оптимизаторов сходятся во мнении, что скорость сайта является важным показателем и для Яндекса, который в свою очередь также учитывает ее при ранжировании сайта.
Новые отраслевые эталоны скорости загрузки мобильных страниц
Сегодня очень важно, чтобы маркетологи создавали быстрые веб-интерфейсы во всех отраслях промышленности. Люди хотят быстро оплачивать счета на финансовых сайтах, быстро получать результаты при просмотре отзывов об отпусках и сразу же просматривать статью при нажатии на нее. А если будет слишком много трений, они покинут сайт и двинутся дальше.
Хорошие новости. Поскольку в прошлом году мы изучили скорость загрузки мобильных страниц, среднее время, необходимое для полной загрузки целевой страницы для мобильных устройств, сократилось на семь секунд. 1 Плохая новость заключается в том, что, согласно нашему новому анализу, это все еще занимает около 15 секунд. Это слишком медленно, если учесть, что более высокая скорость мобильного сайта заставляет людей просматривать больше страниц на сайте, совершать больше конверсий и покупать больше на сайтах большинства брендов. 2
Наши данные показывают, что, хотя более половины общего веб-трафика приходится на мобильные устройства, коэффициент конверсии на мобильных устройствах 3 ниже, чем на компьютерах. 4 Короче говоря, скорость равняется доходу.
В прошлом месяце, чтобы лучше понять, как обстоят дела у рекламных партнеров Google, мы провели анализ 11 миллионов целевых страниц мобильных объявлений в 213 странах. 5 Этот анализ подтвердил наш тезис: несмотря на то, что большая часть трафика сейчас идет по 4G вместо 3G, 6 , большинство мобильных сайтов по-прежнему медленные и перегружены слишком большим количеством элементов.
Мы углубились в широкий спектр секторов, от финансов до путешествий. Страницы из автомобильного, розничного и технологического секторов в среднем загружаются дольше всех. А еще у них одни из самых раздутых страниц в сети.
Наше исследование открыло глаза. Для 70% проанализированных нами мобильных целевых страниц требовалось более пяти секунд для отображения на экране визуального контента в верхней части страницы и более семи секунд для полной загрузки всего визуального контента в верхней и нижней части страницы. 7
Мы также обучили глубокую нейронную сеть — компьютерную систему, смоделированную на основе человеческого мозга и нервной системы — с большим набором данных отказов и конверсий. Нейронная сеть, точность прогнозов которой составляла 90%, обнаружила, что по мере того, как время загрузки страницы увеличивается с одной до 10 секунд, вероятность того, что посетитель мобильного сайта подпрыгнет, увеличивается на 123%. Точно так же, когда количество элементов — текст, заголовки, изображения — на странице увеличивается с 400 до 6000, вероятность конверсии падает на 95%. 8
5 способов оптимизировать ваш сайт в соответствии с критериями скорости загрузки страниц Google
В мае 2018 года Google выпустил Lighthouse 3.0, обновленная версия их инструмента с открытым исходным кодом для аудита качества и скорости веб-страниц. Lighthouse 3.0 предлагает новые параметры вывода для отчетов, а также ряд изменений в способе измерения скорости и производительности сайта, таких как введение First Contentful Paint в качестве показателя производительности и скорости, а также новые весовые коэффициенты для аудита производительности.
А с мая 2018? Google выпустил еще больше изменений. Вот почему мы расскажем о пяти способах оптимизации вашего сайта сегодня.
Приступим.
Зачем оптимизировать скорость вашего сайта сейчас?
Lighthouse продолжал развиваться за год, прошедший с момента падения 3.0. Google недавно объявил, что работает над «пакетами платформы» для Lighthouse, с помощью которых тестировщики могут получать советы по оптимизации скорости, специфичные для CMS и библиотек кода, используемых на их сайтах.
Итак, если вы, например, используете Angular JavaScript с WordPress, вам повезло, но другие варианты пакетов платформы уже находятся в стадии разработки с помощью сообщества GitHub.
Источник изображения
Google постепенно повышает важность скорости сайта как критерия ранжирования в поисковой сети с момента первого внедрения индекса Mobile-first в 2016 году, поэтому разумно обратить внимание на эти показатели и тенденции. Google выпустил около 62 обновлений настроек алгоритма в течение в среднем недель в 2018 году, поэтому обеспечение хорошего ранжирования становится все более динамичной практикой. А учитывая относительную новизну индекса, ориентированного на мобильные устройства, а также его непропорциональное влияние на посещаемость веб-сайта, имеет смысл, что большая часть усовершенствований алгоритма будет сосредоточена на мобильных устройствах.
Пожалуй, самым сильным аргументом в пользу того, чтобы пристально следить за Lighthouse, является то, что это первый случай, когда Google создал инструмент самообслуживания для измерения скорости, который пытается воспроизвести время задержки, которое испытывают реальные посетители сайта, а не боты.
«Многие из этих показателей, которые вы просматриваете в Lighthouse, в первую очередь представлены вам с точки зрения пользователя», — объяснил аналитик трендов для веб-мастеров Джон Мюллер в феврале во время сеанса вопросов и ответов на видеовстрече в рабочее время.«С нашей точки зрения, с точки зрения поиска, мы объединяем множество этих показателей, чтобы выяснить, каким мы должны видеть этот сайт с точки зрения скорости».
Помня об этом, мы собрали пять советов, которые помогут вам порадовать богов Google скоростью вашего сайта.
1. Реализовать отложенную загрузку
Изображения с высоким разрешением могут значительно замедлить время загрузки вашего веб-сайта, а также увеличить объем памяти и вес страницы. Вы можете полностью удалить их со своего сайта, но, возможно, они вам понадобятся или вы действительно захотите оставить их.Ленивая загрузка — это способ ускорить время загрузки страницы без необходимости избавляться от любого вашего ресурсоемкого контента.
Источник изображения
При отложенной загрузке одновременно загружается только часть веб-страницы — раздел, на который зритель смотрит в эту секунду, поэтому вы отложите загрузку следующей части, пока посетитель не прокрутит ее вниз. Это сокращает время, необходимое для достижения таких показателей, как First Meaningful Paint и First Content Paint, которые являются двумя метриками, которые Lighthouse использует для измерения скорости и производительности сайта.
Ленивая загрузка необходима, если вы реализовали «бесконечную прокрутку», которая популярна на сайтах с большим количеством контента, но может помочь на всех типах веб-сайтов. Фактически, платформа веб-дизайна Duda обнаружила, что после реализации ленивой загрузки на сайтах, поддерживаемых Duda, эти объекты получили в среднем 10 баллов при повышении оценки Lighthouse — ничего страшного —
.2. Максимально используйте форматы изображений нового поколения
Одной из главных причин медленного времени First Contentful Paint являются ваши изображения.Проблема в том, что когда дело доходит до маркетинга и продаж, картинка действительно стоит тысячи слов, так что вы будете правы, если не откажетесь от дизайна, в котором предпочтение отдается крупным изображениям-героям. Наряду с отложенной загрузкой решением являются форматы изображений следующего поколения.
Форматы следующего поколения включают JPEG 2000, JPEG XR и WebP. Эти форматы сжимают и конвертируют изображения, чтобы сделать их намного меньше традиционных PNG и JPG, но они не оказывают отрицательного влияния на качество изображения. Используя форматы следующего поколения, вы можете значительно ускорить загрузку страницы даже для визуальных элементов с большими размерами пикселей, не жертвуя качеством изображения.Посмотрите данные Insane Lab, которые показали, насколько файлы WebP меньше, чем файлы PNG:
Google особенно поощряет веб-мастеров использовать собственное новое форматирование WebP, которое поддерживается браузерами Chrome и Opera. WebP создает изображения, которые на 26% меньше, чем PNG, и на 25-35% меньше, чем форматы JPG.
3. Используйте сеть доставки контента
Сеть доставки контента или CDN — отличное решение для ускорения загрузки вашей страницы, что является вторым по важности показателем для хорошего рейтинга производительности в Lighthouse 3.0.
По сути, CDN — это сеть серверов, которые распределены по всему миру и работают вместе для доставки вашего контента. Поскольку серверы в CDN географически рассредоточены, всегда есть один, ближайший почти к каждому пользователю, что сокращает время, необходимое для того, чтобы ваш контент достиг их браузера.
Источник изображения
Сети CDNтакже часто используют передовые методы сжатия, такие как минификация и сжатие файлов, которые помогают быстрее передавать ресурсы контента, предлагая лучшую доступность и избыточность контента, так что интенсивный трафик не прерывает работу вашего веб-сайта.CDN с меньшей вероятностью выйдут из строя из-за аппаратного сбоя. Крупные сайты с большим количеством контента, которые полагаются на сверхбыструю загрузку, такие как Netflix, Facebook и Amazon, используют CDN.
4. Избавьтесь от ненужных плагинов
Если у вас есть сайт, работающий на WordPress или аналогичной платформе, которая полагается на плагины для дополнительной функциональности, эти плагины могут снижать скорость отклика вашего сайта, влиять на его показатели интерактивности и снижать показатели производительности Lighthouse 3.0.
Некоторые плагины могут быть жизненно важными для вашего сайта, например, ваша платежная система, но другие могут больше не служить большой цели. Многие плагины запрашивают информацию у сторонних серверов, что может еще больше замедлить работу. В недавнем опросе DigWP более 900 профессионалов WordPress указали количество плагинов, которое они обычно считают порогом «слишком много», при этом 75% респондентов согласились с тем, что 25 — это предел. Более трети респондентов рекомендовали 10 в качестве лимита.
Дополнительные плагины могут привести к раздуванию базы данных, необоснованному увеличению веса вашего сайта, что значительно замедлит его загрузку, поэтому чем их меньше, тем лучше.
5. Удалите правила CSS, которые вы не используете.
CSS-правила вашего сайта определены в файле main.css. Ее также называют внешней таблицей стилей, поскольку она хранится отдельно от HTML-кода сайта. Чтобы ваш сайт загрузил First Contentful Paint, которая имеет большое влияние на производительность в соответствии с новой версией Lighthouse, браузер должен сначала получить, проанализировать и обработать каждую таблицу стилей CSS, чтобы определить, как будет отображаться контент.
В результате неизбежно, что каждый лишний файл CSS замедляет время загрузки страницы и немного больше влияет на производительность.Для каждого файла браузер должен получить к нему доступ, загрузить и только после этого отобразить страницу.
Источник изображения
Сокращение ваших файлов CSS с помощью такого плагина, как Fast Velocity Minify, может очень помочь с вашими оценками Lighthouse, но вы можете сделать больше, чтобы время загрузки CSS не мешало вам. Удаление всех неиспользуемых определений CSS еще больше ускоряет работу и оптимизирует производительность вашего веб-сайта для повышения рейтинга Google.
Следование критериям скорости Google повышает производительность
Внедрение и постоянная разработка Lighthouse 3.0 следует рассматривать как еще одно напоминание о важности оптимизации вашего сайта в соответствии с последними критериями скорости Google. Избавившись от правил CSS и плагинов, которые вам не нужны, используя CDN и форматы изображений следующего поколения, а также максимально используя ленивую загрузку, вы можете оптимизировать свой сайт, сократить время загрузки страницы и повысить производительность, чтобы оставаться в Google. хорошие книги.
Об авторе
Консультант, специалист по социальным сетям и блоггер из Тель-Авива, Габриэль Садех помогает брендам делиться своим мнением и расширять свой бизнес с помощью эффективных стратегий цифрового маркетинга.Лучший способ связаться с ней — через ее профиль в LinkedIn.
Скорость страницы — Рекомендации веб-сайта 2021
Скорость страницы — это показатель того, насколько быстро загружается контент на вашей странице.
Что такое скорость страницы?
Скорость страницы часто путают со «скоростью сайта», которая на самом деле является скоростью страницы для выборки просмотров страниц на сайте. Скорость страницы может быть описана либо как «время загрузки страницы» (время, необходимое для полного отображения содержимого на определенной странице), либо «время до первого байта» (сколько времени требуется вашему браузеру, чтобы получить первый байт информации от веб-сервер).
Вы можете оценить скорость своей страницы с помощью Google PageSpeed Insights. PageSpeed Insights Speed Score включает данные из CrUX (отчета об опыте пользователя Chrome) и отчеты о двух важных показателях скорости: First Contentful Paint (FCP) и DOMContentLoaded (DCL).
Лучшие методы SEO
Google указал, что скорость сайта (и, как следствие, скорость страницы) является одним из сигналов, используемых его алгоритмом для ранжирования страниц. И исследования показали, что Google может специально измерять время до первого байта, когда он учитывает скорость страницы.Кроме того, низкая скорость страницы означает, что поисковые системы могут сканировать меньше страниц, используя выделенный для них бюджет сканирования, и это может негативно повлиять на вашу индексацию.
Скорость страницы также важна для взаимодействия с пользователем. Страницы с более длительным временем загрузки, как правило, имеют более высокий показатель отказов и более низкое среднее время на странице. Было также показано, что более длительное время загрузки отрицательно влияет на конверсию.
Вот некоторые из многих способов увеличить скорость вашей страницы:
Включить сжатие
Используйте Gzip, программное приложение для сжатия файлов, чтобы уменьшить размер ваших файлов CSS, HTML и JavaScript, размер которых превышает 150 байт. .
Не используйте gzip для файлов изображений. Вместо этого сожмите их в такой программе, как Photoshop, где вы можете сохранить контроль над качеством изображения. См. «Оптимизация изображений» ниже.
Минимизируйте CSS, JavaScript и HTML
Оптимизируя код (включая удаление пробелов, запятых и других ненужных символов), вы можете значительно увеличить скорость загрузки страницы. Также удалите комментарии к коду, форматирование и неиспользуемый код. Google рекомендует использовать CSSNano и UglifyJS.
Уменьшить перенаправления
Каждый раз, когда страница перенаправляется на другую страницу, ваш посетитель сталкивается с дополнительным временем ожидания завершения цикла HTTP-запрос-ответ.Например, если ваш шаблон переадресации для мобильных устройств выглядит следующим образом: «example.com -> www.example.com -> m.example.com -> m.example.com/home», каждое из этих двух дополнительных переадресаций делает вашу страницу загружается медленнее.
Удалите JavaScript, блокирующий рендеринг.
Браузеры должны построить дерево DOM, анализируя HTML, прежде чем они смогут отобразить страницу. Если ваш браузер обнаруживает скрипт во время этого процесса, он должен остановиться и выполнить его, прежде чем он сможет продолжить.
Google рекомендует избегать и минимизировать использование блокирующего JavaScript.
Использование кеширования браузера
Браузеры кэшируют большой объем информации (таблицы стилей, изображения, файлы JavaScript и т. Д.), Поэтому, когда посетитель возвращается на ваш сайт, браузеру не нужно перезагружать всю страницу. Используйте такой инструмент, как YSlow, чтобы узнать, установлена ли у вас уже установленная дата истечения срока действия вашего кеша. Затем установите заголовок «expires» на то, как долго вы хотите, чтобы эта информация была кэширована. Во многих случаях, если дизайн вашего сайта не меняется часто, год является разумным периодом времени.Здесь у Google есть дополнительная информация об использовании кеширования.
Увеличьте время отклика сервера
На время отклика вашего сервера влияет объем получаемого вами трафика, ресурсы, которые использует каждая страница, программное обеспечение, которое использует ваш сервер, и используемое вами решение для хостинга. Чтобы уменьшить время отклика сервера, ищите узкие места производительности, такие как медленные запросы к базе данных, медленная маршрутизация или недостаток памяти, и устраняйте их. Оптимальное время ответа сервера — менее 200 мс. Узнайте больше об оптимизации времени до первого байта.
Использование сети распространения контента
Сети распространения контента (CDN), также называемые сетями доставки контента, представляют собой сети серверов, которые используются для распределения нагрузки по доставке контента. По сути, копии вашего сайта хранятся в нескольких географически разнесенных центрах обработки данных, чтобы пользователи имели более быстрый и надежный доступ к вашему сайту.
Оптимизировать изображения
Убедитесь, что ваши изображения не больше, чем они должны быть, что они находятся в правильном формате файла (PNG обычно лучше для графики с менее чем 16 цветов, в то время как JPEG обычно лучше для фотографий) и что они сжаты для Интернета.
Используйте спрайты CSS для создания шаблона для изображений, которые вы часто используете на своем сайте, например кнопок и значков. CSS-спрайты объединяют ваши изображения в одно большое изображение, которое загружается сразу (что означает меньшее количество HTTP-запросов), а затем отображает только те разделы, которые вы хотите показать. Это означает, что вы экономите время загрузки, не заставляя пользователей ждать загрузки нескольких изображений.
Продолжайте учиться
Как скорость страницы влияет на SEO и рейтинг Google
Скорость очень важна для веб-сайта.Это так важно, что Google сделал это фактическим фактором ранжирования. Со временем Google предпринял меры по повышению скорости загрузки веб-сайтов, предоставив набор инструментов для разработчиков и веб-мастеров. Один из таких инструментов — Google Lighthouse.
Но как на самом деле работает этот инструмент PageSpeed Insights от Google? И, что более важно, влияет ли скорость страницы на SEO ? В этой статье вы найдете все, что вам нужно знать.
В прошлом инструмент PageSpeed Insights не пользовался успехом.Большую часть информации можно было относительно легко найти в другом месте, и она не совсем отражала скорость. Однако недавно Google обновил этот инструмент, и он стал намного лучше. К сожалению, это также намного сложнее понять.
Однако этот инструмент стал популярным среди оптимизаторов поисковых систем благодаря PageSpeed Insights , который, по сути, работает на Lighthouse, но предоставляет информацию в удобном для понимания формате на веб-странице.
- Что такое Google PageSpeed Insights?
- Mobile vs.Рабочий стол
- Какова на самом деле скорость страницы?
- Влияет ли PageSpeed Insights на SEO? Имеет ли значение 100/100 баллов?
- Показатели PageSpeed Insights
- Полевые и лабораторные данные (показатели производительности)
- Возможности и диагностика
- Как рассчитывается показатель PageSpeed Insights?
- Ключевые моменты повышения рейтинга PageSpeed Insights
- Время ответа сервера
- Сжатие изображения
- Структура HTML и CSS
- Минификация и сжатие скриптов
- Политика кэширования
- Легкая тема и плагины
- Как массово проверить показатель PageSpeed Insights
- Другие инструменты для измерения и повышения скорости загрузки сайта
- Pingdom
- GT-Metrix
- mod_pagespeed
- Google AMP (ускоренные мобильные страницы)
Что такое Google PageSpeed Insights?
PageSpeed Insights — это онлайн-инструмент, предоставляемый Google, который используется для выявления проблем веб-производительности на сайтах.Хотя эти инструменты в основном связаны с техническими проблемами SEO , они также анализируют сайт с точки зрения взаимодействия с пользователем и доступности.
Вы можете получить доступ к PageSpeed Insights, посетив https://developers.google.com/speed/pagespeed/insights/.
Вы можете ввести здесь URL-адрес, и через несколько секунд инструмент вернет страницу с некоторыми результатами, касающимися производительности вашего веб-сайта. Вверху будет общий балл, который представляет собой среднее значение нескольких факторов.Ниже вы увидите подробную информацию о том, что на самом деле влияет на вашу скорость.
Однако это не единственный инструмент PageSpeed, предоставляемый Google. Также есть mod_pagespeed, серверный модуль, используемый для решения этих проблем со скоростью, и полноценный Lighthouse (инструмент анализа сайта, который поддерживает все), доступный в самом Chrome. Существует также ряд расширений Chrome, связанных с Google PageSpeed Insights.
В этой статье мы кратко обсудим все из них, но в основном сосредоточимся на PageSpeed Insights, поскольку это, по-видимому, самый удобный инструмент, который большинство оптимизаторов поисковых систем используют при проверке веб-сайта.
Мобильные и настольные
Когда вы вставляете страницу для ее тестирования, Google выставляет две оценки: одну для мобильной версии и одну для настольной версии.
Изначально инструмент PageSpeed Tool дал только один балл для настольной версии. Но в последнее время использование мобильных устройств становится все более популярным. По состоянию на 2018 год более 50% пользователей поисковых систем выполняют поиск с мобильных устройств. Когда Google перешел на индекс для мобильных устройств, для них также имело смысл сначала протестировать мобильные версии на скорость.
Однако, если у вас гибкий дизайн, вы можете подумать, что эти версии в основном идентичны.
Если да, то почему у них разные оценки?
Mobile: Когда вы используете инструмент PageSpeed Insights, первое, что вы получите, — это скорость мобильной связи. Это означает, что ваш веб-сайт был протестирован с использованием мобильного подключения, возможно, с подключением 4G, поскольку это, по крайней мере, самая распространенная скорость в США.
https://www.uscellular.com/coverage-map/voice-and-data-maps.html
Однако имейте в виду, что многие мобильные пользователи по всему миру по-прежнему получают только сигнал 3G и, хотя у них более низкая скорость соединения, они все же ожидают, что веб-сайт будет загружаться очень быстро.
И вот в чем проблема. Дело не всегда в вашем сайте, дело в скорости соединения. Может показаться, что ваш сайт работает медленно, хотя на самом деле скорость соединения низкая.
Настольный компьютер: На настольном компьютере оценка выше, потому что скорость соединения выше. Именно так обстоят дела со светом и волоконной оптикой. Если, конечно, вы не живете в Великобритании, и у вас все еще есть чашки и Интернет на веревках.
Итак, веб-сайт проходит такое же тестирование, но отличается в основном скоростью соединения.
Вот почему мобильные устройства на первом месте, поскольку мобильные устройства обычно имеют более медленное соединение. С 5G все может измениться, но до тех пор убедитесь, что вы сосредоточились на повышении скорости своего сайта для мобильных устройств.
Что такое скорость страницы?
Итак, мы знаем, что делает этот инструмент: он выставляет оценку в зависимости от того, насколько быстрым, по его мнению, является ваш сайт. Но что такое скорость страницы?
Page Speed - это скорость, с которой отдельная страница загружается на ваш сайт. Разные страницы могут иметь разную скорость из-за таких факторов, как изображения и скрипты.
Но скорость относительна. Это зависит от многих факторов, таких как производительность веб-сайта, производительность сервера, конкретная веб-страница, на которой вы находитесь, тип подключения, интернет-провайдер пользователя, интернет-пакет, вычислительная мощность устройства, браузер, пользователь делает в этот момент, сколько приложений запущено и так далее.
Однако мы можем работать только с тем, что умеем работать, а именно с нашим веб-сайтом и нашим сервером. Все остальное мы действительно не контролируем.
Попросту говоря, скорость страницы — это не показатель, как в PageSpeed Insights. Это время загрузки веб-страницы, которое измеряется в секундах. Вот что важно.
Вот почему в прошлом Google PageSpeed Insights был не так хорош. Он не совсем давал вам информацию о том, насколько быстро ваш сайт загружается.Просто забивает.
И именно поэтому эта новая версия так хороша. Он сообщает вам все, что вам нужно знать о фактической скорости загрузки, а также сохраняет хорошие вещи из старой версии.
Есть, конечно, разные моменты времени загрузки. Например, вы можете захотеть запустить несколько скриптов ближе к концу, потому что их не нужно использовать изначально.
Для завершения загрузки может потребоваться много времени, поэтому общее время загрузки может быть больше.Но если до этого момента сайтом можно будет пользоваться, это не такая уж большая проблема.
Например, предположим, что вы хотите запустить всплывающий скрипт с намерением выхода. Для загрузки этого сценария требуется примерно 5–10 секунд. Однако вы хотите показать его пользователю только через 20-30 секунд.
Если вы начнете запускать свой скрипт немедленно, вы можете отложить загрузку других важных элементов, таких как первое, что должен увидеть пользователь: содержимое над сгибом.Это было бы очень плохо, тем более, что вы не собираетесь использовать этот скрипт примерно через 20-30 секунд в будущем.
Таким образом, вы можете отложить загрузку скрипта после всего остального, что жизненно важно, загрузки, чтобы дать пользователю лучший опыт.
Однако, если у вас есть сценарий, который заставляет меню работать, или что-то жизненно важное для удобства использования веб-сайта, возможно, вы не захотите загружать его ближе к концу. Это испортит впечатление, поскольку пользователь не сможет получить доступ к этой функции до того, как все остальное будет загружено.
Влияет ли скорость страницы на SEO? Важна ли оценка 100/100 Insights?
Ответ прост: скорость страницы действительно влияет на SEO. Скорость страницы — это прямой фактор ранжирования, и этот факт стал еще лучше известен после обновления алгоритмов Google. Однако скорость может также косвенно влиять на рейтинг, увеличивая показатель отказов и сокращая время ожидания .
В Google пользователи на первом месте. Исследования Google показывают, что средняя скорость загрузки 3G очень низкая.Они также показывают, что пользователи покидают сайт примерно через 3 секунды. Это означает, что у них плохой опыт, и Google не любит ранжировать сайты, которые создают неудобства для пользователей.
Вы должны помнить, что скорость измеряется в секундах, а не в точках от 0 до 100. Хотя PageSpeed Insights — это инструмент, который помогает вам повысить скорость, оценка в нем не обязательно что-то значит в реальном мире.
Тем не менее, важно улучшить показатель скорости страницы.
Почему?
Потому что с Google мы не знаем наверняка, используется ли оценка в качестве фактора ранжирования. Гугл использует секунды? Использует ли он счет? Кто знает…
Тем не менее, я встречал сайты с идеальной скоростью страницы, которые имеют низкий рейтинг, а сайты с рейтингом ниже 50 — очень хорошо (#youtube).
Однако вы должны принять во внимание, как Google проводит эти тесты.Мы не знаем, откуда проводятся тесты. Ваш сервер из Румынии и Google тестирует его с подключением 3G в США? Что ж, вы, очевидно, можете ожидать низких скоростей.
Но просто для пользы пользователя сначала укажите время загрузки. И не используйте для проверки только PageSpeed Insights. Доведите до конца, и я покажу вам пару инструментов, которые вы можете использовать для проверки скорости загрузки вашего сайта из разных мест.
Иногда Google противоречит сам себе!
Например, Google PageSpeed Insights учитывает блокировку рендеринга скрипта Google Analytics, что означает, что вы должны загрузить его позже, в нижний колонтитул.Однако в Google Analytics довольно четко указано, что скрипт должен быть размещен в разделе
вашего веб-сайта, иначе он не будет работать должным образом и изначально не будет принят как допустимая установка.Итак, вы получаете небольшую оценку в PageSpeed Insights … делая то, что говорит Google … просто чтобы вам сказали, что вы не должны так поступать … от Google. Вы уловили суть.
Кроме того, вы не сможете правильно кэшировать скрипт, если не сохраните аналитику.js на вашем сервере. Очевидно, что Google Analytics не рекомендует этого. Это также ад для обслуживания, поскольку каждый раз, когда файл JavaScript Google Analytics получает обновление, вам также придется обновлять его на своем сайте.
Это, конечно, происходит не только с инструментами и скриптами Google, но и с любыми сторонними скриптами, которые вы не контролируете.
В нашу защиту, даже YouTube, который принадлежит Google и теоретически должен служить примером, имеет довольно низкую оценку PageSpeed Insights, по крайней мере, на момент написания этой статьи.
Но это не означает, что сайт загружается медленно. Вы можете видеть, что данные поля (которых много, например, YouTube) говорят, что сайт загружается примерно за 4 секунды, что на самом деле неплохо, учитывая, что недавно YouTube предоставляет превью видео в миниатюрах.
Вы также можете протестировать свой сайт с помощью https://www.thinkwithgoogle.com/intl/en-gb/feature/testmysite/, чтобы получить более простое объяснение того, насколько быстро ваш сайт загружается!
Сайт BrandMentions, другой нашей компании, загружается менее чем за 2 секунды при подключении к сети 4G, как вы можете видеть выше.Нам бы это понравилось. Конечно, всегда есть возможности для улучшения. По стандартам Google… это средний показатель.
Однако Google, похоже, считает, что скорость веб-сайта когнитивного SEO медленная, хотя он загружается чуть более 3 секунд, что все равно довольно быстро, учитывая количество сторонних инструментов, которые мы используем.
Учтите, что вам нужно пройти менее 1 секунды, чтобы считаться быстрым! Для этого вам, вероятно, понадобится очень простой сайт без сторонних плагинов или необычных всплывающих окон.Это непросто, если вы действительно хотите заняться цифровым маркетингом.
Итак, да, скорость загрузки важна для SEO, но идеальная оценка PageSpeed Insights — нет. Если ваш сайт загружается примерно за 3 секунды, большинство пользователей вас устроит.
Показатели PageSpeed Insights
Так как очень многое может повлиять на скорость сайта, Google разбивает все на разные категории в PageSpeed Insights Tool для лучшего понимания проблем.
Это полезно, поскольку Google также предоставляет своего рода приоритизацию, показывая вам, что именно влияет на скорость больше всего.
Полевые и лабораторные данные
Это новые действительно полезные метрики. Они разделены на две категории: полевые и лабораторные данные.
Полевые данные важны в реальном мире, поскольку это данные, полученные Google от реальных пользователей через Chrome или других поставщиков данных.
Конечно, это средний показатель, и если у Google еще недостаточно данных, он сообщит вам об этом.
Сводка по источнику показывает среднюю скорость сайта в целом. Таким образом, вы можете получить представление о том, как ваша страница сравнивается с сайтом и как сайт сравнивается с другими сайтами в отчете о пользовательском опыте Chrome.
Лабораторные данные , хотя и полезны, могут считаться менее важными, поскольку они собираются из контролируемой среды.Это означает, что он тестируется через одно соединение и не собирает данные от нескольких пользователей.
Лабораторные данные — это то, что на самом деле генерирует оценку скорости страницы Google.
Из-за того, что у Google не всегда есть полевые данные, он использует лабораторные данные, которые выполняются на месте, для анализа вашего сайта.
First Contentful Paint представляет момент, когда пользователи впервые видят что-то на вашей веб-странице.Если вы посмотрите на серию изображений, вы действительно сможете увидеть, как это выглядит:
Как видите, страница отрисована не полностью, что-то там отображалось.
Первая значимая краска — это второй шаг, скажем, если мы возьмем приведенные выше результаты в качестве примера. Он представляет собой точку, в которой пользователь действительно может понять первую часть контента. Например, отображается некоторый читаемый текст или изображение, а не только цвета и фон.
Индекс скорости — более сложный показатель. Он измеряет, насколько быстро элементы на вашем веб-сайте заметно заполняются. Чем быстрее они начнут появляться, тем лучше. Здесь вам нужен более низкий балл, так как он также измеряется в секундах.
Первый режим ожидания ЦП представляет собой точку, в которую сайт загрузил достаточно информации, чтобы он мог обработать первый ввод пользователя. Например, если сайт не загрузил достаточно релевантной информации, пользователь может коснуться элементов или прокрутить вниз, но ничего не произойдет.
Time to Interactive — это следующий уровень, на котором веб-сайт становится полностью интерактивным. Это означает, что все загружено в память устройства и теперь готово к использованию.
Макс. Потенциальная задержка первого ввода — это задержка, которую испытывает пользователь от момента взаимодействия с браузерами до момента, когда браузер отвечает. Это единственный показатель производительности, который не влияет на оценку скорости страницы.
Возможности и диагностика
В разделе возможностей представлена информация о том, что вы можете улучшить на своем сайте. Он также дает вам оценку того, насколько каждая проблема влияет на время загрузки и как вы должны расставить приоритеты для своих задач.
Прохождение каждого из них было бы излишним. Однако под каждым показателем будет небольшая стрелка, с помощью которой можно развернуть раздел.
Здесь вы найдете информацию о каждой рекомендации и о том, как решить проблему, чтобы повысить скорость вашего сайта.Вы заметите, что элементы, вызывающие наибольшие проблемы, — это, как правило, изображения и сторонние скрипты.
Раздел «Пройденные аудиты» — это список вещей, которые вы уже хорошо делаете на своей веб-странице. Обычно в нем отображаются элементы из разделов «Возможности» и «Диагностика», которые соответствуют параметрам Google.
Чем больше у вас будет в этом списке, тем лучше!
Как рассчитывается рейтинг PageSpeed Insights?Хотя вы можете увидеть очень много вещей в PageSpeed Insights Tool, на самом деле оценка рассчитывается только с использованием секунд в разделе лабораторных данных.Если вы внимательно прочитаете, вы действительно сможете увидеть сообщение «Эти показатели не влияют напрямую на оценку производительности». в разделе «Возможности и диагностика».
Метрики в лабораторных данных называются метриками производительности. Всего их 6, и мы представили их выше. Каждой метрике присваивается оценка от 0 до 100. У каждой метрики свой вес при вычислении оценки.
3 — Первая содержательная отрисовка
1 — Первая значимая отрисовка
2 — Первый процессор простаивает
5 — Время до интерактивности
4 — Индекс скорости
0 — Расчетная задержка ввода
В порядке важности они перечислены как таковые: «Время до взаимодействия», «Индекс скорости», «Первая отрисовка содержимого», «Первый бездействие ЦП», «Первая значимая отрисовка» и «Расчетная задержка ввода», которые фактически не влияют на оценку.
Оценки основаны на алгоритмах логнормального распределения, поэтому не будем слишком углубляться в кроличью нору. Если вы хотите узнать больше, вы можете прочитать эту страницу.
Google также разместил файл Sheet, который вы можете использовать, чтобы увидеть, как на самом деле генерируется оценка. Если вы знаете функции Excel, вы можете перепроектировать, как все работает. Вы можете скачать этот файл здесь, но вам нужно сделать свою копию (Файл -> Сделать свою копию), прежде чем вы сможете редактировать ее.Также есть версия для Lighthouse v5.
Проще говоря, первая содержательная краска влияет на оценку больше, чем первая значимая краска и так далее.
Почему? Ну, наверное, потому что, если на экране ничего не отображается, пользователь с большей вероятностью покинет ваш сайт. Если вы покажете… что-то, вы выиграете время, чтобы доставить остальное.
В конечном итоге оценки делятся на 3 категории: Низкий (0-49), Средний (50-89) и Хороший (90-100).Затем выдается среднее значение в качестве окончательной оценки вашего веб-сайта.
Как правило, если вам меньше 50 лет, у вас действительно есть проблемы, которые необходимо исправить! Но опять же, не переживайте, если ваш сайт загружается примерно за 3 секунды.
Ключевые моменты повышения оценки PageSpeed Insights
Все, что там наверху, может быть немного большим, для переваривания. Мы получим это. Скорее всего, у вас не получится все решить! Мы исключили, что набирать 100% баллов не обязательно.Однако вот ключевые элементы, которые заметно ускорят загрузку вашего сайта.
Предупреждение: выполните резервное копирование файлов и базы данных, прежде чем приступать к этим улучшениям. Они могут испортить ваш сайт, и вы должны убедиться, что можете вернуться к предыдущей версии!
Время ответа сервера
Сервер — это то, что вы не можете улучшить самостоятельно. У тебя либо хороший, либо плохой.Чтобы улучшить его, вам придется либо значительно снизить нагрузку на него, либо улучшить его оборудование, и то и другое вы не можете контролировать, если только у вас нет физического компьютера.
Поэтому в первую очередь важно иметь хороший сервер. Но как выбрать хороший сервер?
Что ж, любая хостинговая компания, которая занимает хорошие позиции в Google, должна предоставлять достойные услуги. Однако вам решать. Лучший совет? Если вы в основном ориентированы на локальное SEO, выберите локальный сервер.Например, если большая часть вашей аудитории проживает в Италии, выберите сервер с центром обработки данных в Италии.
Если центр обработки данных находится в США, информация должна будет пройти большое расстояние, прежде чем достигнет вашей целевой аудитории.
Вы всегда можете протестировать собственный веб-сайт хостинг-провайдера с помощью PageSpeed Insights и посмотреть их TTFB (время до первого байта) или время ответа сервера. Если он находится в разделе «Пройденные аудиты», значит, у вас хороший хостинг-провайдер.
Однако лучше, если вы знаете кого-то, кто является реальным клиентом хостинг-провайдера, чтобы вы могли там проверить скорость.
На самом деле, собственный веб-сайт хоста, вероятно, будет на выделенном сервере, а ваш сайт — на пакете общего хостинга. Это означает, что вы будете использовать ЦП компьютера и пропускную способность Интернета совместно с другими веб-сайтами.
Если вы можете протестировать реальный сайт у клиента, это прекрасно.Возможно, вы сможете просмотреть отзывы и найти клиентов или попросить службу поддержки предоставить их.
Сжатие изображения
В общем, изображения — самая большая проблема на веб-сайтах. Они большие, и их нужно много загружать.
Есть два типа проблем с изображениями. Первый — это размер экрана по сравнению с фактическим размером изображения в пикселях, а второй — размер диска.
Размер диска: Чем больше физического места занимает образ на жестком диске или SSD, тем больше потребуется для загрузки.100 КБ будут загружены намного быстрее, чем 1000 КБ (1 МБ). Если в вашем сообщении в блоге есть 10 таких изображений, ожидайте, что ваш сайт будет загружаться очень медленно.
Вы можете использовать WP Smush для оптимизации ваших изображений. Это плагин, который сжимает изображения без потери качества. Это означает, что вы можете уменьшить изображение размером 1000 × 1000 пикселей с 200 КБ до 150 КБ, не замечая разницы в качестве, поэтому оно загружается на 25% быстрее.
Размер экрана: Размер экрана — это размер, при котором отображается изображение.Например, изображение ниже отображается с разрешением 300 × 300 пикселей.
Чтобы изображения загружались быстрее, сначала нужно убедиться, что вы не используете изображение больше, чем оно будет отображаться. Например, если у вас есть раздел HTML, стилизованный с помощью CSS размером 300 × 300 пикселей, но вы загружаете изображение размером 1000 × 1000 пикселей в источник, вы теряете время загрузки для этих 700 × 700 пикселей.
Это потому, что браузер должен загрузить изображение размером 1000 × 1000 пикселей, а затем уменьшить его до 300 × 300 пикселей.Это занимает больше времени как для загрузки, так и для процесса сжатия. Вы можете исправить это, загрузив свои изображения с той же шириной и высотой, на которой они будут отображаться.
WordPress делает это автоматически, создавая несколько экземпляров изображения при его загрузке. Вот почему вы увидите суффикс 300 × 300 или 150 × 150 в конце пути к файлу изображения. Вот почему вы можете выбирать размеры (большой, средний, эскиз). Хотя это не идеально, особенно если вы вручную изменяете размер изображения с помощью щелчка и перетаскивания, и в долгосрочной перспективе оно занимает больше места на вашем сервере, это действительно помогает увеличить скорость загрузки.
Отсрочка изображений — еще одна вещь, которую вы можете сделать, чтобы сократить время загрузки. Это означает, что вы можете загрузить их позже, когда пользователь прокручивает веб-страницу вниз. Будет короткий момент, когда изображения не будут видны, но в конечном итоге они появятся одно за другим.
Это помогает браузерам сосредоточиться на важной части, той, которую пользователи просматривают в этот момент.
Существует множество плагинов, которые могут помочь вам в этом.Однако у многих есть ошибки или они откладывают изображения только в определенных ситуациях, например, если они созданы WordPress или WooCommerce, но не созданы или вставлены менее популярными плагинами.
Конечно, есть плагины для других CMS, таких как Joomla или Magento. Просто выполните поиск в Google. Если вы не пользуетесь популярной CMS, такой как WordPress, отсрочку изображений можно выполнить с помощью jQuery, но вам наверняка понадобится разработчик для этого, если вы сами не один из них.
Google рекомендует форматы изображений нового поколения . Они очень полезны, особенно при загрузке веб-сайта с мобильного устройства. Однако есть причина, по которой пока что ими пользуются не так много людей.
Форматы изображений следующего поколения пока поддерживаются не всеми основными браузерами. Это означает, что вам нужно будет динамически обслуживать разные форматы для разных браузеров.
Если вы можете использовать плагин на своей CMS, это может быть легко, но если вы работаете на специальной платформе, вам придется разрабатывать все с нуля, что стоит немало.Вот список браузеров, поддерживающих формат WebP.
Если вы правильно измените размер и оптимизируете изображения, экономия, которую вы получите за счет их преобразования в графические форматы следующего поколения, такие как JPEG2000 или WebP, может не окупить затрат времени и денег.
Однако, если у вас есть время и бюджет, непременно сделайте это. Вы можете использовать этот инструмент, чтобы проверить, поддерживаются ли браузеры, в которых ваши пользователи проводят больше всего времени. Найдите WebP или JPEG2000.
Структура HTML и CSS
Структура HTML вашей веб-страницы определяет способ ее загрузки. Браузеры читают страницу сверху вниз и одинаково загружают элементы. Это означает, что если вы хотите, чтобы что-то загружалось первым, вы должны поместить это выше на своей странице.
Обычно проблемы не в HTML, а в CSS. Если вы напишете свой CSS хаотично, это приведет к более медленному времени загрузки и плохому взаимодействию с пользователем.
Возьмем пример. Большинство веб-сайтов, если не все, следуют этой структуре HTML: head> body> footer.
Если мой файл CSS сначала стилизует нижний колонтитул, тогда нижний колонтитул получит стиль, хотя он находится перед сгибом. Между тем, заголовок и тело могут остаться незамысловатыми.
Также рекомендуется сначала добавить свой мобильный стиль, так как мобильные устройства самые медленные. Вам может потребоваться хотя бы базовое обучение CSS, чтобы получить представление об этой иерархии и уметь самостоятельно определять проблемы с кодом
То же самое и с JavaScript, блокирующим рендеринг.Отложите скрипты, которые не нужны. Добавьте их в нижний колонтитул, чтобы они загружались последними.
Однако, если у вас есть важные скрипты, такие как Analytics, которые должны быть запущены как можно скорее, то непременно сохраните их в заголовке и убедитесь, что они запускаются и работают правильно, даже если это может привести к снижению оценки PageSpeed.
Минификация и сжатие скриптовМинификация — это процесс уменьшения размера файла за счет удаления из него ненужной информации.
Например, при написании JavaScript и CSS большинство, если не все программисты, любят использовать пробелы, чтобы код оставался чистым и легко читаемым. Однако эти лишние пробелы складываются, особенно если у вас длинный фрагмент кода.
cssminifier.com
Другой способ минимизировать код — комбинировать похожие элементы.
Например, если мои разделы верхнего и нижнего колонтитулов были идентичны, вместо того, чтобы писать их так:
body {
font-size: 16px;
}
нижний колонтитул {
font-size: 16px;
}
Я мог бы написать:
body, footer {
font-size: 16px;
}
Сжатие — это процесс сжатия файлов путем замены повторяющихся последовательностей информации одной ссылкой на эту конкретную последовательность.
Так, например, если у меня есть следующий код: 123 4 123 123 123 4 123 123, я мог бы заменить 123 на 1 и получить сжатую версию, подобную этой: 1 4 1 1 1 4 1 1. Конечно, это намного сложнее, чем то, что я представил.
Обычно это происходит на стороне сервера, и наиболее распространенное из них — сжатие Gzip. Сервер отправляет сжатую версию. После того, как браузер получает сжатый файл, он распаковывает его, обращая процесс, чтобы прочитать его фактическое содержимое.
Работает почти так же, как WinRAR; мы, наверное, все это знаем, потому что с незапамятных времен используем его бесплатно!
Если вы пользуетесь популярной CMS, вы обязательно найдете плагин как для сжатия, так и для минификации . Например, плагин W3 Total Cache выполняет множество функций, включая и то, и другое, если вы правильно его настроили.
Помните, что сжатие зависит от настройки сервера. Если ваш сервер не поддерживает Gzip, вы не сможете сжимать файлы.Если у вас есть сервер Apache, убедитесь, что у вас установлен mod_deflate.
Вы можете узнать у своего провайдера сервера, поддерживает ли это ваш хостинг. В 99,9% случаев они скажут «да». Если он еще не установлен, они должны сделать это бесплатно, так как это довольно простая задача.
Если вы не пользуетесь популярной CMS, вы также можете включить сжатие Gzip через файл .htaccess (серверы Apache), добавив следующий код, если установлен mod_deflate.
& lt; IfModule mod_deflate . c & gt; # Сжимайте HTML, CSS, JavaScript, текст, XML и шрифты AddOutputFilterByType DEFLATE приложение / javascript AddOutputFilterByType DEFLATE application / rss + xml AddOutputFilterByType DEFLATE приложение / vnd . ms — fontobject AddOutputFilterByType DEFLATE application / x — font AddOutputFilterByType DEFLATE application / x — font — opentype AddOutputFilterByType DEFLATE application / x — font — otf AddOutputFilterByType DEFLATE application / x — font — truetype AddOutputFilterByType DEFLATE application / x — font — ttf AddOutputFilterByType DEFLATE application / x — javascript AddOutputFilterByType DEFLATE application / xhtml + xml AddOutputFilterByType DEFLATE application / xml AddOutputFilterByType DEFLATE font / opentype AddOutputFilterByType DEFLATE font / otf AddOutputFilterByType DEFLATE font / ttf AddOutputFilterByType DEFLATE изображение / svg + xml AddOutputFilterByType DEFLATE изображение / x — значок AddOutputFilterByType DEFLATE текст / css AddOutputFilterByType DEFLATE текст / html AddOutputFilterByType DEFLATE текст / javascript AddOutputFilterByType DEFLATE текст / простой AddOutputFilterByType DEFLATE текст / xml # Удаляем ошибки браузера (требуется только для действительно старых браузеров) BrowserMatch ^Mozilla/ 4 gzip — только — текст / < / span> html BrowserMatch ^Mozilla/ 4 \ .0[678 ] нет — gzip BrowserMatch \ bMSIE ! нет — gzip ! gzip — только — текст / html Добавление заголовка Варьируется Пользователь — Агент < / IfModule & gt;
1 2 3 4 5 6 7 8 9 10 11 12 13 140002 18 19 20 21 22 23 24 25 26 27 28 29 30 | & lt; IfModule mod_deflate . c & gt; # Сжимать HTML, CSS, JavaScript, текст, XML и шрифты AddOutputFilterByType DEFLATE application / javascript AddOutputFilterByType DEFLATE application / rss + xml AddOutputFilterByType DEFLATE application < диапазон> / vnd . ms — fontobject AddOutputFilterByType DEFLATE application / x — font AddOutputFilterByType DEFLATE application / x — font — opentype AddOutputFilterByType DEFLATE application / < / span> x — font — otf AddOutputFilterByType DEFLATE application / x — span > font — truetype AddOutputFilterByType DEFLATE application / x — font — ttf AddOutputFilterByType DEFLATE application / x — javascript AddOutputFilterByType DEFLATE application / xhtml + xml AddOutputFilterByType DEFLATE application / xml AddOutputFilterByType DEFLATE font / span> opentype AddOutputFilterByType DEFLATE font / otf AddOutputFilterByType DEFLATE font / ttf Добавить > DEFLATE image / svg + xmlAddOutputFilterByType DEFLATE image / x — icon AddOutputFilterByType DEFLATE text / css AddOutputFilterByType DEFLATE text / html DEFLATE text / javascript AddOutputFilterByType DEFLATE text / plain AddOutputFilterByType DEFLATE text / xml # Удалить ошибки браузера (требуется только для действительно старых браузеров) BrowserMatch ^ Mozilla / < / span> 4 gzip — только — текст / html BrowserMatch ^Mozilla/ 4 \ .0[678 ] нет — gzip BrowserMatch \ bMSIE ! нет — gzip ! gzip — только — span> text / html Добавление заголовка Варьируется Пользователь — Агент < / IfModule & gt; |
Иногда можно также комбинировать сценарии .Для этого есть плагины, например Autoptimize, о которых я рассказывал ранее. Комбинирование скриптов — это именно то, о чем говорится. Вместо двух файлов вы объединяете их в один. Таким образом, к серверу будет отправлен только один запрос вместо нескольких.
Однако объединение скриптов может много раз вызывать ошибки, поэтому перед этим обязательно сделайте резервную копию всего.
Политика кэширования
Кэширование — это процесс сохранения файлов в браузере клиента, чтобы иметь возможность быстро получить к ним доступ в более позднее время.
Например, если пользователь впервые заходит на ваш сайт, необходимо загрузить ваш логотип. Однако, если у вас есть эффективная политика кэширования, этот файл будет храниться в браузере пользователя. Когда пользователь заходит на ваш сайт во второй раз, ему не нужно будет повторно загружать этот файл, так как он будет мгновенно загружен с его компьютера.
Динамические элементы (политика краткого кеширования): Динамические элементы — это элементы на вашем веб-сайте, которые часто меняются.Например, вы можете продолжать добавлять новые сообщения в слайдере на главной странице.
В этом случае HTML является динамическим элементом, поэтому установите короткую политику кэширования, если вам это подходит. 30 минут может быть достаточно, на случай, если пользователь вернется на эту страницу в том же сеансе.
В некоторых случаях вы можете вообще не захотеть кэшировать эти элементы, если для ваших пользователей важна оперативность, например, на новостных сайтах.
Статические ресурсы (политика длительного кеширования): Статические ресурсы — это файлы, которые редко изменяются.Обычно это изображения и файлы CSS или JS, но они также могут быть аудиофайлами, видеофайлами и т. Д.
Вы можете установить более длительное время кеширования для изображений и файлов CSS, так как вы знаете, что не будете менять их очень часто. Вы можете даже дойти до одного года, но обычно достаточно трех месяцев.
Сторонние инструменты: У вас действительно нет контроля над сторонними инструментами, поэтому, если вы чувствуете, что инструмент, размещенный в другом месте, заставляет ваш сайт работать очень медленно, лучше найдите альтернативу или откажитесь от нее.
Решением было бы разместить файлы на вашем собственном сервере и кэшировать их. Однако это может быть не очень продуктивно, и это не рекомендуется, поскольку вам придется постоянно обновлять эти файлы, как только выходят новые версии, иначе инструмент или приложение не будут работать должным образом.
Плагины кеширования: Существует множество плагинов, которые будут правильно обрабатывать протоколы кеширования, необходимые для удобного взаимодействия с пользователем. Если вы используете WordPress, один из этих плагинов — W3 Total Cache.Однако, если вы хотите выбрать лучший вариант, WP Rocket также довольно популярен, но он обойдется вам в пару сотен долларов.
Просто поищите плагин / расширение / модуль кеша + ваша платформа в Google, чтобы найти то, что вам нужно. Посмотрите обзоры, чтобы выбрать лучший.
файл .htaccess cache: Вы также можете установить заголовок управления кешем из файла .htaccess на сервере Apache, если вы не запускаете свой веб-сайт на популярной CMS.
Есть несколько способов:
## EXPIRES CACHING ##
ExpiresActive On
ExpiresByType image / jpg "доступ 1 год"
ExpiresByType image / jpeg "доступ 1 год"
ExpiresByType image / gif "доступ 1 год image / png "доступ 1 год"
ExpiresByType text / css "доступ 1 месяц"
ExpiresByType text / html "доступ 1 час"
Приложение ExpiresByType / pdf "доступ 1 месяц"
ExpiresByType text / x-javascript "доступ 1 месяц"
ExpiresByType application / x-shockwave-flash "access 1 month"
ExpiresByType image / x-icon "access 1 year"
ExpiresDefault "access 1 month"
## EXPIRES CACHING ##
Или вы также можете использовать этот код:
# Один год для файлов изображений
Набор заголовков Cache-Control" max-age = 31536000, общедоступный "
# Один месяц для css и js
Header set Cache-Control "max-age = 2628000, public"
Числа в атрибуте max-age указаны в секундах, поэтому 3600 будет означать один час, 86400 — один день и так далее.
Сброс кеша: Когда вы вносите изменения в веб-страницу, вы хотите сбросить кеш, если ранее кэшировалась более старая версия.Однако сбросить кеш можно только на своем сервере.
Это означает, что пользователи, которые загрузили предыдущую версию определенного файла, все равно будут загружать эту старую версию со своего компьютера при повторном доступе к веб-сайту. Файл будет обновлен по прошествии определенного времени, указанного в вашей политике кэширования, или если пользователь вручную сбрасывает кеш своего браузера.
Если у вас есть критическая ошибка в веб-дизайне или коде, вы можете изменить имя файла вашего файла.Таким образом, вы можете быть уверены, что кеш для этого конкретного файла будет сброшен.
Иногда бывает трудно сбросить кеш Chrome. Иногда маршрутизаторы и центры обработки данных между клиентом и сервером также могут кэшировать файлы, поэтому, если вы не видите изменений, подождите пару часов.
Легкая тема и плагины
Чем больше вы загружаете свой сайт плагинами, тем он становится тяжелее и медленнее работает.
Тема веб-сайта — это самый большой «плагин», который есть на сайте. Большинство тем поставляются с тяжелыми сторонними сборщиками и огромными библиотеками плагинов, которые замедляют работу сайта.
Например, плагины слайдера обычно добавляют JS-код слайдера ко всем страницам, хотя он, вероятно, будет использоваться только на главной или целевой странице. Это тяжелый код, который нужно загружать на каждой странице! Не говоря уже о том, что они никому не нравятся и снижают конверсию.
Поэтому, когда вы ищете тему, постарайтесь найти ее без слишком большого количества анимации, ползунков, функций и т. Д. Если вы посмотрите на крупные веб-сайты, вы увидите, что в целом они довольно простые.
Хорошая тема, которую я рекомендую, — это GeneratePress. Он легкий и загружается очень быстро. Вы можете включать или отключать элементы, чтобы ваш сайт оставался максимально чистым.
Сочетание его с плагином оптимизации, таким как WP Rocket (платный), или комбинацией бесплатных плагинов, таких как Autoptimize + Fastest Cache, сделает его невероятно быстрым! Вы также можете использовать W3 Total Cache, плагин, который очень хорошо выполняет почти все перечисленное выше.
Когда вы устанавливаете новые плагины, подумайте, насколько они важны для вашего сайта. После их установки проверьте свой результат и скорость загрузки. Плагин замедляет работу вашего сайта? Если да, важно ли сохранять плагин? Может быть, поискать лучшую альтернативу или полностью удалить.
Как массово проверить показатель PageSpeed Insights
Раздражающая часть PageSpeed Insights заключается в том, что она проверяет только одну веб-страницу за раз.Чтобы проверить все страницы вашего сайта, в зависимости от его размера, потребуется целая вечность.
Однако есть способ массовой проверки PageSpeed Insights Score. Вы уже догадались?
Это CognitiveSEO Tool Site Audit . После того, как вы настроите технический SEO-анализ с помощью аудита сайта, перейдите в свою кампанию -> Аудит сайта -> Производительность -> PageSpeed.
Конечно, с помощью этого инструмента вы можете сделать гораздо больше: от улучшения технического SEO и контента до мониторинга вашего рейтинга и усилий по наращиванию ссылок.
Существует также несколько бесплатная альтернатива — расширение Chrome. Однако на самом деле он запросит список URL-адресов, а затем просто откроет их как новые вкладки в онлайн-инструменте PageSpeed Insights.
Это означает, что процесс подходит примерно для 10-20 вкладок, если у вас процессор компьютера среднего и высокого уровня. Более того, браузер может дать сбой, или вы состаритесь, ожидая. Это все еще довольно неудобно.
Другие инструменты SEO для измерения и повышения скорости сайта
Конечно, инструмент Google PageSpeed Insights — не единственный инструмент для проверки и повышения скорости страницы. На этот раз мы действительно не знаем, откуда проводятся тесты. Если ваш сайт размещен на сервере в Европе, а Google проводит тесты в США, естественно, что этот сайт будет работать медленнее.
Однако есть инструменты, которые указывают, откуда выполняется тест.
PingdomPingdom Speed Test — отличный инструмент для измерения скорости загрузки вашей веб-страницы. После завершения теста вы получите некоторые результаты, похожие на результаты в инструменте Google, по крайней мере, визуально.
Интересно то, что вы можете выбрать, откуда будет проводиться тест. Конечно, возможности ограничены, но все же лучше, чем даже не знать об этом.
Если вы ориентируетесь на локальное SEO, выберите расположение, ближайшее к вашему серверу. Если вы не знаете, где он на самом деле размещен, спросите своего хостинг-провайдера, и вы узнаете.
Также неплохо провести несколько тестов из разных мест, на случай, если у вас международная аудитория.
Вы можете найти и другие инструменты, похожие на Pingdom.
GT-Metrix
GT Metrix был одним из моих любимых инструментов для тестирования скорости.Хотя он тестируется только из Ванкувера, Канада, он дает очень полезную информацию.
Совет: Если вы создадите у них бесплатную учетную запись, вам не придется так долго ждать, пока будет проведен тест. Чтобы снизить нагрузку на свои серверы, они добавляют вас в очередь, когда запросов слишком много. Однако зарегистрированные пользователи имеют приоритет.
mod_pagespeedMod_pagespeed — это серверное дополнение от Google.Его цель — исправить любые проблемы, связанные со скоростью страницы, на уровне ядра, непосредственно на стороне сервера. Это означает, что даже если вы добавляете неоптимизированные изображения, mod_pagespeed автоматически сжимает, оптимизирует и конвертирует их в форматы изображений следующего поколения.
Однако установка mod_pagespeed определенно более техническая, чем просто работа со всем в WordPress.
Если на вашем сервере он уже есть или вы знаете, что делаете, установите его.Тем не менее, всегда лучше иметь в первую очередь быстрый сайт, а не пытаться что-то скрыть.
В любом случае, этот мод увеличит нагрузку на ваш сервер, поскольку каждый раз, когда вы загружаете неоптимизированное изображение, ему придется использовать вычислительную мощность для его преобразования.
Google AMP (ускоренные мобильные страницы)Если вы хотите, чтобы ваш сайт действительно быстро выполнял мобильный поиск, вы всегда можете внедрить Google AMP .
Google AMP или ускоренные мобильные страницы — это особый тип HTML, в котором отсутствуют тяжелые и медленные элементы загрузки.
Более того, страницы AMP будут предварительно загружаться в мобильный браузер Chrome, когда пользователь прокручивает результаты поиска, что приводит к мгновенной загрузке страницы, когда пользователь нажимает на заголовок.
Есть, конечно, и минусы. Вы ограничены со всех сторон, хотя с каждым днем все становится лучше и лучше.Кроме того, пострадает дизайн вашего сайта, и он будет во многом похож на любой другой сайт, использующий AMP. Облом.
Этот URL тоже не ваш, потому что Google загружает кешированную версию вашего сайта в их URL. Однако разработчики Google пообещали добавить собственные URL-адреса в AMP.
В WordPress и других CMS вы можете добавить AMP на свой сайт через плагин. Для пользовательских веб-сайтов вам нужно будет связаться со своим разработчиком и дать ему эту ссылку.
ЗаключениеПовышение скорости вашего сайта важно для лучшего рейтинга поиска. PageSpeed Insights предоставляет набор передовых методов и возможных улучшений, упорядоченных по степени их влияния на скорость вашего сайта.
Хотя сама оценка не должна вас слишком сильно беспокоить, рекомендуется попытаться получить ее как минимум выше 50. Однако сосредоточьтесь на времени загрузки, которое измеряется в секундах. Хороший сайт должен загрузиться примерно за 3 секунды.Действительно, очень быстрый должен загружаться примерно за 1.
Наличие хорошего сервера, сжатие изображений и простота и чистота кода принесут вам наибольшую пользу, когда дело доходит до скорости веб-сайта. В то время как небольшие сайты больше всего выиграют от общего сервера, если вы крупный бизнес, рекомендуется разместить свой сайт на настраиваемых серверах Tower. Предоставляя предприятиям возможность редактировать и поддерживать свой сайт, частный сервер обеспечит гибкость и надежность, когда они больше всего в этом нуждаются.
Каков ваш показатель PageSpeed Insights? Видели ли вы более высокие позиции в рейтинге после увеличения скорости загрузки вашего сайта? Поделитесь с нами своим опытом в разделе комментариев ниже!
Улучшить показатель Google PageSpeed | Оптимизация Google PageSpeed
Мы превращаем ваши медленно загружающиеся веб-страницы в сверхбыстрый веб-сайт, который дает лучшие результаты для бизнеса!
Ваш медленный веб-сайт дает низкую оценку скорости Google на PageSpeed Insights? Может быть, медленная загрузка веб-страниц означает, что вам нужен план повышения производительности Google? Или, может быть, вы отчаянно нуждаетесь в оптимизации Google PageSpeed для WordPress, чтобы улучшить свой низкий результат теста скорости Google?
Позвольте оптимизации скорости веб-сайта позаботиться о скорости вашего сайта! Мы специализируемся на оптимизации скорости и производительности веб-сайтов, чтобы обеспечить невероятно высокие показатели Google PageSpeed Insights для настольных и мобильных веб-сайтов.
УЛУЧШИТЬ СКОРОСТЬ ВЕБ-САЙТА СЕЙЧАСОптимизация скорости
из 90+
Оценка скорости сайта на компьютере
из 80+
Оценка скорости сайта на мобильном устройстве
Что такое Google PageSpeed Insights?
Google PageSpeed Insights анализирует содержимое ваших веб-страниц, а затем предоставляет предложения по оптимизации скорости веб-сайта, чтобы сделать каждую страницу быстрее.PageSpeed Insights — это один из ряда инструментов для повышения производительности веб-сайтов от поисковой системы Google.
Скорость вашей веб-страницы определяет вашу оценку производительности. Веб-страница с оценкой 90 или выше считается быстрой, от 50 до 90 означает веб-страницу со средней скоростью, а ниже 50 считается медленной веб-страницей.
Оптимизация скорости веб-сайта может помочь вам получить сверхвысокие баллы на всех ваших веб-страницах как на настольных компьютерах, так и на мобильных устройствах.
Повысьте свой показатель Google PageSpeed Insights с помощью оптимизации скорости веб-сайта
Как Google PageSpeed Insights анализирует скорость и производительность веб-сайта?
Google PageSpeed Insights использует ряд показателей для определения скорости и производительности веб-страниц на вашем веб-сайте. Инструмент Google для проверки скорости сайта выявляет проблемы с производительностью, влияющие на скорость загрузки веб-страницы, а также анализирует реальный пользовательский опыт посетителей вашего веб-сайта.
Вот примерный список рекомендаций, которые предоставляет Google PageSpeed Insights в зависимости от скорости загрузки и производительности ваших веб-страниц:
- Устранение ресурсов блокировки рендеринга
- Правильный размер изображений
- Откладывание закадровых изображений
- Минимизация CSS
- Минимизация JavaScript
- Удаление неиспользуемого CSS
- Эффективное кодирование изображений
- Показ изображений в форматах следующего поколения
- Включение сжатия текста
- Предварительное подключение к требуемым источникам
- Как избежать переадресации нескольких страниц
- Предварительная загрузка запросов ключей
- Использование видеоформатов для анимированного контента
- Избегайте огромных сетевых нагрузок
- Использование эффективной политики кэширования статических ресурсов
- Как избежать чрезмерного размера DOM
- Избегание цепочки критических запросов
- Минимизация работы основного потока
- Обеспечение видимости всего текста во время загрузки веб-шрифтов
- Минимизация стороннего использования
Поскольку все вышеперечисленные области влияют на скорость вашего веб-сайта, эксперты по скорости сайта в Website Speed Optimization рассмотрят каждый из этих факторов, чтобы значительно повысить ваш рейтинг Google PageSpeed Insights.А это означает, что вы можете пользоваться множеством преимуществ молниеносной скорости веб-сайта:
Повысьте свой рейтинг в Google с помощью более быстрого веб-сайта
Повысьте удобство использования за счет оптимизации скорости загрузки сайта
Снизьте показатель отказов за счет сокращения времени загрузки сайта
Повысьте конверсию за счет повышения скорости веб-сайта
Увеличение средней продолжительности сеанса с помощью оптимизации скорости сайта
Сведите к минимуму покидание веб-сайта, ускорив его работу
Как я могу улучшить свой показатель скорости сайта в Google PageSpeed Insights?
Хотите знать, почему ваш сайт такой медленный? Не знаете, как улучшить свой результат в Google PageSpeed Insights? Не волнуйтесь — оптимизация скорости веб-сайта поможет вам! Наша оптимизация скорости веб-сайта и оптимизация скорости мобильных устройств превратят ваши медленно загружаемые веб-страницы в сверхбыстрый веб-сайт, который загружается в рекордно короткие сроки и дает посетителям вашего сайта превосходный пользовательский интерфейс.
Мы исправляем проблемы со скоростью на настольных и мобильных сайтах, поэтому вы можете расслабиться и расслабиться, зная, что ваш сайт работает с оптимальной скоростью и производительностью. От оптимизации Google PageSpeed для WordPress, исправления медленной загрузки веб-страниц на сайте Wix до ускорения работы веб-сайтов электронной коммерции, построенных на Shopify — наши специалисты по скорости сайта заставят ваш сайт работать как можно быстрее в кратчайшие сроки.
Свяжитесь с нами сегодня, чтобы узнать, как мы можем помочь вам достичь невероятно высоких показателей Google PageSpeed Insights для вашего веб-сайта для настольных компьютеров и мобильных устройств.
УЛУЧШИТЬ МОЙ ТЕСТ СКОРОСТИ GOOGLE
Пример: Оптимизация скорости веб-сайта достигает сверхвысокого показателя Google PageSpeed Insights
Мы предоставили наши навыки оптимизации скорости веб-сайта сайту Tapestodigital.com, чтобы создать сверхбыстрый сайт, который бы отвечал всем требованиям — исключительный пользовательский интерфейс, отличное SEO и высокий коэффициент конверсии.
Получившийся в результате веб-сайт не только занимал первое место в рейтинге по всем основным ключевым словам SEO, но и достиг фантастических показателей скорости на всех основных платформах тестирования скорости, включая эти отличные результаты в Google PageSpeed Insights:
Результат GPSI
Результаты GPSI
ПРОСМОТРЕТЬ ПОЛНОЕ ПРИМЕРНОЕ ИССЛЕДОВАНИЕ
Позвольте оптимизации скорости веб-сайта повысить ваш показатель Google PageSpeed Insights, исправив медленный веб-сайт
Если вам нужна помощь с медленным веб-сайтом или медленной загрузкой веб-страниц, Оптимизация скорости веб-сайта — ваш универсальный инструмент для повышения скорости веб-сайта.Устраняя проблемы с производительностью вашей веб-страницы, мы помогаем вам достичь невероятно высоких показателей скорости работы всех ведущих инструментов тестирования скорости сайта, а также повысить рейтинг вашей поисковой системы и обеспечить удобство для пользователей, которое понравится посетителям вашего сайта.
Мы специализируемся на оптимизации скорости веб-сайтов для всех типов веб-сайтов, от очень медленных сайтов WordPress или Wix до удручающе медленных для загрузки веб-страниц на сайтах Shopify или SquareSpace. Наши услуги по оптимизации скорости веб-сайта исправят ваши медленно загружаемые веб-страницы и значительно улучшат показатель скорости сайта Google на PageSpeed Insights.
Готовы превратить свой медленный веб-сайт в высокоскоростной, который улучшит ваше SEO, пользовательский опыт и коэффициент конверсии?
Поговорите со специалистами по скорости сайта в Website Speed Optimization, и давайте приступим к повышению скорости вашего сайта!
УЗНАЙТЕ МОЙ ВЕБ-САЙТ БЫСТРЕЕ! ×Почему попытки получить 95+ на Google PageSpeed Insights для вашего сайта WordPress сведут вас с ума!
Последние несколько недель я работал над своим сайтом WordPress, пытаясь достичь 95+ в Google PageSpeed Insights.
Я думал, это будет легко. «Все, что мне нужно сделать, это сделать несколько настроек здесь и несколько оптимизаций», — сказал я себе. «Раздавите мои изображения и установите заголовки с истекшим сроком действия; установи W3 Total Cache и все будет сладко. Кусок торта.»
Как я был неправ.
Ближайшее, что я получил, был 91. Всего в четырех чертовых очках! Я фейспалмал и попробовал еще раз. И снова, и снова, и снова с разными хостами, темами, плагинами, настройками … Но, что бы я ни пробовал, мне не удалось достичь того неуловимого 95.
Тем не менее, 91 не так уж и плохо, правда? Это, безусловно, шаг вперед по сравнению с 74, с которых я начинал.
В этом посте я рассмотрю различные меры, которые я использовал на своих тестовых сайтах, чтобы получить оценку 91/100 на PageSpeed Insights.
С помощью нашего плагина оптимизации производительности Hummingbird вы можете сканировать свои веб-сайты, получать подробные рекомендации и наблюдать, как ваши сайты автоматически оптимизируются для сверхскоростной работы.Узнать больше
Результаты
Прежде чем мы начнем, давайте рассмотрим результаты.
После экспериментов с различными веб-хостами, темами, плагинами и кодом я получил самый высокий балл с WP Engine, используя тему Frank. Поскольку WP Engine запрещает использование W3 Total Cache, я не смог использовать этот плагин, но смог использовать другие плагины, такие как Autoptimize, Minit и Remove Query Strings From Static Resources.
К сожалению, мне удалось достичь только 79/100 для мобильных устройств. Моя цель состояла в том, чтобы набрать больше 95 баллов для настольных компьютеров, поэтому в этой статье я расскажу о мерах, которые я использовал для этого.
Набрать 95+ на PageSpeed Insights — это не так уж просто.Моя последняя оценка на тесте скорости веб-сайта Pingdom:
Всего четыре запроса и быстрая загрузка.Моя окончательная оценка на GTmetrix:
GTmetric поставил меня в низкую оценку за отсутствие CDN.Почему важна скорость загрузки сайта
Когда кто-то заходит на ваш сайт, у вас есть всего несколько секунд, чтобы привлечь его внимание и убедить остаться и не подпрыгивать.
Качественный контент и красивая тема важны, но если ваша страница загружается медленно, вы можете потерять людей, прежде чем они даже получат возможность увидеть ваш контент.
По данным Kissmetrics, почти половина пользователей Интернета ожидают, что сайт загрузится за две секунды или меньше, и, как правило, покидают сайты, которые не загружаются в течение трех секунд. В общей сложности 79 процентов онлайн-покупателей, испытывающих проблемы с производительностью сайта, не вернутся на сайт, чтобы совершить новую покупку, и около 44 процентов из них рассказали бы другу, если бы у них был плохой опыт совершения покупок в Интернете.
Хотя скорость сайта является одним из более чем 200 сигналов, которые Google использует для определения поискового рейтинга, и менее 1 процента поисковых запросов зависят от сигнала скорости сайта, вам следует беспокоиться именно о конверсиях.Быстрый сайт вселит в посетителей уверенность в вашем продукте или услуге и убедит их отдать свои деньги.
Что такое Google PageSpeed Insights?
Google PageSpeed Insights — это разочаровывающий удобный инструмент , который анализирует производительность внешнего интерфейса вашего сайта и предлагает предложения по оптимизации.
Он оценивает ваш сайт от 0 до 100 баллов, при этом оценка 85 или выше указывает на то, что страница работает хорошо.
PageSpeed Insights определяет, на основании кого можно улучшить страницу:
- Время до загрузки верхней части страницы: Прошедшее время с момента запроса пользователем новой страницы до момента отображения содержимого верхней части страницы браузером.
- Время до полной загрузки страницы: Прошедшее время с момента запроса пользователем новой страницы до момента, когда страница полностью отображается браузером.
Итак, как PageSpeed Insights оценивает ваш сайт? Он рассматривает независимые от сети аспекты производительности страницы: конфигурацию сервера, HTML-структуру страницы и использование ею внешних ресурсов, таких как изображения, Javascript и CSS.
Тестирование вашего сайта с помощью PageSpeed Insights может открыть глаза всем, кто не потрудился оптимизировать свой сайт, а также станет отличной отправной точкой для тех, кто хочет повысить его производительность.
Сказав это, это также может вызвать у вас ненужную панику, когда сайт дает более низкие, чем ожидалось, оценки или предложения, которые могут быть контрмерами, которые вы внедрили на своем сайте.
Попытка набрать 95+ на Google PageSpeed Insights
Итак, давайте рассмотрим некоторые меры, которые я тестировал на своих тестовых сайтах.
Оцените свой сайт
Перво-наперво: сравнительный анализ.
PageSpeed Insights — это всего лишь один из популярных сайтов для тестирования скорости.Чтобы получить более полное представление о том, как работают мои тестовые сайты, я также использовал Pingdom Website Speed Test и GTmetrix каждый раз, когда вводил новую меру.
Моим первым тестовым сайтом была свежая установка WordPress с Bluehost, в комплекте с импортированными тестовыми данными темы, темой Twenty Fourteen и различными плагинами, которые вы можете найти при типичной установке WordPress, такими как Akismet и Jetpack, а также контактной формой, SEO и Плагины Google Analytics.
Мой первый проход на PageSpeed Insights вернул:
Так медленно … Мобильная оценка составила 66.Мой первый проход в тесте скорости веб-сайта Pingdom вернул:
Не страшный счет, но и не фантастический.Мой первый проход в GTmetrix вернул:
Несмотря на то, что моя оценка выглядит хорошо, мой сайт выполняет слишком много HTTP-запросов.Выберите быстрый веб-хостинг
PageSpeed Insights рассчитывает время отклика сервера менее 200 мс, поэтому, если вы работаете на общем сервере, вам придется бороться с этим.
Дешевый веб-хостинг, предлагающий ежемесячные планы за 3,95 доллара в комплекте с неограниченным количеством просмотров страниц и неограниченным пространством, может показаться выгодной сделкой, но обычно компромисс — низкая скорость сайта и частые простои в периоды высокого трафика.
Если вы хотите, чтобы ваш сайт работал молниеносно и работал хорошо, вам нужно инвестировать в достойный веб-хостинг. Если вы действительно хотите, чтобы ваш сайт был сайтом, вы можете посмотреть на пакеты хостинга, которые не находятся на общем сервере.
Чтобы получить совет по веб-хостам, ознакомьтесь с нашей серией обзоров веб-хостов и узнайте, кого мы назвали лучшим веб-хостингом.
Я установил свой первоначальный тестовый сайт с помощью Bluehost. Да, я знаю, Bluehost не совсем известен своей скоростью. Медленный ответ сервера, когда я тестировал сайт, отразил столько же:
Я создал идентичный сайт с Dreamhost.Скорость была настолько ужасной, что большую часть времени я даже не мог загрузить сайт, что заставляло меня искать других хостов.
Я также протестировал VentraIP, австралийский веб-хостинг, который дал аналогичные результаты для Bluehost.
Но самый успешный тестовый сайт был размещен на WP Engine, управляемой службе хостинга для WordPress. Мне удалось добиться времени отклика сервера менее 200 мс.
Используйте хороший подключаемый модуль кеширования
Кэширование вашего контента может значительно сократить время загрузки вашего сайта.W3 Total Cache на сегодняшний день является самым популярным подключаемым модулем кэширования, доступным почти 3,5 миллиона загрузок, и его легко настроить. Он предлагает поддержку браузера, страницы, объекта, базы данных, минификации и сетевого кеширования доставки контента.
Я установил W3 Total Cache, выбрав параметры для минимизации моих файлов CSS и Javascript, установив заголовки с истекающим сроком действия и сжав мой сайт в архиве. Моя оценка PageSpeed Insights сразу подскочила на семь пунктов.
Оптимизируйте изображения
Изображения с высоким разрешением загружаются намного дольше, чем оптимизированные изображения, а излишне большие файлы могут значительно замедлить скорость загрузки страниц.
WPMU DEV предлагает фантастический (бесплатный!) Плагин под названием WP-Smush.it. Когда вы массово загружаете изображения с помощью этого плагина, вы обнаружите, что размер ваших изображений будет значительно уменьшен без ущерба для визуального качества.
Раз уж мы говорим об изображениях, отложенная загрузка изображений также может повысить скорость страницы. Ознакомьтесь с моим обзором 6 плагинов с отложенной загрузкой, чтобы сделать ваш сайт на WordPress быстрее, чтобы получить рекомендации по плагинам.
Оптимизируйте домашнюю страницу
Есть несколько простых способов ускорить работу вашего сайта:
- Если вы публикуете сообщения в блоге на своей домашней странице, публикуйте только отрывки или резюме и уменьшите количество сообщений до пяти или меньше.
- Сведите к минимуму количество виджетов. Используйте только абсолютно необходимые виджеты.
- Удалите неактивные или ненужные плагины.
В целом чистый и продуманный дизайн сайта поможет вашей странице не только хорошо выглядеть, но и быстрее загружаться.
Удалить строки запроса
Когда я запускаю свои тестовые сайты через Pingdom и GTmetrix, они отмечают ненужную загрузку статического контента с помощью строк запроса, таких как таблицы стилей и файлы Javascript.
Это проблема, поскольку многие прокси-серверы не кэшируют ресурсы, если в URL-адресе есть строка запроса.
Есть несколько простых способов удалить строки запроса:
Я успешно протестировал оба метода, но обнаружил, что плагин более удобен, поскольку мне не нужно было вмешиваться в код, и я мог быстро активировать и деактивировать плагин.
Уменьшить и объединить
W3 Total Cache предлагает настройки для минимизации и комбинирования CSS и Javascript, хотя после настройки указанных настроек PageSpeed Insights продолжал сообщать мне, что мне нужно минимизировать определенные файлы. Итак, я установил и активировал Minit.
Minit — это легкий плагин от разработчика Каспарса Дамбиса. Он объединяет файлы CSS и файлы Javascript.
После установки этого плагина PageSpeed Insights перестал показывать мне запросы. Задача решена.
Включить сжатие
Gzip-архивирование вашего сайта может загружать ваши страницы быстрее и уменьшать размер ваших файлов до 70%.
Есть несколько способов включить Gzip на своем сайте:
- W3 Total Cache включает параметр для включения Gzip.Перейдите в Performance> Browser Cache> General .
- Отредактируйте свой .htaccess , чтобы включить Gzip. Просто добавьте в файл .htaccess следующее:
Спасибо Softstribe за приведенный выше фрагмент.
Я обнаружил, что W3 Total Cache отлично работает на моих тестовых сайтах, хотя для сайта WP Engine я не использовал Gzip, поскольку WordPress Gzip Compression является запрещенным плагином.
Оптимизируйте базу данных WordPress
Поддержание порядка и порядка в базе данных может помочь обеспечить бесперебойную работу вашего сайта, особенно если вы экспериментировали и удаляли плагины и у вас есть ненужные записи в базе данных.
Есть несколько плагинов, которые могут помочь вам в этом:
- WP-Optimize поставляется с множеством опций для обширной очистки вашей базы данных WordPress и ее оптимизации без выполнения ручных запросов. Он может удалять спам и неутвержденные комментарии, очищать корзину, удалять обратные ссылки и пингбеки, а также может запускаться автоматически.
- WP-DB Manager позволяет оптимизировать вашу базу данных, восстанавливать ее, создавать резервные копии, восстанавливать, удалять резервную копию, удалять / очищать таблицы и запускать выбранные запросы.Этот плагин также поддерживает автоматическое планирование резервного копирования, оптимизации и восстановления базы данных.
Я обнаружил, что WP-Optimize прост в использовании и предлагает больше функций, чем WP-DB Manager.
Используйте CDN
Если вы серьезно относитесь к ускорению своего сайта, вы можете рассмотреть возможность регистрации в сети доставки контента (CDN).
CDN значительно сокращает отставание сервера за счет хранения статических ресурсов в сети из быстро загружаемых серверов. Мы используем один для сайта WPMU DEV.
Cloudflare и MaxCDN — это несколько популярных вариантов, хотя, если вы не хотите платить за текущую услугу, вы можете попробовать бесплатную услугу Cloudflare.
Cloudflare предлагает CDN с серверами, установленными по всему миру.Единственный недостаток использования CDN заключается в том, что он может снизить ваш рейтинг PageSpeed Insights… что, очевидно, противоречит здравому смыслу для любого, кто стремится повысить производительность своего сайта.
Причина этого кроется в аналитике внешнего интерфейса PageSpeed Insights.
Внедрение CDN может добавить на ваш сайт JavaScript, который сообщает PageSpeed Insights, что ваш сайт может работать медленнее.
Также может быть, что CDN устанавливает файлы cookie, и ваш код больше не размещается в домене без файлов cookie, что также снижает ваш счет.
Так в чем же тогда выгода от наличия CDN? Хотя быстрые оценки не отражаются в оценках внешнего интерфейса PageSpeed Insights, CDN по-прежнему является ценным инструментом для повышения скорости внутреннего сайта, который PageSpeed Insights не анализирует.
С помощью нашего плагина оптимизации производительности Hummingbird вы можете сканировать свои веб-сайты, получать подробные рекомендации и наблюдать, как ваши сайты автоматически оптимизируются для сверхскоростной работы.Узнать больше
Подведение итогов
Я признаю поражение. Общий балл 91/100 — это наивысший результат, который я могу получить на PageSpeed Insights.
Да, попытка обыграть систему расстроила меня и, возможно, даже немного смутила, хотя в целом я многому научился.
Существует множество мер, перечисленных выше, которые вы можете применить на своем сайте, чтобы улучшить его производительность.
PageSpeed Insights, хотя и сводит с ума, предлагает хороший индикатор того, на правильном ли вы пути, пытаясь ускорить свой сайт.
Точно так же нельзя игнорировать Pingdom и GTmetrix. Оба предлагают полезные идеи и более подробную информацию о том, как можно повысить производительность.
Если вы хотите получить высокий балл, лучше всего поэкспериментировать с рядом критериев и посмотреть, что лучше всего подходит для вашего сайта и настройки сервера. В конце концов, все ситуации разные.
Какую оценку получил ваш сайт в Google PageSpeed Insights? Какие меры вы предприняли для этого? Расскажите нам в комментариях ниже.
Изображение предоставлено: xmodulo.
Бесплатное видео Почему 100 НЕ является идеальным показателем скорости загрузки страницы в Google (* 5 минут просмотра) Узнайте, как использовать Google PageSpeed Insights, чтобы ставить реалистичные цели, повышать скорость сайта и почему стремиться к 100 баллам — НЕПРАВИЛЬНАЯ цель.
Теги:Как решать проблемы, отмеченные в Google PageSpeed Insights и других советах — Fuel Made
«Алекса, какая погода на улице?»
«Здравствуйте, Google, где ближайший итальянский ресторан?»
«Привет, Siri! Как долго я доберусь до ближайшего аэропорта? »
Сейчас этого нельзя отрицать: мы живем в мире мгновенного удовлетворения.Но за эту потребность в быстром ответе приходится платить.
А реальная цена .
Не секрет, что скорость сайта влияет на коэффициент конверсии — задержка скорости загрузки страницы в 1 секунду может снизить конверсию на 7%. Но это намного глубже, чем просто продажи: на качество обслуживания клиентов, поисковую оптимизацию и покупательское поведение влияет скорость сайта.
Время — это новая валюта, а скорость равна доходу.Быстрый веб-сайт не только побуждает клиентов оставаться с вами, но и влияет на восприятие посетителями вашего бренда.
Итак … насколько быстро «быстро»?
С точки зрения скорости страницы, быстро составляет менее трех секунд.
Джон Мюллер, старший аналитик тенденций для веб-мастеров в Google, признал, что сайты должны стремиться к загрузке от 2 до 3 секунд.Пользователи подтверждают это: более половины ожидают, что страница будет загружена в течение этого периода времени, а количество посетителей начинает резко снижаться после этого.
Продавцы слышат это громко и ясно: в период с Черной пятницы 2017 года по 3 января ведущие веб-сайты розничной торговли в западном мире и Китае были готовы к использованию за 2,5 секунды для потребителей, совершающих покупки в Интернете.
Эффект просачивания
Не только быстрый веб-сайт влияет на конверсию, но и скорость влияет на то, как посетителей могут найти вас: как органически, так и с помощью платного трафика.
С 2010 года Google использует скорость сайта в качестве фактора ранжирования (один из многих), а недавно они расширили свои критерии, чтобы охватить мобильные устройства. Начиная с июля, Google будет использовать скорость мобильной страницы в качестве фактора ранжирования в своих результатах мобильного поиска.
Это окажет большее давление на компании, которые, как выяснил Google, не оправдывают ожиданий клиентов: 70% мобильных целевых страниц, которые они недавно проанализировали, занимали более пяти секунд для отображения визуального контента в верхней части страницы. .
Это означает потерю дохода — 53% посетителей мобильного сайта покидают страницу, загрузка которой занимает более трех секунд.
Это касается и платного трафика. Медленные целевые страницы снижают ваш показатель качества Google. Чем ниже показатель качества Google, тем выше цена за клик.
Итак, скорость сайта оказывает влияние на всех ваших усилий.
Как увеличить скорость страницы?
Сначала начнем с теста.
Этот процесс помогает выявить элементы вашего сайта, которым требуется помощь. При тестировании своего сайта важно проводить тестирование как для ПК, так и для мобильных устройств, а также для домашней страницы и страниц продуктов.
Одним из наиболее популярных инструментов, на которые опираются продавцы для тестирования скорости сайта, является Google Pagespeed Insights.
Когда вы запустите свой веб-сайт с помощью инструмента, вы увидите две оценки:
- Скорость вашего сайта: хорошая, средняя или низкая
- Оптимизация: оценка «Хорошо», «Средний» или «Низкий», а также оценка из 100.
Оценка скорости — это относительно новое обновление, которое измеряет ваш сайт по сравнению с другими пользователями Chrome в Интернете. Если ваш сайт не получает достаточно трафика, вы не получите оценку:
.Ниже вы увидите список рекомендаций Google по увеличению времени загрузки.
Правда о Google PageSpeed Insights
Прежде чем приступить к реализации рекомендаций Google, вы должны помнить о нескольких факторах:
- Вашему интернет-магазину могут потребоваться определенные функции, для которых требуются сторонние приложения или файлы большого размера, что делает предложения Google менее актуальными и / или…
- У вас может не быть контроля над рекомендациями, которые они дают (что определенно может произойти, если ваш веб-сайт находится на размещенной платформе, такой как Shopify).
Хотя эти рекомендации служат хорошей отправной точкой для оптимизации, стремление к высшему баллу не обязательно является целью.
Google PageSpeed Insights основан на наборе стандартных правил — правилах Google. Здесь речь идет о предполагаемой производительности, а не о фактической производительности вашего сайта. Есть много аспектов сайта, которые могут показаться медленными при автоматических тестах, но не влияют на работу пользователей (например, фоновые события, которые пользователи не видят).
Другими словами, Google PageSpeed Insights не учитывает пользовательский опыт, поскольку он связан со временем загрузки веб-сайта.
В любом случае, вы можете быть немного ошеломлены проблемами, которые отмечает . Такие слова, как «Устранение блокировки рендеринга» или «Использование кеширования браузера» могут звучать как другой язык, и вы не одиноки.
Итак, давайте переведем, ладно?
Примечание: некоторые рекомендации требуют расширенного кодирования, и конечный результат может быть минимальным. Их замена может не стоить затрат.
«Устраните блокирующие отображение JavaScript и CSS в верхней части страницы»
По сути, это означает, что вы должны реструктурировать свой код так, чтобы в первую очередь загружались критически важные ресурсы и контент.Расставляя приоритеты в ресурсах, которые обеспечивают необходимый стиль и функциональность для верхнего содержимого, вы можете гарантировать, что ваши пользователи смогут получить доступ к наиболее важной части страницы как можно быстрее.
Хотя все на веб-сайте в какой-то момент необходимо загрузить, файлы JavaScript и CSS представляют собой свое собственное узкое место, поскольку они также должны быть выполнены. Поскольку браузер прекращает рендеринг, чтобы файлы выполнялись наиболее эффективным способом, эти файлы могут на мгновение предотвратить доступ к контенту.Вам следует подумать о настройке кода, чтобы браузер пользователя загружал эти ресурсы в последнюю очередь (или с отложенным анализом), что может иметь большое значение для повышения скорости страницы.
Это может быть сложно реализовать, и это должен делать кто-то с продвинутыми навыками CSS и JavaScript, особенно если ваш магазин живет на Shopify.
«Использование кеширования браузера»
Каждый раз, когда вы посещаете веб-сайт, вы загружаете в локальный кеш своего браузера множество различных ресурсов — HTML, CSS, Javascript и изображения.Это сделано для того, чтобы веб-сайту не нужно было извлекать эти ресурсы при каждой загрузке страницы.
Когда вы видите это сообщение в Google Pagespeed Insights, это обычно означает, что сервер не принимает заголовки управления кешем (именно эти заголовки позволяют браузеру / серверу знать, обслуживать ли локально кэшированный файл или загружать новый файл) . Или это означает, что активы указаны для кэширования на короткий промежуток времени.
Если ваш магазин существует на Shopify, эта проблема не может быть решена.Поскольку это размещенная платформа, у вас нет никакого контроля над сервером, поэтому, к сожалению, вы не можете вносить изменения такого типа.
«Уменьшить активы»
Это тоже непросто, и его должен выполнять только опытный разработчик. Это происходит, когда Google обнаруживает, что размер ресурса можно уменьшить за счет минификации.
Минификация — это процесс удаления или исправления ненужных данных из ресурсов, таких как JavaScript и CSS, без влияния на то, как браузер будет обрабатывать HTML.Он может удалить повторяющийся код и сделать код короче, удалив комментарии и символы пробелов и сделав имена переменных и функций короче, сэкономив несколько килобайт здесь и там.
Если вы используете Shopify, платформа не минимизирует какие-либо активы, но минимизирует файлы SCSS, которые обрабатывает. Поэтому, если вы хотите, чтобы все ваши ресурсы были минимизированы, вам понадобится помощь разработчика.
Чтобы получить максимальную отдачу от минификации, вы можете снять обязанности по обработке SCSS с Shopify и развернуть свои процессы сборки JavaScript и CSS с такими вещами, как Webpack, PostCSS, cssnano и Purgecss.
Кроме того, многие продавцы электронной коммерции полагаются на сторонние приложения, которые часто являются виновниками этой проблемы. Скорее всего, вам придется связаться с разработчиком приложения для управления этими файлами.
«Оптимизировать изображения»
Изображения обычно составляют огромный кусок веса на веб-сайтах (около 65 процентов!), И вы добьетесь больших успехов, сжав свои изображения.
Бывают случаи, когда Google указывает на изображение, которое мы не можем контролировать (мы чувствуем вашу боль с этим), но все остальные изображения должны проходить через веб-сайт сжатия фотографий, такой как tinypng.com.
Другой вариант — обработать изображения и передать их через CDN (сеть доставки контента), используя такие веб-сайты, как Kraken.io или Imigix. Этот подход оптимизирует, доставляет и кэширует всю вашу библиотеку изображений, поэтому вам не нужно повторно загружать сжатые изображения.
За пределами PageSpeed Insights
После того, как вы протестировали свой сайт в Google и поняли, что было помечено, можно запустить свой сайт с помощью нескольких других инструментов для ускорения загрузки сайта.
Вы заметите небольшие различия между ними, которые отразятся на счете и времени загрузки страницы. Для этого есть несколько причин, но наиболее распространенной является расположение сервера; Сетевая маршрутизация для доступа к вашему конкретному серверу будет варьироваться в зависимости от того, где вы находитесь.
- GTMetrix: этот инструмент объединяет Pagespeed Insights и Yslow для получения одной совокупной оценки — от A до F.Он также предоставляет подробный отчет о производительности, в котором рассматриваются ключевые проблемы.
- Webpagetest: Наш фаворит! Обладая целым набором расширенных функций, этот инструмент может предложить отличное представление о скорости вашего сайта. У него есть удобный «водопадный» анализ, который все тщательно разбивает.
- Pingdom: это еще один расширенный тест, который мы рекомендуем.С помощью Pingdom вы можете выбрать расположение сервера, с которого хотите провести тестирование, что, как упоминалось выше, действительно влияет на результаты тестирования.
Вы должны заметить некоторое сходство в предложениях этих инструментов. Лучше всего отслеживать рецидивистов и в первую очередь разбираться с ними. Обязательно протестируйте свой сайт после внесения изменений, чтобы увидеть, как они работают.
Также неплохо протестировать своих конкурентов, чтобы увидеть, что не так с производительностью их сайтов.Как сказал Гарри Шам, компьютерный ученый из Microsoft: двести пятьдесят миллисекунд, быстрее или медленнее, близко к магическому числу для конкурентного преимущества в Интернете.
Самостоятельные методы повышения скорости загрузки сайта
Есть несколько настроек, которые вы можете сделать на своем собственном сайте, которые не требуют программирования.
- Сжимайте изображения: Фотография — главный виновник скорости печати страниц. Вы всегда должны запускать свои изображения через сайт программы сжатия фотографий перед их загрузкой или использовать CDN (как упоминалось выше).
- Увеличьте ценность своих фотографий: Каждое изображение, добавленное на ваш сайт, — это еще одно изображение, которое необходимо загрузить.Определите, какие изображения вам нужны, и удалите те, которые вам не нужны.
- Удалите карусели. Вращающиеся слайдеры изображений не только имеют большой вес (который долго загружается), они часто убивают конверсию.
- Удалите ненужные сторонние приложения: Поскольку многие сайты электронной торговли полагаются на сторонние приложения, лучше всего удалить те, которые не являются абсолютно необходимыми.
Попробуйте запустить тест скорости страницы до установки приложения, а затем после, чтобы увидеть, насколько оно влияет на производительность сайта. - Проверьте свои шрифты: Шрифты занимают много места на вашем веб-сайте, поэтому, если на вашем веб-сайте несколько шрифтов, сделайте это простым и выберите один. Поскольку на веб-сайтах часто используются шрифты значков для страниц корзины и учетных записей, мы рекомендуем заменить эти шрифты значков на SVG (масштабируемая векторная графика).В SVG есть несколько улучшений: они не ограничиваются одноцветными, они легче по весу и могут быть лучше с точки зрения доступности и SEO.
- Удаление каналов социальных сетей: рассмотрите возможность удаления каналов и виджетов социальных сетей. Хотя они предлагают определенную ценность для клиентов, они значительно увеличивают время загрузки.
Прочие факторы в игре
Есть также некоторые дополнительные элементы, о которых следует помнить, пытаясь увеличить скорость сайта:
- Используйте надежный хостинг: Услуги веб-хостинга играют решающую роль в производительности вашего сайта. Одна из причин, по которой мы рекомендуем Shopify, заключается в том, что он имеет некоторые ключевые преимущества в этой сфере. Поскольку это размещенная платформа, сервер масштабируем и оптимизирован для удовлетворения потребностей магазина электронной торговли. Это означает, что время загрузки часто бывает быстрее, чем было бы, если бы вы использовали свой собственный сервер.
Shopify доказал это в действии: на пике Черной пятницы, Киберпонедельника 2017, Shopify обрабатывал продажи на 1,1 миллиона долларов в минуту.
- Использование сетей доставки контента: CDN — это группа оптимизированных высококачественных серверов, разбросанных по всему миру.Это означает, что копии содержимого вашего сайта — изображения, файлы Javascript и CSS — кэшируются и хранятся на сервере. Поэтому, когда посетитель заходит на ваш сайт, эти ресурсы загружаются с ближайшего географически сервера, что сокращает время загрузки.
Поскольку природа электронной коммерции означает, что вы можете продавать на международном уровне, вам следует серьезно подумать о CDN.
Боковое примечание: Shopify предоставляет CDN для всех статических ресурсов (изображений, CSS и Javascript).
- Старайтесь не полагаться на всплывающие окна быстрого доступа: Многие темы Shopify включают всплывающее окно быстрого просмотра, которое обеспечивает обзор продукта с домашней страницы или страницы коллекции. Это происходит без загрузки совершенно новой страницы. Часто пользователи могут даже добавить товар в корзину из этого всплывающего окна.
Какими бы изящными они ни были, эти всплывающие окна часто предварительно загружают всю информацию со страницы продукта, даже если кто-то не нажимает кнопку «Быстрый просмотр».На странице, заполненной миниатюрами изображений товаров, это приводит к огромному объему данных.
Если в этом нет необходимости, рекомендуем их удалить.
Как видите, необходимо учитывать множество элементов, которые влияют на скорость сайта. Повышение скорости — непростая задача, и некоторые из этих предложений может быть трудно реализовать, если их доходность неизвестна.
Но помните … каждая секунда на счету. Доверие клиентов будет расти в результате быстрого создания сайта, как и их доверие к вашему бренду.