А вы знаете скорость загрузки вашего сайта с мобильных устройств? Самое время разобраться / Хабр

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

Мобильные телефоны всегда с собой, а более 50% запросов на поиск в Google осуществляются через мобильные устройства. По последним данным Hitwise, более 65% запросов в категориях «Еда и Напитки», «Здоровье» и «Спорт» поступают именно с мобильных устройств.

Обозначения на графике:

Доля запросов с мобильных устройств в общем числе поисков по отраслям:

• Еда и напитки — 72%
• Здоровье — 68%
• Спорт — 68%
• Новости и СМИ — 64%
• Образ жизни — 62%
• Автомобили — 62%
• Розница — 56%
• Туризм (не карты) — 52%
• Недвижимость/ земля — 48%
• Досуг — 42%
• Банковские услуги — 39%

Основано на самых популярных вариантах результатов поиска с последующим переходом на соответствующий сектор, 10 апреля 2016 — 7 мая 2016. Источник: Hitwise, подразделение Connectivity.

Вы уже подготовили свой сайт для пользователей мобильных устройств?

Создание мобильной версии сайта — залог успеха, и на то есть причина.

Скорость мобильного интернета (2G/3G/4G) ниже, чем скорость широкополосной или оптоволоконной сети. То есть, сайт может загружаться быстрее на компьютере, чем на мобильном устройстве.

Поэтому необходимо, чтобы сайт был оптимизирован для мобильных устройств, чтобы он был адаптивным, и имелась мобильная версия страниц.

По данным Google известно следующее:

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

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

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

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

А теперь перейдем к обзору инструментов.

Список инструментов:

• Mobitest
• Think with Google
• GTmetrix
• SynTraffic
• Dotcom Monitor

Mobitest

Mobitest от AKAMAI позволяет проверить скорость загрузки сайта с мобильных устройств в следующих городах:

• Лондон;
• Бангалор;
• Кембридж.

Есть возможность выбора из множества устройств: iPhone, Nexus, Galaxy S5, iPad, Kindle Fire HDX и т.д.

Большинство инструментов позволяют выполнить проверку один раз за запуск. Mobitest же может осуществить до трех проверок за цикл.

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

Think with Google

Test My Site от Think with Google не выдает точное время загрузки, но польза в нем есть.

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

• соответствие размера контента для области просмотра;
• настройка области просмотра;
• размер активных элементов на странице;
• размер шрифта;
• наличие плагинов.

Старайтесь набрать не меньше 100 баллов.

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

Оценка определяется на основании следующих факторов:

• минимизация CSS, JS & HTML;
• время отклика сервера;
• компрессия;
• кэширование в браузере;
• оптимизация изображений;
• наличие JS и CSS, блокирующих отображение верхней половины видимой части сайта;
• приоритизация контента.

GTmetrix

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

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

Вы получаете результаты проверки по тем же показателям и в том же виде, что и для стационарных устройств:

• оценка PageSpeed и YSlow;
• время загрузки;
• размер страницы;
• число HTTP-запросов;
• каскадный график.

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

SynTraffic

SynTraffic осуществляет проверку страницы на мобильных устройствах в следующих регионах:

• Восточное побережье США;
• Западное побережье США;
• Австралия;
• Западная Европа.

Результаты проверки SynTraffic очень похожи на GTmetrix, отличаются формат и дизайн. Это достойная альтернатива GTmetrix. В результатах проверки содержится следующее:

• общее число отправленных запросов;
• балл YSlow;
• балл PageSpeed;
• общее время загрузки страницы сайта;
• % выполненных/неудавшихся запросов;
• число запросов по домену, типу контента, размеру и времени;
• каскадные графики.

Dotcom Monitor

На Dotcom Monitor самый широкий выбор регионов проверки: всего их 24.

Dotcom Monitor осуществляет проверку по целому ряду типов устройств, таких как:

• iPhone
• iPad
• Android
• Nokia Lumia
• Blackberry

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

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

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

Если вы еще не пользуетесь услугами CDN, например, MaxCDN, CloudFlare, Incapsula, то пора задуматься. На их сетевой периферии доступен целый ряд вариантов оптимизации работы сайта.

Ну а на HOSTING.cafe вы найдете хостинг и виртуальные серверы для размещения своих проектов.

Почему скорость загрузки сайта на мобильных устройствах

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

4074
просмотров

Если у вас есть сайт, и вы занимаетесь электронной коммерцией, проще говоря, хотите продавать товары и услуги, то одна из приоритетных задач – это оптимизация сайта под мобильные устройства. Это имеет ключевое значение для роста конверсии и лояльности аудитории, так как мобильные устройства уже смогли захватить по данным на 2016 год 65% всего цифрового времени по всему миру. В России эти цифры также высоки, и они достигают 42% среди населения в возрасте старше 16 лет.

