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

Бесплатный сервис предназначен для быстрого тестирования скорости передачи и скачивания данных на компьютер пользователя.

Для выполнения проверки загрузка или установка каких-либо дополнительных компонентов не требуется.

Для начала тестирования предусмотрена специальная кнопка «Вперед» (Начать проверку).

Конечный результат выдается спустя 30 секунд после запуска программы на выполнение.

Особенности Speedtest Net

В результате применения СпидТест появляется возможность определить входящую и исходящую скорость Интернет-соединения.

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

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

Глобальная проверка скорости СпидТест

• Сервис Speedtest.net включает в себя всего одну страницу – главную.

Он представляет собой:

• пинг ,

• величину входящей и исходящей скорости Интернет-соединения,

• местоположение пользователя , установленное по IP-адресу компьютера, с которого был выполнен вход на сайт.

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

1. Общее количество тестов — 6867.
2. Средняя скорость скачивания — 30,13 Мб/сек.
3. Средняя скорость загрузки на ПК — 28,31 Мб/сек.
4. Среднее значение пинга — 29 мс.

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

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

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

Весь процесс определения реальной скорости Интернет-соединения через Speedtest, выполняется посредством одного клика мышкой.

Это очень удобно и не занимает много времени. Справиться с такой задачей под силу даже новичку.

Ookla

Компания Ookla — это мировой лидер в области проверки скорости широкополосных интернет-соединений, а также разработки программного обеспечения по диагностике сети.

SpeedTest.net был разработан как наиболее точный способ определения самого быстрого Интернет-провайдера и мобильной сети. Тесты скорости агрегируются путем усреднения результатов испытания каждого устройства в заданном месторасположении пользователя, каждый день.

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

Более 5 миллионов пользователей ежедневно используют приложение Speedtest, что позволяет компании оставаться лидером в области тестирования скорости интернета. Этот бесплатный сервис доступен любому человеку по всему миру, кто заинтересован узнать особенности и характеристики своего интернет-соединения.

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

1. Google PageSpeed Insights

Инструмент оценки скорости загрузки страниц от Google. Показывает значение от 0 до 100 как для компьютеров, так и для мобильных устройств. Тут же указывает на слабые места сайта и дает рекомендации по оптимизации скорости.

2. Pingdom Tools

Дает оценку по скорости, показывает количество обращений к серверу и среднее время загрузки. В сводной таблице подробно отображет данные по каждому запросу к серверу (стили, скрипты, изображения и др). Легко оценить, что именно на сайте замедляет загрузку.

3. WhichLoadFaster

Загружаете два сайта для сравнения (себя и конкурента), визуально наблюдаете, кто загружается быстрее (удобно демонстрировать клиентам). В конце загрузки отображается информация, какой сайт выиграл и во сколько раз быстрее он загрузился.

4. Web Page Performance Test

Загружает страницу два раза, сравнивает количество обращений – выявляет, насколько хорошо организовано кеширование, показывает подробную статистику по каждому из тестов. Сохраняет скриншоты, как сайт выглядит на каждой секунде загрузки. Также в удобной форме демонстрирует, какая группа запросов заняла больше всего времени. Сервер находится в Далласе (США ).

5. GTmetrix

Еще один полезный инструмент для теста скорости сайта. Отображает много сводной информации, также хранит историю, чтобы можно было сравнить, насколько улучшилась или ухудшилась скорость загрузки. Подгружает рекомендации Yahoo и Google для оптимизации скорости, сортируя их по приоритету. Тестовый сервер находится в Ванкувере (Канада).

6. Load Impact

Сервис тестирует, насколько сайт выдерживает нагрузку (легкий DDOS ). Эмулируется несколько десятков пользователей и более сотни активных соединений. Так как тест длится несколько минут, то в это время нагрузки можно использовать и другие инструменты для оценки скорости загрузки страниц в час пик. По окончанию теста можно посмотреть график, как меняется скорость загрузки от количества активных пользователей.

7. Monitis Tools

Анализирует загрузку сайта с разных участков Земли - серверы в США , Европе и Азии. Отображает сводную статистику по каждому тесту.

8. SiteSpeed.me

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

9. PR-CY

Массовая проверка скорости сайта. Можно задавать до 10 адресов – сравнивая таким образом время загрузки и размер документа для каждого из ресурсов.

10. WebPage Analyzer

