Понятный, хорошо оптимизированный код важен не только для пользователей, но и для Google , т.к. является одним из факторов ранжирования.
Быстрая загрузка страниц – вот, что хотят видеть пользователи, поэтому Google так заботится об этом аспекте. Если ваш сайт быстр, легок и «отзывчив», то будьте уверены, что вы будете пользоваться успехом не только среди пользователей, но и поисковых систем.
Существует множество способов, как ускорить загрузку сайта, и большинство из них могут быть налажены с помощью модулей и плагинов. Вы с легкостью сможете проверить и оценить результаты их работы.
1. Время загрузки
Скорость загрузки сайта стала важным фактором ранжирования для Google с сентября 2010 года.
Существует множество инструментов, с помощью которых можно измерить скорость загрузки страниц на сайте, как например, Web Page Test или PageSpeed tool от Google, которым можно воспользоваться онлайн или установить в качестве дополнений в браузерах Chrome или Firefox.
Конечно, увеличение скорости может быть достаточно сложным процессом в зависимости от ваших технических знаний и настроек вашего сайта. Однако существуют некоторые, доступные большинству веб-мастеров, способы, с помощью которых можно достичь быстрых результатов.
Например, если вы пользуетесь веб-сервером «Apache», то можете подать заявку своему хостеру на включение модуля «modpagespeed» от Google, который «ускоряет ваш сайт и уменьшает время загрузки страницы». Также он автоматически применяет к страницам и тому, что к ним относится (CSS, JavaScript, изображения) все необходимые действия, направленные на ускорение работы, не требуя при этом изменения существующего контента или потока работы (workflow).
Вы можете сократить время ожидания и задержку, не применяя перенаправление и используя протокол доставки контента (Content Delivery Network/CDN). Существует множество CDN-поставщиков, таких, как например: Max CDN, Akamai и Amazon CloudFront. У Cloudflare также предусмотрена бесплатная опция.
Применение HTML-минимизации (удаление ненужных пробелов и форматирования) и CSS-файлов также является привычной практикой для ускорения загрузки. Поэтому если у вас сайт на WordPress, то вы без труда найдете такие плагины, как «W3 Total Cache», который будет управлять всем процессом.
Также хорошими способами, влияющими на высокую скорость загрузки, являются: оптимизация изображений (см. ниже); добавление системы, которая будет кэшировать вашу платформу (плагины, дополнения, приложения) и использование сжатия данных на серверной стороне (если у сервер поддерживает такую функцию).
Если ваш сайт находится на коммерческой платформе, вы можете потребовать от своего поставщика оптимизацию запросов к базам данных платформы, т.к. они имеют огромное значение в вопросе скорости загрузки сайта.
2. Сжатие изображений
Как уже упоминалось выше, вы можете существенно ускорить работу сайта, оптимизируя изображения на нем.
Не стоит говорить, что максимально сжатый размер изображений влияет на скорость загрузки страницы, однако сжимая страницы, помните, что они не должны сильно терять в качестве, иначе это может негативно отобразиться на общем виде сайта. Поэтому попробуйте максимально сочетать соотношение размера и качества.
Необходимо учитывать, сколько изображений вы загружаете на свой сайт, их размер (как полного файла, так и его миниатюры). Используйте на своем сайте только изображения хорошего качества, которые можно будет в последующем масштабировать; прописывайте для них только основные метаданные.
3. Адаптивный веб-дизайн
Адаптивный веб-дизайн позволяет контенту автоматически подстраиваться под размер экрана различных устройств, через которые осуществляется просмотр данного контента.
Именно благодаря структуре такого дизайна пользователи различных устройств, начиная от iPhones и завершая огромными десктопными мониторами, могут просматривать контент в удобном и читаемом формате для этих устройств. Например, на огромных экранах пользователям будет показываться дополнительная информация (больше продуктов на одной странице), а вот для владельцев маленьких экранов будет отображаться укороченная версия, содержащая лишь основную информацию.
Такой адаптивный веб-дизайн сводит на нет необходимость в специальной мобильной версии, т.к. использует «медиазапросы» для определения стиля, в зависимости от размера экрана под различные устройства.
Чтобы вам было легче работать с адаптивным дизайном, используйте сначала мобильную версию и лишь затем переходите к разработке дизайна под другие устройства.
Создавайте адаптивный веб-дизайн, вместо того чтобы создавать вторую мобильную версию сайта, – вот, что советует Google.
4. HTML5
HTML («язык разметки гипертекста») – это основной язык разметки, используемый при создании веб-страниц. А HTML5 – это просто пятая (и пока последняя) версия стандартного языка HTML. Как в разметку структурированных данных (Schema.org), так и в HTML5, были введены многие элементы, предназначенные для обогащения смыслового содержания документов. Использование HTML5 также очень хорошо подходит для мобильных устройств.
В плане SEO перспектив HTML5 предлагает хорошие альтернативы для размещения Flash-контента с указанием свойств для видео, анимации и интерактивного контента. Важно отметить, что HTML5 предлагает полную поддержку CSS3.
Примечание: Хотя все основные браузеры поддерживают свойства HTML5, ни один из них еще полностью не поддерживает этот язык, т.к. он пока не является общепринятым стандартом веб-языка. Поэтому при использовании элементов в HTML5 очень важно тестировать сайт на кросс-браузерность.
5. CSS3
CSS – определяет внешний вид сайта. Благодаря множеству опций CSS3 у веб-разработчиков появился целый арсенал новых инструментов.
С помощью CSS3 появилась возможность делать столь необходимые, но простые вещи, как закругленные углы, градиенты, тени без использования сложных хаков, а также сотни различных изображений.
Помимо простых вещей, CSS3 также содержит в себе передовые методы дизайна, такие, как многоколоночность и макеты flexbox, а также многочисленные свойства анимации (переходы, преобразования).
Все эти новые функции созданы для того, чтобы обеспечить гораздо более продвинутый стиль, чем это было ранее, и при этом они превышают по производительности старые методы.
Оригинал статьи можно прочитать тут.
Все статьи цикла про идеальную веб-страницу:
Работа с кодом