Поразительно, но факт: в США в приложении BaseKit был проведен опрос, который показал, что среди 5 000 представителей малого бизнеса 91% владельцев web-сайтов не оптимизировали свои ресурсы для мобильных устройств. В Рунете ситуация ничем не лучше, и цифры близятся к 95%. К чему может привести такая «халатность»?

Уменьшается скорость загрузки сайта на смартфоне или планшетном ПК. Среднее время составляет 6,9 секунд, а для почти половины пользователей, более 40%, даже 3 секунды и более – это уже много. Они не желают ждать и просто уходят с сайта. Вы теряете потенциальных клиентов, упускаете выгоду!

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

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

• Нужно ли работать над увеличением скорости сайта?

Однозначно!

• Нужно ли создавать мобильную версию?

И снова – да!

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

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

Это 3 кита успеха. Предлагаем разобраться с этими аспектами более детально, чтобы окончательно вас убедить в актуальности всех 3-х аспектов.

ТОП причин оптимизации под мобильные устройства

Знаете, почему многие не желают думать об оптимизации и ускорении сайтов? Есть несколько самых «важных» причин:

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

Интересный факт: согласно исследованиям Walmart, сайт обладает всего 0,25 секундами в своем арсенале, чтобы захватить внимание пользователя, перед тем, как он покинет ресурс, отдав предпочтение конкурентам.

Какой бы ни была причина, она приводит к одному и тому же – потерям! При этом, факты налицо:

• Более 47% обладателей смартфонов используют свое мобильное устройство для того, чтобы быстро узнавать необходимую информацию об интересующих товарах и услугах.
• Более 35% активно используют мобильные телефоны для того, чтобы ознакамливаться с обзорами и отзывами о товарах/услугах на сайтах продавцов.
• По данным на 2013 год, более 80% владельцев смартфонов выразили желание получать информацию, оптимизированную под мобильные устройства, а сегодня их количество стремится к 100%!
• Большая часть пользователей мобильного Интернета не станут продвигать, рекомендовать услуги/товары, если их не устроила мобильная версия, им было неудобно.
• Больше 40% не станут терпеть долгую загрузку и «кривой» дизайн, уйдя к вашим конкурентам.

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

Почему скорость загрузки сайта на мобильной версии в приоритете?

К сожалению, даже наличие мобильной версии – не всегда гарантия быстрой загрузки страниц, которая меньше 3 секунд. Что это значит?

• Всего 1 секунда ускорения страницы на смартфоне или планшете способна дать рост конверсии на 27%!*
• Если скорость загрузки будет выше 4 секунд, то конверсия падает ниже 1%!
• Скорость загрузки в 6 секунд и выше – это нижний предел производительности, и конверсия в таком случае стремится к нулю.

*По данным компании SOASTA, проведшей собственное исследование на примере сайта своего клиента.

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

• Страницы с загрузкой менее 3 секунд (2,4 секунды) – 12,8% отказов
• Страницы с загрузкой 3,3 секунды – 20%

Помните, мы говорим всего об 1 секунде, но какая колоссальная разница!

Важное примечание №1: Сама по себе скорость – очень важна, это один из самых приоритетных факторов, но его недостаточно. Даже, если скорость загрузки будет великолепной, менее 2 секунд, например, конверсия может быть ничтожно малой, а процент отказов – большим. Почему? Будут играть роль другие факторы, скажем, наличие ошибок, незаполненные товарные позиции, плохое дизайнерское оформление, неудобство навигации.

Важное примечание №2: нужно понимать, что цифры, приведенные выше – конкретны для определенного проекта. Чтобы увидеть реальную картину на своем сайте, нужно проводить собственную аналитику, изучив данные пользователей со своего web-сайта.

Поразительно, но скорость загрузки сайта влияет еще и на результаты в поисковой выдаче:

Таким образом, если вы заботитесь о продвижении и желаете видеть ваш сайт на ТОПовых позициях, то не стоит откладывать вопрос о недостаточной скорости в «долгий ящик».

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

• Пользователь заинтересовался созданным вами объявлением – это уже большой успех.
• Он хочет ознакомиться с предложением….
• Но ему приходится ждать. Он чувствует себя обманутым и недовольным. Естественно, он не оценит такую целевую страницу хорошо.

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

Как проверить время загрузки мобильного сайта?

Прямо сейчас вы можете на практике проверить, какова реальная скорость загрузки мобильного сайта по оценке Google. Для этого используется специальная метрика, которая так и называется «Оценка скорости страницы» (сервис «PageSpeed Insights») по шкале 0-100. Соответственно, чем быстрее будет загружаться ресурс, тем более высокий балл он получит. Для примера возьмем статью «Как настроить и оптимизировать мобильную версию сайта»:

Данный флагманский инструмент показывает, каким образом можно улучшить такие показатели, как:

• Время загрузки «шапки» страницы.
• Время загрузки всей страницы.

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

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

• Так как скорость загрузки сайта полезна при проведении рекламных кампаний, нелишним будет разобраться в том, как правильно составлять объявления.
• Любой ресурс – это, прежде всего, контент, и, даже, если он быстро загрузится, нужно еще, чтобы он был интересным, поэтому возьмите на заметку 13 правил его создания.
• Ну, а, когда вы разберетесь со скоростью, советуем вам подумать о монетизации и предлагаем вам 7 простых стратегий.

Несколько советов, как уменьшить время загрузки страницы

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

• Оптимизируйте кэш. В отличие от стационарных браузеров, мобильный кэш не может хранить слишком большое количество контента, поэтому проведите оптимизацию для уменьшения времени загрузки страниц, избегая лишних запросов на сервер, убедившись, что мобильный браузер использует свою локальную память для кэширования.
• Есть еще один замечательный «трюк» — он заключается во встраивании ресурсов в HTML. Правда, здесь стоит проявить некую осторожность, так как в результате может увеличиться размер страницы, что не очень хорошо для оптимизации. Таким образом, вам следует инвестировать в приложение, которое позволяет встраивать ресурсы сайта в HTML, а также делать это лишь только тогда, когда это необходимо.
• Рекомендуется уменьшить парсинг JavaScript. Вы будете удивлены — анализ JavaScript в мобильных браузерах, как правило, добавляет дополнительные секунды к времени загрузки сайта. Отмените разбор ненужных тегов [<script>], чтобы уменьшить время загрузки мобильного сайта.
• Удалите все переадресации. Как правило, перенаправление занимает больше времени для обработки. Позвольте своим пользователям напрямую обращаться к мобильному сайту, но не забудьте указать ссылку на главный.
• Важный шаг — оптимизация CSS и JavaScript. Удалите ненужные символы из исходного кода, но не играйте с функциональностью.
• Используйте HTML5 и CSS3 для мобильной версии. Мобильные сайты с HTML5 и CSS3 загружаются быстрее, так как они легкие. Кроме того, они позволяют просто создавать функциональный и доступный для навигации сайт.Изменение размера изображений, чтобы гарантировать быструю загрузку.
• Заменяйте клики касаниями. Обычно, когда пользователь нажимает на кнопки мобильного сайта, происходит значительная задержка от 1 до 7 секунд.
• Используйте AJAX для повышения скорости сайта. Один из способов – обеспечить получение данных с сервера без обновления каждый раз. Именно здесь AJAX приходит на помощь, гарантируя, что требуемый контент будет обработан, когда посетитель еще будет в процессе просмотра страницы.
• Используйте эффективную CDN.

Подводя итоги

Оберните его!

Итак, если вы тратите большие деньги на создание интересного и вечнозеленого контента, подождите секунду и подумайте – не слишком ли долго загружается ваш сайт? Если это произойдет, ваши пользователи покинут мобильный сайт, как только заглянут «на огонек», и вам как владельцу нельзя это допустить.

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

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

So optimierst du die Geschwindigkeit deiner Website für die mobile Nutzung

1. Ermittle Seiten mit übermäßig hohen Umlaufzeiten (Запросы на поездку туда и обратно, RTR).

Die Minimierung von RTRs beginnt damit, sie sich bewusst zu machen. Viele Seiten werden mehr als 100 RTRs pro Seite aufweisen, aber dein eigentliches Ziel sollten weniger als 50 sein. Häufig stellen Entwickler oder Experten in dersuchmaschinenoptimierung, die alle Anfragen auf einer Seite ansehen, fest, dass einige der angeforderten Elemente fehlen (404), ohne dass es jemandem auffällt. Auch wenn diese Elemente nicht mehr vorhanden sind, dauert es dennoch einen Moment, bis der Browser feststellt, dass die Anfrage nicht umsetzbar ist. Daher sollten derartige Seiten sofort entfernt oder repariert werden.

Du solltest auch Assets reparieren, die verschoben wurden und eine 301-oder 302-Antwort auslösen. Diese Antworten bedeuten, dass der Browser zu einem Ort navigieren musste und dann weitere Anweisungen befolgte, um das Asset anderer Stelle zu erhalten. Und natürlich kostet Jeder Neue Ort Zeit. Es ist, als würdest du einkaufen gehen und im Lebensmittelgeschäft aber erfahren, dass sie den benötigten Artikel nicht führen, du ihn aber in einem anderen Lebensmittelgeschäft in der Nähe erhalten kannst. Noch schlimmer wird es, wenn es eine Kette von Weiterleitungen gibt. Dann wäre es, als würdest du das zweite Lebensmittelgeschäft aufsuchen, nur um zu erfahren, dass dieses den gesuchten Artikel ebenfalls nicht mehr führt, sodass du jetzt ein drittes Geschäft aufsuchen musst.

2. Kombiniere Dateien, wo immer möglich.

Der nächste Schritt hin zu einer optimierten Website besteht darin, Dateien (wie JavaScript und CSS) zu kombinieren. Wenn eine Seite beispielsweise zehn Formatvorlagen (CSS-Dateien) verwendet, die alle in einer kombiniert werden könnten, solltest du dies tun. Ebenso gilt: Wenn du eine Vielzahl von JavaScript-Dateien verwendest, die in einer kombiniert werden könnten, solltest du auch das tun. Versuche, в веб-сайте Kategorien-weit und vorlagenspezifsch zu denken. Für JavaScript, das auf jeder Seite der Website vorkommt, solltest du eine Website-weite JavaScript-Datei erstellen, und eine vorlagenspezifische JavaScript-Datei für jede Seitenvorlage auf der Website. Dasselbe kann du auch mit CSS-Dateien tun. Es ist auch hilfreich, sicherzustellen, dass diese Dateien immer mit dem gleichen Dateinamen und den gleichen Standorten referenziert werden, wenn sie ordnungsgemäß gespeichert sind.

3. Optimiere die Wiedergabereihenfolge.

Nachdem du Dateien gelöscht und zusammengefasst hast, um die Gesamtzahl der RTRs zu reduzieren, kannst du die Reihenfolge anpassen, in der Elemente angefragt werden, um die Geschwindigkeit zu erhöhen. Ebenso wie bei einem Kochrezept, bei dem bestimmte Schritte abgeschlossen werden müssen, bevor weitere Schritte beginnen können, gibt es auch eine bestimmte Reihenfolge, der ein mobiler Browser folgen muss – и die muss man sich bei Erstellen einer Seite halten. Zurück zum Beispiel mit den Lebensmitteln: Wenn dein Rezept eine Zutat erfordert, die für zwei Tage mariniert werden muss, benötigst du als Erstes die Zutaten für die Marinade, damit du mit dem Marinieren beginnen kannst, bevor du den Rest der Zutaten besorgst.

Wenn wir diese Analogie in die Web-Welt übertragen, ist die Marinade das Render-Blocking, da kein anderer Schritt des Kochprozesses beginnen kann, bevor dieser Schritt abgeschlossen ist. Du kannst dich nur insofern auf die nächsten Kochschritte vorbereiten, indem du während des Marinerierns die übrigen Zutaten besorgst. Es ist der kritische Rendering-Pfad, bei dem du die kritischen Elemente wie das Head Tag, den Seiteninhalt und das Grundlayout der Seite Priorisierst und die Elemente, die weniger kritisch sind, verzögerst, insbesondere, wenn diese das Laden wichtigerer Elemente verzögern würden. Dies kann die Ladeerfahrung für Benutzer drastisch verbessern und ihnen Zuversicht vermitteln, dass der Rest der Seite auch schnell geladen wird. Zudem erhalten sie Assets, mit deren Bewertung sie beginnen können, während der Ladevorgang stattfindet.

4. Erstelle eine Seitenladestrategie.

Dasuchmaschinen menschliche Benutzer imitieren, erleben sie Seiten auf ähnliche Weise, wie du selbst. Das Beste, was du tun kannst, um Anfragen auf Geschwindigkeit nachzukommen, besteht darin, zu wissen, was für die Benutzer- und die Bot-Erfahrung in den ersten Sekunden, die sie auf deiner Seite verbringen, von Bedeutung ist. Und das sind in der Regel die Informationen im Head-Tag sowie der Text und die Bilder auf der Seite. Normalerweise dauert es einige Sekunden, bis alle interaktiven Funktionen einer Website voll funktionsfähig sind, weshalb JavaScript meistens nicht zuerst geladen werden muss. Stattdessen können visuelle Darstellungen des JavaScripts wie z. B. Eingabefenster oder Expander als Platzhalter geladen werden, bevor das JavaScript erforderlich ist. Das Laden от JavaScript ist besonders langsam und umständlich. Um sicherzustellen, dass das Laden von JavaScript nicht so lange dauert, dass Benutzer und Bots lange Zeit eine leere Seite anstarren müssen, ist es perfect, einen Aspekt als erstes zu laden, und anschließend das JavaScript im Hintergrund zu laden, während die Benutzer die Seite ансехен.

Необязательный JavaScript, загруженный другими видео и фотографиями на других языках. Видео и фотографии, которые были добавлены на веб-сайте angezeigt werden, все, что нужно сделать, на веб-сайте beinträchtigen, wo Benutzer und Bots normalerweise beginnen. Dieses Konzept, das Laden von Inhalten, die nicht sichtbar sind, aufzuschieben, wird als «bedarfsgetriebenes» Laden, oder Lazy Loading, bezeichnet. Отложенная загрузка может выполняться по разным параметрам (в расширенном разрешении [отложенный], параллельном другим элементам [асинхронно] и согласно метатегу отложенной загрузки от Google).

Лучший инструмент для таких ссылок, которые можно использовать для создания ссылок, например Google PageSpeed ​​Insights. Um Bilder zu optimieren, kannst du auch das Lazy-Load Image Tag verwenden Google, aber bislang funktioniert dieses nur für Chrome Browser auf Mobilgeräten und Desktops (был в Zukunft möglicherweise ausgebaut wird). Для того, чтобы выбрать метод, который понятен: тест URL-протоколов Google Search Console проверен, а также проверен, используется элемент, установленный для ленивой загрузки, в инструментах и ​​им созданных HTML-кодах.

5. Komprimiere so viel wie nur möglich.

Nachdem du die RTR für jede Seitenvorlage minimiert und Priorisiert hast, solltest du möglichst viel komprimieren. Durch Komprimierung kannst du die Seitengeschwindigkeit erhöhen, indem du Bandbreite einsparst. Die gzip-Komprimierung ist eine Methode zur Komprimierung von Dateien und kann auf den meisten Servern eingerichtet werden, aber es sind auch noch andere Optionen verfügbar. Du kannst zudem die meisten Codes einen Minimalisierungsprozess durchlaufen lassen, was wiederum die Größe der endgültigen Übertragungsdatei reduziert. Allerdings ist es schwierig, mithilfe diese Methoden Bilder zu komprimieren. Du kannst die Seite «Performance Review» (Leistungsüberprüfung) на WebPageTest.org nutzen, um eine umfassende Optimierungscheckliste einzusehen, die alle Assets auf der Seite anzeigt, und ob sie mit gzip oder anderweitig komprimiert wurden.

Um Bilder zu komprimieren (statt gzip-Komprimierung oder Minimierung), ist es wichtig, dass der Designer dem Entwickler die Bilder im komprimiertesten Format zur Verfügung stellt und so die Größe der Bilddateien reduziert. Im Grunde geht es darum, die endgültige Datei so klein wie möglich zu machen, ohne dass die Qualität des Bildes beeinträchtigt wird. Общие фотографии в формате JPG-даты, изображения, символы и иллюстрации в формате GIF-даты. Um große Bilder auf Vollbildcomputer hervorragend aussehen zu lassen, ohne kleine mobile Bildschirme ins Stocken zu Bringen, solltest du stattdessen das Protokoll für Responsive Images oder einen Bild-Server wie den von Fastly verwenden, um eine vorskalierte Version des Bildes dynamisch an kleinerezuld .

6. Speichere die richtigen Seiten zum richtigen Zeitpunkt zwischen.

Der nächste Schritt besteht darin, Browsern und Bots dabei zu helfen, zu erkennen, был wiederverwendet werden kann und was jedes Mal neu abgerufen werden muss, und zwar durch Browser-Caching. Кэширование — это функция, созданная в неустановленной сети доставки контента (Content Delivery Network). Die meisten Elemente einer Website – vor allem bei Websites, die höchstens einmal pro Woche geändert werden und keine Echtzeit-Informationen wie Nachrichten, Wetter oder Sportbewertungen übermitteln – können bis zu einem Jahr zwischengespeichert werden. Кэширование bedeutet, dass der Browser beim Besuch einer Seite durch einen Benutzer den örtlichen Speicher durchsucht, um zu erkunden, ob bereits eine Datei vorhanden ist, die für die Erstellung der Seite gebraucht wird. Das reduziert Umlaufzeiten und verbessert die Ladezeit. Такие машины-боты betrachten Seiten immer, als Hätten sie sie sie noch nie zuvor besucht, sodass sie kein aktives verwenden, aber sie können registrieren und gegebenenfalls zur Schätzung der Ladezeit einer Seite verwenden.

Im Hinblick auf Caching ist es wichtig zu verstehen, dass es auf Dateinamen und deren Speicherort на базовом сервере. Wenn du также eine Datei auf vielen Seiten verwendest, wie beispielsweise ein Logo, solltest du sie immer mit dem gleichen Dateinamen und einer URL referenzieren, auch, wenn sie an mehreren Orten auf deinem Server vorhanden ist. Du kannst diese Funktion zu deinem Vorteil nutzen, da es bedeutet, dass du einfach nur den Dateinamen eines Elements und dessen Referenz im HTML-Code aktualisieren musst, um eine neue Version des zwischengespeicherten Elements zu erhalten. Wenn du also beispielsweise dein Logo optimierst, musst du einfach nur den Dateinamen von «Logo» auf «Logov2» ändern. Dadurch wird die neue Version zwischengespeichert und die alte Version Vergessen. Wenn du ein Element также für ein Jahr zwischenspeicherst, bedeutet das nicht, dass du das Element ein Jahr lang nicht ändern wirst, sondern, dass, fall du Änderungen vornimmst, du das aktualisierte oder neue Element mit einem neuen Dateinamen bezeichnen wirst.

Cache-Einstellungen können ein wenig kompliziert sein. Daher solltest du sie dir am besten wie Lebensmittel vorstellen, die verfallen können. Einige Lebensmittel verfallen schneller als andere. Daher musst du den Browser darüber informieren, welche Dinge schneller alt werden und weggeworfen werden müssen und was sich, ohne Ersatz, sicher für eine Weile aufbewahren lässt. Du kannst ein Tool wie WebPageTest.org verwenden, um herauszufinden, welche Möglichkeiten du hast. Wichtig ist vor allem, zu beachten, dass es kein festgelegtes Ablaufdatum gibt und keine maximale Dauer, die ein Element im Cache zwischengespeichert werden kann. Daher geht der Browser standardmäßig davon aus, dass er das Element jedes Mal erneut abrufen muss — das Browser-Caching funktioniert dann, wenn diese Details angegeben wurden.

Da deine Cache-Einstellungen Browsern mitteilen, wann ein Element zu alt ist, um verwendet zu werden, wird diese Zeitspanne manchmal als «Caching-Lebensdauer» или «Haltbarkeitsdauer» bezeichnet. Wenn ein Element seine Haltbarkeits- oder Caching-Lebensdauer überschritten hat, muss der Durchlauf zum Server stattfinden, um eine aktuelle Version zu erhalten. Wenn Elemente als «abgelaufen» aufgeführt sind, bedeutet das, dass sie ihre Haltbarkeitsdauer überschritten haben, was sowohl in Bezug auf Lebensmittel als auch in der Browseranalogie bedeutet, dass sie ersetzt werden müssen, wenn sie das nächste Mal benötigt.

Ebenso, wie es wenig Sinn macht, eine Speisekammer voller abgelaufener Lebensmitteln zu haben, macht es auch keinen Sinn, einen Zwischenspeicher voller abgelaufener Webinhalte zu haben. Umgekehrt ist es ebenso wenig sinnvoll, Lebensmittel (Dateien) zu entsorgen, die noch gut verwendbar sind. Wenn du deinen Dateien Caching-Lebensdauern zuweist, ist es nützlich, diesen Aspekt im Hinterkopf zu behalten, und auch die Konsequenzen einer zu langen Caching-Lebensdauer zu berücksichtigen. Wenn du geringfügige Änderungen an deinem Logo vornimmst, wird es nicht das Ende der Welt bedeuten, wenn das alte Logo noch angezeigt wird. Deshalb kannst du dieses Caching Lange verlängern, vor allem wenn du plant, Dateinamen bei Änderungen sorgfältig zu aktualisieren. Wenn du unterschiedliche Dateinamen verwendest, musst du dir keine Sorgen machen, dass du das alte Logo anzeigen wirst.

7. Ускоренные мобильные страницы Erstelle (AMP).

All das kann kompliziert erscheinen und darum hat Google eine einfachere Lösung zur Optimierung der Seitengeschwindigkeit konzipiert. Ускоренные мобильные страницы или AMP являются единой группой HTML, для того, чтобы сделать их более сильными, а не желтыми, и были активированы, если они есть. Das Ziel ist, die Ladezeit der meisten Seiten auf Mobilgeräten auf eine Sekunde zu reduzieren. Das wird meistens auch erreicht. AMP ermöglichen es Google, den Großteil der Schwierigkeiten durch Caching und die Konfigurierung des Ladeprozesses zu meistern und die Mehrheit der oben beschriebenen Elemente zu kontrollieren. Dies sorgt für eine größtmögliche Optimierung.

In einigen Fällen erstellen Unternehmen neue AMP-Seiten und verlinken sie, ausgehend vom Head-Tag, mit bestehenden Seiten auf der Website. Таким образом, Google, dass die AMP-Seite angezeigt werden soll, wenn die Person, die Die Seite anfordert, ein Mobilgerät oder eine langsame Verbindung verwendet. In anderen Fällen kannst du die bestehenden Seiten (oder ihre bestehenden, mobilen Seiten, wenn отдельные веб-сайты vorhanden sind) Durch AMP-Seiten ersetzen. Dies wird как „kanonische AMP“ bezeichnet. Google использует эти методы, используя Google AMP-Seiten, чтобы решить проблемы сканирования, рендеринга, индексирования и ранжирования каналов. Unternehmen mögen die Methode jedoch nicht unbedingt, da die Einschränkungen und Anforderungen von AMP-Seiten sie sehr nüchtern erscheinen lassen. AMP kann außerdem einige der Tracking- und Testmöglichkeiten einschränken oder verkomplizieren, die dir für Desktop-Seiten zur Verfügung stehen; das ist es ein weiterer Grund, warum einige diese Methode vermeiden.

Веб-сайты, AMP-gültig sind, befolgen alle AMP-Regeln und -Richtlinien, und Google zeigt bei mobilensuchergebnissen einen kleinen, grauen Blitz neben ihnen an. Google fügt sie eher in spezielle Ergebniskarusells ein, die meistens oben auf der Seite angezeigt werden. Das ist фон großem Vorteil. Wenn aber die AMP-Gültigkeit zu viele Probleme für deine Website verursacht, ist es in Ordnung, AMP-Code zu verwenden, ohne AMP-gültig zu sein. Du solltest AMP-HTML verwenden, ohne dir darüber Sorgen zu machen, ob du alle Regeln befolgst. Du the first trotzdem von der Geschwindigkeit von der Geschwindigkeit von AMP-HTML und AMP-JavaScript Profiieren — kein schlechter Deal, wenn man bedenkt, dass es kostenlos ist. Denke daran, dass Geschwindigkeit einen direkten Einfluss auf das Engagement und die Conversion hat, aber wahrscheinlich auch im Hinblick auf Crawl-Tiefe und andere Aspekte der Crawl-Effizienz hilfreich ist.

Мобильный браузер функционален также как Desktop-Browser. Zudem haben sie langsamere Prozessoren und weniger zuverlässige Verbindungen. Aufgrund dieser Faktoren ist es wichtig, die Ladezeit der Seiten deiner Website unter den schlechtesten Bedingungen zu prüfen. So findest du heraus, wo echte Verbesserungsmöglichkeiten vorhanden sind.

Насколько быстр мой мобильный сайт? 3 инструмента для точного измерения скорости на мобильных устройствах

Знаете ли вы, как быстро загружается ваш веб-сайт для посетителей с мобильных устройств и как проверить скорость на мобильных устройствах?

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

Однако, если вы хотите точно измерить скорость мобильного сайта, вы не можете просто подключить свой сайт к Pingdom и покончить с этим.

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

Почему для тестирования скорости мобильного веб-сайта требуется особый подход

Большинство популярных инструментов для тестирования скорости веб-сайта проверяют ваш сайт в идеальных условиях рабочего стола ( по крайней мере по умолчанию ). То есть они…

• Загрузить десктопную версию
• Имитировать быстрое проводное подключение к Интернету — это означает, что «тяжелые» страницы все равно будут загружаться довольно быстро, потому что само подключение к Интернету быстрое.
• Используйте мощный тестовый компьютер с большой вычислительной мощностью — это означает, что тестовый компьютер сможет быстро обрабатывать JavaScript и другие ресурсоемкие задачи.

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

• Просматривают мобильную версию вашего сайта
• Использование более медленного соединения 3G или 4G — теперь большое количество «тяжелых» изображений может быть гораздо более серьезной проблемой, поскольку само соединение работает медленнее.
• Просмотр на маломощном устройстве, таком как смартфон Motorola Moto G . Теперь устройство может работать с ошибками и обрабатывать JavaScript на вашем сайте дольше. Таким образом, JavaScript, блокирующий рендеринг, становится гораздо более серьезной проблемой.

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

Таким образом, вы можете иметь хорошее представление о том, как быстро будет загружаться ваш сайт, когда Джо Шмо просматривает ваш сайт в 3G, ожидая своей очереди в Starbucks, а не только когда он сидит за своим ноутбуком.

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

3 Полезные инструменты для измерения скорости мобильного веб-сайта

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

1. Google (два разных инструмента)

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

Во-первых, есть сравнительно простой инструмент для тестирования скорости мобильных устройств Think With Google, который полезен для анализа средней скорости всего вашего сайта (, то есть , а не конкретных URL-адресов ).

Все, что вам нужно сделать, это ввести URL-адрес вашего сайта, и Google выдаст среднюю скорость вашего мобильного сайта в сетях 4G в США:

Используя раскрывающиеся списки, вы также можете выбрать разные страны и типы сетей. Например, вот данные о том, как быстро загружается WordPress.org для пользователей 3G во Вьетнаме:

Важно отметить, как рассчитываются эти данные…

Google не «моделирует» мобильных пользователей. Вместо этого эти данные взяты из реального отчета об опыте использования Chrome. По сути, это означает, что число «скорости сайта», которое вы видите, — это «скорость всех страниц, составляющих ваш сайт, на основе реальных данных, собранных с помощью отчета об опыте использования Chrome (CrUX)» (Источник).

Важный вывод : Этот инструмент дает вам среднюю мобильную скорость всех страниц, составляющих ваш сайт, на основе реальных данных из CrUX.

Если вы хотите проверить мобильную скорость определенного URL-адреса , вам поможет инструмент Google PageSpeed ​​Insights.

В прошлом инструмент PageSpeed ​​Insights не давал вам точных цифр. Однако все изменилось, и теперь PageSpeed ​​Insights предоставляет вам реальные тестовые данные из Lighthouse.

Эти данные можно найти в области Lab Data на вкладке Mobile отчета PageSpeed ​​Insights:

Эти данные используют эмулированное подключение к мобильной сети и маломощное устройство ( как Moto G4 ). Чтобы узнать больше об этих данных, ознакомьтесь с нашим руководством по аудиту Lighthouse.

Важный вывод : Lighthouse предоставляет лабораторные данные для определенного URL-адреса на основе маломощного устройства и эмулируемого мобильного соединения.

2. WebPageTest

WebPageTest — это популярный инструмент для тестирования скорости загрузки страниц, который дает вам широкие возможности управления условиями для ваших тестов.

С помощью опции инструмента Advanced Testing можно выбрать:

• Различные устройства Android и iOS
• Множество различных эмуляций скорости соединения, включая 3G, 4G, LTE, Edge и т. д. подключение:

  3. GTmetrix

  По умолчанию общедоступный инструмент GTmetrix проверяет только скорость вашего рабочего стола. Однако, если вы зарегистрируете бесплатную учетную запись GTmetrix, вы получите возможность проверить свои скорости с помощью реального устройства Android (в частности, , Galaxy Nexus 9).0071 ):

  Насколько медленно работает на мобильных устройствах?

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

  Давайте посмотрим на некоторые данные…

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

  Google также поделился некоторыми данными, связывающими показатель отказов со временем загрузки мобильной страницы. Ниже вы можете увидеть большой скачок в увеличении вероятности отказов между 3 и 5 секундами, что соответствует 3-секундному числу Akamai:

  . это не обязательно время полной загрузки — просто посетители могут начать взаимодействовать с контентом ).

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

  Несколько быстрых советов по ускорению вашего мобильного сайта насколько быстро работает мой мобильный сайт?» и ответ был «недостаточно быстро», вы, вероятно, захотите что-то с этим сделать!

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

  • Сжатие изображений . Сжатие изображений — отличный способ уменьшить вес страницы. Плагин Imagify может помочь вам сжимать и изменять размер изображений WordPress на автопилоте.
  • Оптимизация JavaScrip t — JavaScript вдвойне важен для мобильных устройств, поэтому Google PageSpeed ​​Insights обычно кричит вам: «Удалите JavaScript, блокирующий рендеринг, в содержимом верхней части страницы». WP Rocket может легко помочь вам отложить JavaScript, чтобы решить эту проблему.
  • Обратите внимание на AMP . Ускоренные мобильные страницы (AMP) — это один из способов значительно сократить время загрузки мобильных страниц. Узнайте, как настроить AMP на WordPress, а также некоторые из лучших плагинов WordPress AMP.

  В целом, WP Rocket — это самый простой способ улучшить производительность мобильных устройств за несколько кликов. Получите WP Rocket прямо сейчас и протестируйте улучшение прямо сейчас!

  Подведение итогов

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

  This entry was posted in Популярное