Отчет по загрузке страницы и всех дополнительных скриптов/стилей/изображений. Простой и часто необходимый инструмент.

Если вы используете какие-то другие бесплатные онлайн-инструменты для проверки скорости загрузки страниц сайта, делитесь ими в комментариях.

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

Более 50% пользователей интернета с мобильных устройств, ожидают практически мгновенной загрузки сайта. Исходя из такой статистики, речь в этой статье пойдет о том, как достичь показателей 100/100 в сервисе Google PageSpeed Insights для стационарных и мобильных устройств на примере сайта "Monitor Backlinks".

Мотивация

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

Однажды, при работе с PageSpeed Tool, было замечено, что сайт компании Google имеет удивительно низкие показатели для мобильных устройств - 59/100. Ситуация с версией для стационарных устройств была лучше - 92/100.

Казалось бы, что они должны были использовать свой же инструмент для оптимизации своего веб-сайта, не так ли? Так неужели результат 100/100 недостижим?

Именно это послужило стимулом для достижения максимально быстрой загрузки сайта, чтобы доказать, что достичь результатов 100/100 реально, и при желании вы также сможете это сделать. Это не одержимость, это просто стремление достичь совершенства.

Стартовые показатели подопытного сайта - 87/100.

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

О том, как удалось достичь таких показателей, читайте далее.

Как ускорить загрузку страниц?

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

Обратите внимание, на то, что некоторые из шагов инструкции могут потребовать технических знаний, независимо от используемой системы управления контентом (CMS).

Итак, приступим:

Шаг № 1: Оптимизация изображений

Чтобы изображения загружались быстрее, PageSpeed Insights Tool предложил оптимизировать их за счет уменьшения размеров файлов. Чтобы решить эту задачу, необходимо выполнить две важные вещи:

• Сжать все изображения, используя такие инструменты как Compressor.io и TinyPNG. Это бесплатные инструменты, при помощи которых можно уменьшить размер графического файла более чем на 80%, а в некоторых случаях, без ухудшения качества самого изображения.
• Уменьшить размеры изображений до минимума без понижения их качества. Например, если на сайте нам нужна картинка 150x150px, то и на сервере картинка должна быть соответствующих размеров. Параметры изображений не должны подгоняться при помощи CSS или HTML-тегов.

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

PageSpeed Insights предлагает опцию загрузки уже оптимизированных изображений, поэтому их можно загрузить на сервер непосредственно с данного сервиса. То же самое можно сделать и с JavaScript и CSS.

Шаг № 2: Минимизация JavaScript, CSS и HTML

В примере, Google предлагает сократить объемы JavaScript и CSS файлов.

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

Чтобы устранить эту проблему, на сервере был установлен Gulpjs. Это инструмент, который автоматически создает новый файл CSS и удаляет все ненужные пробелы. Также он автоматически создает новый файл CSS каждый раз, когда вы вносите новые изменения. В приведенном примере, это помогло уменьшить размер основного файла CSS приблизительно с 300Kb до 150Kb. Такая разница в размерах обусловлена ненужными символами.

Дополнительно уменьшить размеры JavaScript и CSS можно за счет переименования переменных, при условии корректной работы селекторов и обновления HTML.

Оптимизировать JavaScript можно при помощи Closure Compiler, JSMin или YUI Compressor. Вы можете создать специальную программу, которая используя вышеперечисленные инструменты, будет переименовывать файлы и сохранять их в рабочий каталог.

Уменьшить CSS можно, используя инструменты YUI Compressor и cssmin.js.

Минимизировать HTML код можно через PageSpeed Insights. Выполните анализ страницы и выберите "Сократить HTML". Чтобы оптимизировать код кликните на "Просмотреть оптимизированное содержание".

Детальнее об оптимизации JavaScript и CSS файлов вы узнаете по ссылке:

Также можно загрузить оптимизированные файлы непосредственно из PageSpeed Tool.

Вот результаты, полученные после минимизации JavaScript и CSS:

Шаг № 3: Использование кэш браузера

Для многих веб-мастеров этап использования кэширования браузера является самым сложным.

Чтобы решить этот вопрос, пришлось перенести все статические файлы с сайта на CDN (content delivery network/сеть доставки контента).

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

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

Вот визуализация того, как работает CDN:

На подопытном сайте все изображения, файлы JavaScript и CSS были перенесены на CDN, а на главном сервере остались храниться только файлы HTML. Размещение изображений на CDN играет важную роль в том, насколько быстро будут загружаться страницы сайта для посетителей.

После вышеупомянутых манипуляций инструмент PageSpeed досадно продолжал предлагать использовать кэширование браузера для отдельных сторонних ресурсов. Вот скриншот:

Чтобы решить этот вопрос, пришлось исправить скрипты социальных сетей путем замены счетчиков, на статические изображения, размещенные на CDN. Вместо сторонних скриптов, которые пытались получать доступ к данным из Twitter, Facebook или Google Plus, для подсчета подписчиков, был установлен автономный счетчик, что и помогло решить данный вопрос.

Но более досадным было то, что вдобавок к проблемам со скриптами социальных сетей работу веб-сайта замедлял код Google Analytics.

Решения проблемы со скриптом Google Analytics довольно сложная задача. Так как Analytics был нужен, и его нельзя удалять с сайта, пришлось искать другие решения.

Google довольно редко меняет код Analytics, раз или два в год. Поэтому, Razvan создал специальный скрипт, который каждые восемь часов проверяет наличие последних обновлений кода Analytics, и при обнаружении обновлений загружает их. Таким образом, можно разместить JavaScript код Analytics на сервер, исключая необходимость загружать его с серверов Google, при каждом посещении.

В случае отсутствия обновлений, код Analytics будет загружаться из кэшированной версии на CDN.

А когда Google обновит код JavaScript, то сервер автоматически загрузит новую версию и обновит его на CDN. Этот скрипт был использован для всех внешних сторонних скриптов.

Вот скриншот из Pingdom Tools на котором показаны все загрузки из CDN, в том числе и код Google Analytics. Единственный файл загрузки с сервера, это файл домашней страницы, объем которого всего лишь 15,5Kb. Устранение всех сторонних скриптов значительно улучшило общую скорость загрузки.

Шаг № 4: Удаление блокирующих кодов

Устранение блокираторов также является довольно сложным этапом в процессе повышения скорости загрузки страниц, требующий хороших технических знаний. Основная проблема, которую пришлось решать - это ревизия всего кода JavaScript начиная сверху от "header" и "body" до расположенного внизу "footer" на всех страницах сайта.

Если ваш сайт на платформе Wordpress, плагин Autopmize, скорее всего, поможет вам решить эту задачу. Проверьте свои настройки, а затем в снимите отметку с "Force JavaScript" и установите ее на "Inline all CSS".

Шаг № 5: Включение сжатия

Шаг № 6: Оптимизация мобильного формата

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

С помощью Google Chrome вы можете посмотреть, как ваш сайт выглядит в различных мобильных версиях. Для этого нажмите на иконку меню (гамбургер) настроек и управления браузером в верхнем правом углу, а затем выберите "Дополнительные инструменты → Инструменты разработчика". На панели инструментов выберите иконку с изображением мобильных устройств. Вот и все, смотрите:

В случае примера, не потребовалось каких-либо радикальных изменений.

Вывод

В результате было выполнено 6 самых важных шагов, которые помогли достичь идеальных показателей 100/100 в Google PageSpeed Tools для сайта "Monitor Backlinks". В итоге была оптимизирована не только главная страница, но и все внутренние страницы.

Среди всех выполненных действий по оптимизации сайта можно выделить три самых важных:

1. Использование CDN.
2. Устранение блокирующих кодов. (Избегайте JavaScript в теле кодирования, лучше переместите его в низ файлов.)
3. Оптимизация размеров и сжатие изображений.

Хочется еще раз напомнить о том, что Google PageSpeed Tools является всего лишь вспомогательным инструментом для оптимизации ресурса. Инструменты предназначены для сокращения времени между запросом (кликом по ссылке) и откликом страницы сайта (отображения первых элементов страницы), чтобы посетители не покидали сайт, так и не дождавшись его загрузки. Также рекомендации, предоставляемые инструментом, необходимо применять с осторожностью, чтобы пользователям не показывалась разваленная верстка или какой-то не стилизованный набор блоков.

Обратите внимание. Быстрая загрузка страниц сайта косвенно влияет на ранжирование ресурса в поисковых системах, то есть: выше скорость загрузки → больше и длительнее посещения → выше ранжирование.

Если вы использовали инструмент Google PageSpeed Insights для оптимизации своего сайта, поделитесь достигнутыми результатами в комментариях.

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