Как сделать оптимизацию под телефон html

Обновлено: 06.07.2024

CSS-стили под разное разрешение экрана и устройство

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

Перед тем, как приступить к написанию стилей, убедитесь, что между тегами , вашего шаблона, прописана meta-строчка:

Итак, в зависимости от размера экрана, мы можем прописать отдельные стили в файле сss: основной стиль для компьютера, потом для размера ниже 992px и 768px (для планшетов), и для 480px и 320px (для телефонов).

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

То есть, для телефона не обязательно показывать сайдбар — его можно убрать вниз, а контент по ширине вытянуть на 100%. Для планшета сделать сайдбар тоже снизу, но по-красивее. Можно еще чего-нибудь намудрить в стилях и показывать тот или иной вид шаблона в зависимости от устройства с которого заходит пользователь.

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

Пример в Яндекс Браузере (при нажатии на F12):

Для чего нужна адаптация? Дело в том, что если пользователю неудобно находиться на сайте с мобильного устройства, то он быстро закроет страничку и уйдет. Соответственно, уменьшается время нахождения, просмотры, или проще говоря — ухудшаются поведенческие факторы. А также и CTR рекламных объявлений, если они тоже как-то криво показываются на планшетах и телефонах.

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

P.S. На этом блоге я только начал пробовать адаптировать. Может что и получится

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

Три способа адаптации сайта

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

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

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

Google не отдает предпочтения каким-либо форматам URL, если страницы и все ресурсы на них доступны всем агентам пользователя Googlebot.

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

Обязательные действия

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

Сообщите Google, что страница рассчитана на мобильные устройства (или имеет аналог, предназначенный для них). Тогда Google сможет безошибочно направлять пользователей, выполняющих поиск с мобильных устройств, на ваши страницы.
Ресурсы должны быть доступны для сканирования. Не блокируйте поисковым системам доступ к ключевым файлам сайта (включая объявления), от которых зависит отображение страниц, в файле robots.txt. Если робот Googlebot не имеет доступа к коду CSS, JavaScript или изображениям страницы, мы не сможем определить, как она будет отображаться в мобильном браузере. То есть Google может не распознать, что страница адаптирована для мобильных устройств, и показать ее пользователям таких устройств неправильно.
Избегайте типичных ошибок, которые мешают мобильным пользователям. Например, не используйте неподдерживаемые форматы видео (Flash и другие) для основного контента на странице. Мобильные страницы, неудобные для выполняющих поиск пользователей, могут получить более низкий рейтинг или появиться в результатах мобильного поиска с предупреждением. Подробную информацию об этом вы найдете в разделе "Типичные ошибки".

Особенности разных устройств

Мобильные устройства. В этом документе под мобильными устройствами понимаются смартфоны iPhone, а также работающие на операционных системах Android и Windows. Мобильные браузеры, как и компьютерные браузеры, поддерживают большое количество функций HTML5, но их окна меньше и обычно по умолчанию используется вертикальная ориентация.

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

Мультимедийные телефоны. Браузеры этих устройств могут отображать страницы, соответствующие стандартам XHTML, поддерживают разметку HTML5, JavaScript и ECMAscript, но могут не поддерживать некоторые API расширений в стандарте HTML5. Сюда относятся телефоны, способные принимать сигналы сетей 3G и не являющиеся смартфонами.

Мобильные телефоны среднего класса. Их браузеры не могут показывать обычные веб-страницы со стандартным HTML-кодом. В частности, это браузеры, которые поддерживают только cHTML (iMode), WML, XHTML-MP и т. д.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Дисклаймер: материал был написан до того, как адаптивная верстка стала трендом.

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

Итак, для верстки нам потребуются следующие элементы:

Общее понимание разрешений мобильных устройств.
Задание размера viewport.
СSSи MediaQuery.

Общее понимание разрешений мобильных устройств

