Онлайн проверка скорости сайта – Проверка скорости загрузки сайта — как ее измерить онлайн и увеличить с помощью Page Speed Insights от Google

Тест скорости сайта SpeedMetrics

Что дает онлайн проверка скорости сайта

Тестирование сайта на скорость — задача разносторонняя. Оцениваются все показатели и формируется суммарный рейтинг:

  • как быстро сервер создал для HTML-страницу
  • сколько времени потратилось на скачивание ее содержимого, включая статику (стили, изображения, скрипты)
  • как долго ждал посетитель с момента перехода до того, как смог увидеть макет
  • через какой промежуток пользователь смог начать взаимодействовать со страницей, которая полностью стала интерактивной
  • быстрее ли все прогрузилось при переходе на другую страницу
  • поменялась ли скорость при повторном посещении сайта, например, через два дня

Может показаться, что по такому плану можно написать целый реферат «как я оценивал скорость speed24.ru», но на самом деле все проще. В основе находятся три кита:

Три кита ускорения сайта: скорость CMS кеширование сжатие

Скорость CMS

В этот показатель можно включить:

  • как быстро работает сервер и его загруженность
  • шустроту базы данных
  • производительность кода

Сервер не должен быть сильно нагружен, так как при высокой нагрузке его эффективность падает, а в часы пик вы получите что-то вроде Mysql Server has gone away.

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

Сравнивать различные CMS по производительности — это как выяснять среднюю температуру по больнице. Крупные проекты, внезапно, могут работать, и на Bitrix, и на Joomla. А чтобы избавиться от «узких мест», отдельные части могут переделываться под свои потребности, оставляя от коробочной версии одно название.

Один из способов не пересчитывать одни и те же данные — «запоминать» их, или кешировать.

Кеширование

Сразу отметим, что кеширование делится на два больших вида:

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

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

Сжатие

Данные сжимать можно двумя способами:

  • с потерей качества: таким образом пережимаются JPEG-изображения, например
  • без потери качества:
    • также JPEG, но в этом случае удаляются метаданные, которые не влияют на внешний вид
    • сжимать с помощью Gzip передаваемое по интернет-соединению содержимое: HTML, CSS, JavaScript
    • минификация JavaScript и CSS: из этих файлов удаляются лишние пробельные символы, меняется структура с сохранением работоспособности

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

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

Как же проверить вот это все легким движением мыши? Воспользоваться онлайн проверкой! Она даст ответ на вопрос, все ли в порядке с сайтом.

А как же CDN?

Мы не стали включать CDN в «базовые» методы ускорения:

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

Материалы по теме

Медленная работа сайта CDN PHP Content Delivery Network для ускорения загрузки страницы

SPEEDTEST на русском 🌏 проверить скорость интернета бесплатно на русском языке

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

В данном материале мы уделим внимание:

  1. процессу работы с упрощенным виджетом на нашем сайте;
  2. функциональным особенностям проекта Speedtest;
  3. причины, которые могут мешать корректной работе интернета;
  4. рекомендациям для повышения скорости соединения.

Проверить скорость интернета Спидтест на русском языке

Работая с функционалом нашего сайта, вы можете оперативно проверить скорость интернета Speedtest на русском. Для этого потребуется указать некоторые настройки:

  • выберите сервис, на который будет осуществляться передача пакетов данных. Данный параметр продемонстрирует возможную задержку (пинг) по конкретному направлению. Влияет на онлайн игры, голосую и видеосвязь. Если этот параметр не важен для вас, оставьте активным автоматический подбор ближайшего сервера;
  • укажите единицу измерения, в которой будет представлен итоговый результат. По умолчанию это мбит/секунду.

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

Итоговый результат выглядит следующим образом:

  • прием пакетов данных (Download). Ключевой фактор, указывающий на максимальную допустимую скорость скачивания файлов. Также влияет на загрузку WEB-страниц;
  • передача пакетов данных (Upload). Показывает, с какой скоростью производится загрузка данных с вашего устройства во всемирную паутину;
  • задержка (Ping) определяет время, необходимое на получение ответа от сервера.

Проверка скорости через сервис – speedtest.net

Официальный сайт Спидтест скорости интернета на русском языке предлагает пользователям следующий расширенный функционал:

  • мультиязычная платформа оптимизирована для пользователей из различных стран, создавая дополнительные удобства;
  • наличие компьютерной и мобильной версии сервиса. Со смартфона вы можете замерить качество беспроводного Wi-Fi соединения и мобильной сети;
  • возможность регистрации профиля, где вы можете хранить результаты вашего тестирования для дальнейшего сравнения или удобного экспорта;
  • система подбора сервера автоматически может узнать регион вашей геолокации и подобрать подходящий вариант. Также присутствует удобная система поиска по наименованию провайдера или города/страны.

Процесс тестирования практически не отличается от вышеуказанного варианта:

  1. Перейдите на официальный сайт;
  2. Выберите подходящий тест;
  3. Дождитесь итоговых результатов.

Почему скорость интернет низкая

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

  • наличие на компьютере вредоносного программного обеспечения. Рекомендуется использовать лицензионное антивирусное обеспечение или переустановить операционную систему;
  • некорректная работа ресивера. Для получения наилучшего результата рекомендуется подключать компьютер к роутеру при помощи кабеля (исходящая и входящая скорость не будут ограничены пропускными возможностями беспроводного соединения). Также рекомендуется периодически выполнять перезагрузку устройства;
  • загруженность линии другими девайсами, подключенными к Wi-Fi соединению;
  • другие проблемы, связанные с обслуживанием вашего оператора. Узнать актуальную информацию о проводимых работах и изменениях в тарифе можно в службе поддержки или на официальном новостном ресурсе провайдера.

Как повысить скорость интернет-соединения

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

Для этого:

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

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

Speedtest – точная проверка скорости Интернета в России – спидтест

В зависимости от используемого типа подключения к Интернету будут отличаться и рекомендации по ее увеличению. Но есть также и базовые вещи для любого вида соединения.

Основные рекомендации по улучшению

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

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

Также частой причиной медленного интернета является использования различных ВПН (VPN) сервисов (особенно бесплатных). Очень часто они занижают скорость до 5 Мбайт/сек. Проверить это можно легко, просто отключаете ВПН и смотрите результаты. Если показатели соответствуют тарифу – значит нужно менять VPN.

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

На телефоне и ноутбуке с соединением по Wi-Fi

На ноутбуках и телефонах преимущественно используется WiFi соединение, поэтому в первую очередь идём в настройки роутера и выбираем стандарт 802.11ac, если такого нет, то выбираем 802.11n. В идеале это нужно делать, основываясь на характеристиках wifi модуля вашего устройства, но в 90% случаев этот совет вам подойдет.

На компьютере с подключением по кабелю

На компьютерах с операционной системой Windows по умолчанию стоит ограничение на использование интернет-канала в 80%. Поэтому можно смело снимать это ограничение с помощью утилиты gpedit.msc. В Windows 10 можете просто найти ее через поиск, а в Windows 7 открываете программу «Выполнить» (Win+R) и вставляете название утилиты. В открывшемся окне, переходим во вкладку «Ограничить резервируемую пропускную способность» и там в поле «Ограничение пропускной способности» ставим значение «0».

Скорость загрузки сайта: как проверить онлайн

Чтобы проверить скорость загрузки сайта нужно использовать онлайн инструмент PageSpeed от Google. Он позволит измерить скорость сайта и даст конкретные рекомендации по её увеличению. Вот как удалось повысить скорость загрузки сайта, применив некоторые рекомендации PageSpeed:

Показатель 85 и выше — означает «всё в порядке», это зеленый уровень. Рекомендации, отмеченные жёлтым, позволят повысить скорость загрузки. Красный цвет — это рекомендации, выполнение которых приведёт к значительному увеличению скорости сайта: именно на них стоит сосредоточить основное внимание.

Каждая рекомендация имеет сноску «как исправить», раскрывающий перечень проблем и содержащий ссылку на справку и инструменты для исправления. Ниже находится список уже устранённых проблем. Кроме оценки скорости загрузки для обычных компьютеров, PageSpeed измеряет скорости загрузки сайта в мобильных устройствах.

Воспользоваться инструментом PageSpeed можно тремя способами. 1-ый: через «Инструменты для веб-мастеров» — пункт «Другие ресурсы». 2-ой и 3-ий: зайти на страницу https://developers.google.com/speed/pagespeed/, там осуществляется онлайн проверка скорости загрузки сайта, а можно — установить плагин для Chrome или Firefox с теми же функциями, но подробно.

Применив некоторые рекомендации PageSpeed, мне удалось поднять скорость загрузки сайта до следующих показателей: 94 — для компьютеров и 88 — для мобильных устройств.

Изначально они были существенно ниже и не достигали отметки 85. В этой же вкладке появилось новшество — оценка юзабилити или удобства пользователей. Этот показатель для сайта webmastersam.ru находится на низком уровне:

Он имеет принципиальное значение для сайтов с мобильным контентом. Нужно существенно увеличить размеры шрифтов и области активных элементов, которые выделяются красными рамками на интерактивном изображении сайта. Для уточнения области просмотра укажите мета-тег Viewport: <meta name="viewport" content="width=1024">. Он подсказывает браузеру ширину страницы (здесь: 1024px) и сокращает время её загрузки.

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

Увеличение скорости сайта

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

1. Скрипты

Все скрипты JavaScript по возможности перенесите из тега Head вниз страницы, а лишние удалите. У меня там остался код Analytics, код Яндекс Метрики я поставил перед закрывающим тегом Body. Отдельные кнопки социальных сетей я убрал вообще, оставил только блок кнопок.

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

2. CSS

Объединил три внешних css-файла в один. Кроме этого, имеет значение порядок указания css-свойств для увеличения скорости формирования страницы браузером. Например, padding необходимо располагать последним в череде свойств. Также незачем дублировать много одинаковых свойств для разных элементов.

Чтобы не вдаваться в подробности, просто необходимо сократить код css-файла автоматическими средствами, при этом оптимизируется порядок записи свойств, а повторения — сократятся (см. пункты 4 и 5).

3. Кэш браузера

Любой веб-сайт имеет статичные ресурсы (изображения, javascript- и css-файлы), которые не меняются, или изменяются редко. Если используется кэш браузера, то исчезают повторные HTTP-запросы и ответы сервера на них. Пользователи, которые недавно заходили на ваш сайт, получают выигрыш в скорости загрузки страниц.

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

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 7 days"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType text/x-javascript "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType application/x-shockwave-flash "access plus 1 year"
</IfModule>

Для сайтов, созданных на движках, этот вариант записи может не сработать. Проверить работоспособность этого варианта для своего домена можно на gtmetrix.com. Это касается и всех остальных пунктов для улучшения скорости работы сайта, которые располагаются списком по степени важности:

Одна операция по включению кэша для браузеров добавила 3 балла. Эта позиция не получила 100% производительности из-за присутствия внешних ресурсов: скриптов счётчиков, рекламы и «социальных» кнопок:

В идеале, не оптимизированными на 100%, должны остаться только те параметры, которые зависят от внешних ресурсов. Если кликнуть по нужной позиции — открывается список ресурсов и ссылка на справку, где могут быть указаны необходимые инструменты оптимизации. Например, варианты страницы с сокращённым кодом html или css-файла можно получить в соответствующих позициях списка.

Пользуйтесь переводчиком — у кого проблемы с английским: переводите страницы целиком (translate.google.com/?hl=ru).

4. Сокращение кода

Необходимо для html, вместе с встроенным javascript-кодом, и для внешних файлов, например: css. Сокращения кода можно добиться в онлайн-сервисах или произвести вручную. Общий смысл: убрать все лишние пробелы (допустимые) в строках и сократить количество самих строк, касается и встроенных фрагментов скриптов внешних ресурсов.

В идеале каждый структурный тег html начинается с новой строки без пропусков. Всё сделал кроме последнего, так как структура документа становится неудобной для последующей правки кода. Остальное, включая встроенный javascript и код css во внешнем файле, привёл к максимально возможной степени сжатия.

Совет для «небольших» специалистов в области веб-программирования: воспользуйтесь инструментами сжатия (2-ая ссылка в пункте 5), а вручную сокращайте код только в html-редакторах, где высвечиваются ошибки кода. Это касается обязательных пробелов в коде. Мне сжатие кода повысило оценку скорости загрузки на несколько баллов.

5. Изображения

Объединил все фоновые изображения в css-спрайты, остальные изображения необходимо оптимизировать. И хотя я делаю оптимизацию изображений в Фотошопе, PageSpeed выдаёт перечень, где указывается процент их возможного уменьшения без потери качества. Средняя величина возможного выигрыша — 15%, а если у вас он больше и много картинок, то следует это сделать.

Читайте об оптимизации изображений, где описываются инструменты для сжатия png, gif и jpg; файлов html и css; и генераторы css-спрайтов.

Для ускорения загрузки страницы и предотвращения перерисовки желательно прописать размеры изображений в css-коде или теге Img. Особенно это актуально для групп одинаковых по размеру картинок, объединенных единым классом css. Такому class нужно явно задать ширину и высоту — для Img или его непосредственного родительского элемента. Кстати, если размер картинок задан через css, то сервис GTmetrix этого не определяет — берём на заметку, а перепроверяем в самом PageSpeed.

6. Сжатие GZIP

Анализ данного сайта не выявил такой потребности. Другому «подопечному» было предписано использовать сжатие gzip для двух ресурсов: один — внешний (не представляется возможным), второй — файл css. Если у вас сервер Apache и CPanel, то заходим в неё: «Программное обеспечение и службы» — «Оптимизация веб-сайта». Указываем через пробел нужные MIME-типы, у меня только для css-файлов, и сохраняем настройки:

После всего проделанного — проверяем результат: анализируем сайт опять. Если у вас нет возможности включить сжатие, то нужно вручную прописывать в htaccess. Это мой случай (сервер Apache 2) — сжатие gzip только для css-файлов:

<IfModule mod_deflate.c>
    AddOutPutFilterByType DEFLATE text/css
    <IfModule mod_setenvif.c>
        BrowserMatch ^Mozilla/4 gzip-only-text/html
        BrowserMatch ^Mozilla/4\.0[678] no-gzip
        BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
        SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
    </IfModule>
    <IfModule mod_headers.c>
        Header append Vary User-Agent env=!dont-vary
    </IfModule>
</IfModule>

Допишите аналогичные строки с нужными MIME-типами (как вторая строка), остальной код — это устранение ошибок некоторых браузеров, в т.ч. IE версий 6-8, который «шифруется» под Mozilla. Прочтите справку сервиса для позиции «Enable gzip compression». Перед gzip-сжатием желательно сократить код нужных файлов.

Производительность во многом зависит от выбора хостинга — у него должны быть мощные серверы с современным ПО (ссылка ведёт на страницу с обзором хостингов — webmastersam.ru находится на последнем в списке хостинге). Если ваш сайт работает на движке — не злоупотребляйте расширениями.

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

Однако это не означает, что остальные страницы не нужно оптимизировать. Рекомендую прочесть книгу «Реактивные веб-сайты» о клиентской оптимизации: samouchitelbox.ru/optimisation_02matsievski.html, где в подробностях изложены все аспекты повышения производительности сайтов.

Для оперативной проверки скорости сайта и получения расширенных рекомендаций целесообразно установить плагин PageSpeed для Firefox или Chrome — рассмотрим его на примере последнего браузера.

Плагин для проверки скорости сайта

Читал пару отзывов, что плагин не работает, однако это не так. Просто после установки добраться до него через меню Chrome нужно таким образом:

А по-русски это означает следующее: «Инструменты — Инструменты разработчика» (Ctrl+Shift+I). Внизу окошка браузера появится такая горизонтальная панель:

Выберите вкладку PageSpeed, а для того чтобы она развернулась в окно, воспользуйтесь значком, указанным стрелкой. Затем просто нажмите кнопку «Анализ» и получите результаты проверки:

Слева окна будет меню со списком рекомендаций по улучшению скорости загрузки сайта (и уже выполненных), а справа перечень проблематичных элементов и подробности. Работает всё в одном окне.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *