1. 1. Измерьте и минимизируйте время отклика сервера
2. 2. Избегайте или минимизируйте перенаправления, чтобы ускорить скорость мобильной страницы
3. 3. Тщательно измеряйте время прохождения туда-обратно
4. 4. Загружайте содержимое выше сгиба до содержимого ниже сгиба
5. 5. Поместите JS внизу и CSS вверху HTML-файлов.
6. 6. Оптимизируйте и минимизируйте файлы CSS и JS
7. 7. Используйте сжатие GZIP, чтобы уменьшить размер файла

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

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

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

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

1. Измерьте и минимизируйте время отклика сервера

Скорость мобильной страницы определяется вашим веб-кодированием, но также зависит от большого, толстого технического инструмента, известного как ваш сервер. Очевидно, что чем дольше ваш сервер ожидает ответа на запрос от браузера, тем медленнее время загрузки вашей страницы. Mobile1st вместе со специалистами в Google а также GTMetrix Рекомендуем, чтобы ваш сервер начал передавать первый байт ресурсов в течение 200 миллисекунд после запроса .

Также называется «время ожидания» или «время до первого байта», время, которое проходит до ответа от сервера, является первым элементом в диаграмме водопада.

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

Существует три основных метода увеличения времени отклика вашего сервера:

• Улучшение программного обеспечения или конфигурации вашего веб-сервера
• Повысить качество и объем услуг веб-хостинга, и, в частности, обеспечить достаточные ресурсы процессора и памяти
• Сократите ресурсы, необходимые для ваших веб-страниц

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

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

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

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

3. Тщательно измеряйте время прохождения туда-обратно

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

RTT можно измерить, пингуя адрес. Точный интервал RTT зависит от множества факторов, таких как источник соединения, среда соединения, физическое расстояние между фактическим источником и удаленной системой, количество узлов между ними, объем трафика, количество других запросов, обрабатываемых сервером, и так далее.
Каждый RTT добавляет квант времени к вашему общему времени загрузки мобильного телефона. Следовательно, рекомендуется уменьшать количество последовательных обращений туда и обратно, обеспечивая параллельную передачу ресурсов и устраняя лишний вес. Помимо избежания вышеупомянутых перенаправлений, GlobalDots предлагает объединение сценариев во избежание повторяющихся RTT, отнимающих много времени, в частности путем объединения как можно меньшего числа файлов:

• Внешние скрипты Java
• Внешний CSS
• Изображения с использованием CSS-спрайтов

4. Загружайте содержимое выше сгиба до содержимого ниже сгиба

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

5. Поместите JS внизу и CSS вверху HTML-файлов.

JavaScript обеспечивает интерактивность ваших онлайн-страниц (таких как кнопки и их ответы или данные, вводимые в формы, динамическое оформление и анимация). Сценарии JS, однако, предотвращают параллельные загрузки. Когда код JS загружается, браузер не начнет другие загрузки. Чтобы ускорить загрузку страницы, переместите JS-скрипты вниз страницы, если это возможно. Это позволит отображать содержимое HTML до загрузки JavaScript, что позволяет отображать спиннер при загрузке страницы или другое сообщение для мобильного посетителя.

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

6. Оптимизируйте и минимизируйте файлы CSS и JS

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

«Минификация» устраняет избыточные или просто не относящиеся к делу данные, не влияя на то, как отображается страница. Разнообразие инструментов, как Google указывает, может помочь отфильтровать ваш код и устранить такие избыточности.

Наиболее выдающимися являются:

7. Используйте сжатие GZIP, чтобы уменьшить размер файла

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

На момент написания статьи GZIP является методом сжатия выбора среди веб-разработчиков. Gzipping уменьшит вес страницы и увеличит скорость мобильной страницы , Gzipping обычно уменьшает вес страницы на 70% и в настоящее время поддерживается подавляющим большинством браузеров.

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

Mobile1st предлагает услуги мобильной оптимизации для увеличения дохода / конверсии вашего мобильного веб-сайта за счет снижения показателя отказа от корзины покупок, снижения скорости загрузки страниц, улучшения мобильного UX и SEO, анализа вашей мобильной аналитики и многого другого. Наша команда мобильных экспертов анализирует и улучшает ваш веб-сайт с учетом более чем 35 факторов, A / B-тестирует идеи и может даже (опционально) вносить изменения в дизайн / код.
Свяжитесь с экспертами Mobile1st сейчас!