Да, это именно так. Яндекс выдает нам множество вариантов. Становится ясно, что разрешений очень много. Верстать под все разрешения нет возможности.

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

devicePixelRatio
screen.width
screen.height

Эти три параметра могут дать нам море информации. Пишем простую функцию:

Задание размера viewport

О viewport можно найти в поиске много мусора. Почти везде идет ширпотреб без объяснения логики. На самом деле тут всё очень просто:

Размер вьюпорта можно менять, используя следующую конструкцию в head:

Для верстки используем только два параметра width и user-scalable. Первым задаем размер видимой части, второй разрешает ее увеличивать (применять zoom двумя пальцами).

Обозначив width=device-width, мы сообщаем браузеру, что нам нужна область просмотра контента, равная ширине экрана мобильного устройства.

Можно вручную задать значение для width. Например content="width=600", но этого не рекомендуем, потому-что различные носимые устройства могут иметь абсолютно различную ширину экрана.

СSS и MediaQuery в мобильной верстке

MediaQuery разжевано на множестве сайтов, уделять внимание описанию не будем. Лишь опишем ряд проблем в виде маленького ЧАВО.

Какой диапазон выбрать для MediaQuery при адаптивной верстке?

В работе мы использует три брекпоинта для носимых устройств: 1024px, 800px, 420px. Это рекомендация, вы можете спокойно добавить свои.

Мелкий текст в адаптивной/мобильной верстке сайта.

Решение: стоит увеличить размер шрифта в соответствии с devicePixelRatio или просто в 1,5 раза. Например, так:

Изменяется размер шрифта при смене ориентации/вращении мобильного устройства.

Гироскопом уже никого не удивишь, его ставят китайцы даже в самые дешевые смартфоны. Удивить можно верстальщика. Решение:

Сбрасываем форматирование для элементов форм

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

Safari в IOs увеличивает шрифты в верстке

Mobile Safari в Ios (а также Chrome для Android, Mobile Firefox и IE Mobile) автоматически увеличивают размер шрифта внутри широких блоков. Это можно пофиксить двумя строчками CSS:

Знаете ли вы, что Google ввел новую политику под названием Mobile-First? Все больше и больше пользователей сети отходят от настольных компьютеров, а вместо этого просматривают и совершают покупки с помощью своих мобильных устройств.

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

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

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

1. Проектирование с мобильным дизайном

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

Помимо здравого смысла дизайна, какие еще элементы дизайна вы должны внедрить в свои мобильные дизайны?

Приоритезация. Мобильные экраны ограничены доступным пространством дисплея. Кроме того, мобильные экраны представляют контент вертикально, в отличие от гораздо более широкой - горизонтальной - структуры для настольных компьютеров. Какие элементы имеют первостепенное значение для пользователей? Если есть кнопки CTA (Основная кнопка содействия пользователя с услугой сайта), насколько легко их увидеть мобильному пользователю?
Содержание в первую очередь. С мобильным дизайном можно делать некоторые интересные вещи, но, конечно, не в рамках дизайна рабочего стола. Итак, сначала уступите место содержанию. Сделайте все тексты и другие части контента легко читаемыми и доступными. Мобильный экран гораздо менее снисходительно отвлекает визуальные элементы.
Простая навигация. На мобильном устройстве вы не можете просто кликать никуда и вернуться на домашнюю страницу. Если, конечно, вы не планируете этот тип навигации заранее. Поэкспериментируйте с виджетами Scroll-to-Top, а также с бесшовными липкими заголовками, когда это возможно.

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

2. Оптимизация ресурсов; изображения, значки и т. д.

Как часто вы пользуетесь визуальными средствами для личных предпочтений, а не для UX? Это случается, и если вы собираетесь проявить творческий подход, стоит понять, как работает оптимизация медиа.

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

Средний размер веб-страницы в 2018 году. Перечислены по отраслям и странам.

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

Итак, как вы можете обрезать лишние КБ или даже МБ вашего визуального контента?

Изменить размер ваших изображений. Звучит просто, правда? Изменение размера может сократить до 80% от общего размера изображения. Для мобильных устройств, тем не менее, нет причин превышать диапазон 600-700 пикселей.
Уменьшите размер файла с помощью сжатия. Сжатие / оптимизация изображения - это процесс использования стороннего программного обеспечения для уменьшения количества цветов, присутствующих в изображении. Это может быть сделано до такой степени, что ваши фотографии не теряют своего врожденного качества, но их размер файла может быть значительно уменьшен.
Исследуйте альтернативные форматы файлов. Все слышали о форматах файлов PNG и JPEG. В конце концов, они являются стандартами де-факто изображений в Интернете. Только не долго. Новейшая и лучшая технология доставки цифровых изображений вращается вокруг форматов файлов WebP и SVG. Например, SVG может автоматически масштабироваться до размера экрана, уменьшая количество ресурсов, необходимых для загрузки определенных визуальных компонентов.

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

3. Предварительная загрузка и отложенная загрузка

Нужно ли загружать все медиаресурсы на страницы, на чтение которых уходит значительное количество времени? И может ли это помочь визуализировать внешние страницы перед посещением их пользователями?

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

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

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

Prefetch. Этот тип предполагает, что конкретный URL, скорее всего, будет следующим выбором для навигации. И, если браузер удовлетворяет запрос, он автоматически кеширует важные ресурсы страницы, что, в свою очередь, значительно ускоряет загрузку следующей страницы.
PreRender. Принимая во внимание, что вышеупомянутый тип только выбирает определенные ресурсы, prerender будет кэшировать всю страницу. Весь отображаемый контент хранится в пользовательской памяти устройства. DNS-Prefetch.
DNS prefetch. когда браузер запрашивает ресурс с (стороннего) сервера, доменное имя этого перекрестного источника должно быть преобразовано в IP-адрес, прежде чем браузер сможет выполнить запрос. dns-prefetch помогает разработчикам маскировать задержку разрешения DNS
Preconnect. То же, что и выше, но также устанавливает соединения и рукопожатия с соединениями TCP и TLS.

Поскольку предварительные загрузчики используют динамические теги HTML, вы можете предварительно загружать контент, такой как Google Fonts, или создавать собственный сценарий для предварительной загрузки ресурсов JavaScript в WordPress.

Кстати, если вы используете WordPress, то плагин WP Rocket может помочь вам ускорить загрузку вашего сайта.

Теперь, когда вы знаете больше о предварительных загрузчиках, давайте поговорим о другой горячей теме: lazy-loading.

Что такое Lazy Loading?

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

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

И если вы беспокоитесь о потенциальных проблемах SEO, не беспокойтесь. Yoast подтвердил, что Google выполняет рендеринг страниц, использующих lazy-loading, и считает это просто еще одним сигналом повышения производительности.

Я рекомендую использовать библиотеку Layzr.js - простая и эффективная отложенная загрузка ваших изображений! Сценарий также активирован на домашней странице проекта, поэтому вы можете увидеть, как он работает в режиме реального времени. Пользователи WordPress могут найти десятки плагинов с отложенной загрузкой в общедоступном репозитории плагинов.

4. Веб-кеширование

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

Некоторые из самых популярных технологий в веб-кешировании - Varnish, Squid и Memcached. Но будьте уверены, что на рынке есть множество других решений, особенно если вы являетесь пользователем WordPress.

Вы также можете рассмотреть возможность подписки на CDN.

Что такое CDN (сеть доставки контента)?

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

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

Если у вас нет предыдущего опыта работы с CDN, мы рекомендуем попробовать Cloudflare - они предоставляют бесплатный план, и это отличная платформа для начала обучения.

5. AMP (ускоренные мобильные страницы)

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

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

Заключение

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

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

Читайте также: