Как ускорить сайт с помощью gzip, brotli, кэша, минификации и других способов

В статье:

  1. Зачем уменьшать размер HTML-страницы

  2. Как уменьшить размер HTML

  3. Использовать сжатие gzip или brotli

  4. Использовать минификацию HTML, CSS и JS

  5. Использовать кэш браузера для ускорения

  6. Сжать фотографии, иллюстрации и другую графику

Зачем уменьшать размер HTML-страницы

С каждым годом вес HTML-страниц в среднем увеличивается. По
данным MachMetrics, средний размер веб-страницы в 2018 году — 2МБ, это в три раза больше, чем три года назад. Это происходит, потому что на сайты добавляют более качественные и тяжелые изображения и видео, CSS или JS-файлы.

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

Пользователи не будут ждать долгой загрузки, максимум, который они ждут — 2-3 секунды на десктопе или 3-4 на мобильном устройстве. Если сайт так и не загрузился, пользователь закроет страницу — для поисковиков это будет значить, что сайт не удовлетворяет задачи пользователей. Поисковики стимулируют веб-мастеров ускорять и облегчать сайты. Обновление
Google Speed Update занижает позиции очень медленных сайтов, к тому же Google переводит сайты в Mobile-first index — это значит, что mobile-friendly сайты получат преимущество, десктопная выдача будет строиться на основе мобильной, где особенно важен вес страницы.

Иногда незначительные задержки скорости не критичны, если посетители целенаправленно хотят получить услуги, товары или информацию с конкретного сайта. К примеру, по данным инструмента
Google PageSpeed Insights, у сайта amazon.com довольно низкая скорость загрузки с мобильных устройств, но Amazon востребован: пользователи готовы ждать, чтобы делать выгодные заказы.

Анализ скорости загрузки сайтаАнализ amazon.com

Скорее всего Amazon рассчитывает на то, что пользователи со смартфонов будут скачивать мобильное приложение, поэтому не работает над скоростью мобильной версии сайта.

Измерить скорость загрузки своего сайта и сравнить с конкурентными можно с помощью инструментов
Google PageSpeed Insights или Проверка скорости сайта от PR-CY.

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

Если хотите ускорить загрузку страницы, то рекомендуем уменьшить ее размер.

Как уменьшить размер HTML

Для уменьшения размера HTML-страницы нужно сжать код и облегчить элементы:

  1. Избавиться от переадресации с целевой страницы. Google пишет о том, что перенаправления типа example.com → www.example.com → m.example.com или example.com → m.example.com/home для мобильных пользователей замедляют загрузку страницы.
  2. Оформить HTML-элементы с помощью CSS, это ускорит загрузку и упростит работу с повторяющимися на страницах элементами.
  3. Сжать все текстовые файлы HTML, XML, CSS, Javascript, сжать HTML-код страниц.
  4. Использовать минификацию — удалить ненужные данные, которые увеличивают объем кода.
  5. Сжать все графические файлы, оптимизировать изображения — фотографии и графику.
  6. Использовать кэш браузера — кэшировать данные в браузере пользователя.
  7. Оптимизировать нефункциональные анимационные детали, отказаться от flash — такие элементы вредят безопасности сайта и могут не поддерживаться у пользователей.
  8. Оптимизировать количество рекламных блоков на странице.

Использовать сжатие gzip или brotli

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

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

Сжатие данных алгоритмами состоит из этапов:

  1. Клиент совершает запрос и оповещает сервер, какие данные может принять.
  2. Сервер обрабатывает запрос и определяет, какую версию отправить.
  3. Сервер отправляет файл клиенту.
  4. Клиент распаковывает и считывает информацию.

На втором этапе браузер сообщает серверу, какие методы сжатия поддерживает — посылает заголовки Accept-Encoding с кодом, где указаны алгоритмы сжатия, например, «accept-encoding: gzip, deflate, br». Сервер выбирает форматы из доступных: если клиент поддерживает brotli, то сервер ищет суффикс «.br» в заголовке и отправляет клиенту нужный файл. Если его нет, будет использовать другой алгоритм. Если клиент не поддерживает сжатие вообще, сервер отправит несжатую версию.

Какой алгоритм сжатия выбрать: gzip или brotli?

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

Почитать по теме:
Как оптимизировать показатель LCP | Ускоряем загрузку контента для пользователей

Как использовать сжатие gzip

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

Степень сжатия можно настраивать, gzip поддерживает уровень сжатия от 1 до 9. Обычно рекомендуют степень 4-7 в зависимости от ресурсов процессора, оптимальное значение 5. Подберите подходящую степень сжатия под свои ресурсы, чтобы процессор справлялся, иначе сжимать информацию будет бесполезно, если нагрузка на процессор сильно вырастет. Экономить ресурсы поможет использование заранее сжатых файлов, они имеют формат gzip с дополнительным расширением .gz. На такие файлы можно применять максимальную степень сжатия, дальше сервер будет использовать ее вместо обычной.

Сжатие gzip для Nginx

В новых версиях Nginx gzip сжатие включено по умолчанию, но если такого нет, его можно настроить. Чтобы запустить сжатие gzip для сервера Nginx, нужно включить сжатие в модуле /etc/nginx/nginx.conf: 

gzip on;
gzip_disable «msie6»;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

Директива «gzip_disable «msie6»» отключает сжатие для эксплорера 5.5 и 6, «gzip_proxied any» позволяет сжимать данные для proxy-серверов.

Уровень сжатия указывают в директиве «gzip_comp_level 6».

Директива «gzip_types text/css text/javascript application/javascript» указывает типы файлов для сжатия на сервере. Перечислите те, которые вам нужны. Cжатие text/html подразумевается и не может быть отключено, если вы не установили gzip off, а text/css и application/x-javascript включает сжатие gzip для файлов CSS и javascript соответственно.

Сжатие gzip можно включать и выключать для каждого «сервера» Nginx — более мелкой структуры, и для конкретного location — еще меньшей, зачастую располагающейся внутри него.

Gzip-сжатие файлов SVG для Nginx

Сжатие gzip будет работать для SVG, если формат векторной графики SVG есть в файле, который обычно располагается по пути «/etc/nginx/mime.types». Добавьте строку изображения «image/svg+xml svg svgz»

В файле конфигурации Nginx найдите «gzip types» и добавьте «image/svg+xml» к концу строки. Получившаяся строка может выглядеть так:

gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;

Сжатие gzip для Apache

Сервер Apache для работы со сжатыми ресурсами использует модуль mod_deflate или mod_gzip.

Если вы используете mod_gzip, в в файл .htaccess добавьте строки: 

<ifmodule mod_gzip.c=»»>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_include mime ^text/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_include handler ^cgi-script$
</ifmodule>

Если используете mod_deflate, для отгрузки сжатых файлов добавьте строки в файл .htaccess: 

<ifmodule mod_deflate.c=»»>
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/opentype
# For Older Browsers Which Can’t Handle Compression
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
</ifmodule>

Есть еще такой вариант перечисления типов файлов для сжатия в одной строке: 

<ifmodule mod_deflate.c=»»>
AddOutputFilterByType DEFLATE text/html text/css text/javascript font/ttf application/javascript
DeflateCompressionLevel 7
</ifmodule>

В строке DeflateCompressionLevel 7 указывают степень сжатия. Сжатие будет работать после сохранения.

Gzip-сжатие файлов SVG для Apache

Векторную графику формата SVG можно сжать с помощью gzip. В файле .htaccess. должна быть строка «# Compress HTML, CSS, JavaScript, Text, XML and fonts», добавьте в .htaccess строчку кода: 

AddOutputFilterByType DEFLATE image/svg+xml

После вставки и сохранения функция должна работать. Следите, чтобы код в файле не повторялся. 

Как использовать сжатие brotli

Brotli поддерживают браузеры Chrome, Firefox и Edge 15 для SSL-соединений. В заголовках должен быть «Accept-Encoding: br». В brotli есть собственный словарь из более сотни тысяч фраз, который используется для сжатия данных. Он же встроен в браузеры, которые поддерживают алгоритм, поэтому словарь не передается в архиве, и архив весит меньше.

Алгоритм сжатия brotli сжимает файлы сильнее, чем gzip. Максимальная степень сжатия у gzip — 9, а у brotli 11, степень 11 brotli дает файл на 25% меньше, чем сжатый 9 степенью gzip.

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

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

Сжатие brotli для Nginx

Сервер Nginx использует brotli при включенном модуле «brotli_static» в конфигурации «brotli_static on». Тогда сервер получит от браузера заголовок, проверит, есть ли в нем файл с расширением «.br» и отдаст нужный файл как архив, сжатый в brotli.

Brotli-архивы нужно установить из репозитория или собрать утилиты:

git clone https://github.com/badger/libbrotli
cd libbrotli
autoreconf -i
make install
git clone https://github.com/google/brotli
cd brotli
./configure
make
chmod +x bro
./bro —quality 11 —input <filename> —output <filename.br></filename.br></filename>

Пересборка Nginx с поддержкой brotli на Github.

Для сжатия «на лету» можно установить дополнительный модуль nginx brotli.
Модуль Nginx для сжатия brotli «на лету» на Github.

Сжатие brotli для Apache

Сжатие brotli поддерживает Apache версии 2.4.26 и выше.

Для Apache есть
модуль mod_brotli.

Модуль
mod_brotli by kjdev на Github.

Как проверить сжатие данных

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

Для проверки работы gzip есть
Check GZIP compressed.

сжатие кода сервисом онлайнФрагмент результатов проверки тестом

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

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

Инструмент
«Проверка скорости сайта» от PR-CY оценит скорость и покажет страницы, на которых не работает сжатие.

Проверка скорости сайта PR-CYФрагмент результатов проверки инструментом

Использовать минификацию HTML, CSS и JS

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

Минификация помогает уменьшить размер фрагментов кода JS, она не влияет на сам файл, но оптимизирует его и уменьшает размер, за счет чего повышается скорость загрузки. Файлы, прошедшие минификацию, получают расширение «.min». После минификации в CSS, HTML, JS-файле не будет разделителей, переносов, лишних пробелов, поэтому его будет сложнее читать.

Бесплатные инструменты для минификации CSS, JS, HTML-файлов

Собрали несколько бесплатных онлайн-инструментов для сокращения кода.

  • minifycode.com
    Простой бесплатный онлайн- инструмент для минификации кода HTML, CSS и JavaScript файлов в отдельных полях.
  • willpeavy.com/minifier
    Другой простой инструмент для минификации HTML, CSS или JS в один клик без дополнительных настроек.
  • letteros.com/compressor
  • Инструмент в два клика сжимает код JS, HTML и CSS, нужно только вставить код в поле и выбрать формат.
  • htmlcompressor.com
    Инструмент позволяет выбрать уровень минификации HTML и встроенного в него кода CSS и JS, отметить расширенные настройки.
  • jscompress.com
    Инструмент для сокращения файлов JS. Можно загружать файл и минифицировать несколько одновременно.
  • askapache.com/online-tools/compress-css
    Инструмент для быстрой минификации CSS без настроек — загружаете код и получаете результат.
  • csscompressor.com
    Инструмент дает установить одну из четырех степеней минификации CSS и размер итогового файла.

Использовать кэш браузера для ускорения

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

Google рекомендует настроить сервер так, чтобы он возвращал ответ с HTTP-заголовком Cache-Control, например:

Cache-Control: max-age=31536000

Директива «max-age» указывает, как долго браузер должен кэшировать ресурс в секундах. Значение 31536000 соответствует году: 60 секунд * 60 минут * 24 часа * 365 дней = 31536000 секунд.

Google советует применять «no-cache» для объектов, которые могут обновляться: тогда браузер по-прежнему будет кэшировать ресурс со значением «no-cache», но сначала проверит актуальность на сервере.

Кэширование для Nginx

Для сервера Nginx подходит модуль expires в файле конфигурации. Нужно перечислить форматы файлов для кэширования и указать время хранения кэша: 

location ~* .(js|css|png|jpg|jpeg|gif)$ {
expires 86400s;
log_not_found off;
}

Время можно указать в любом формате: секунды — s, часы — h, дни — d и месяцы — m, обозначение «max» указывает на кэширование навсегда.

Вместо времени хранения файла можно указать дату следующего обновления файла в кэше: 

expires Fri, 24 Nov 2017 01:01:01 GMT;

Строка log_not_found off нужна для снижения нагрузки на сервер, она отключает ведение лога сообщений с ошибкой 404 для перечисленных файлов. 

Кэширование для Apache

Метод Cache-Control

Метод позволяет указать для кэширования файлы конкретных форматов. В файле .htaccess в конструкции FilesMatch нужно указать расширения файлов для кэширования и время сохранения файла в кэше в секундах: 

# 1 Month for most static assets
<filesmatch «.(flv|gif|jpg|jpeg|png|ico|swf|js|css|pdf)$»=»»>
Header set Cache-Control «max-age=2592000»
</filesmatch>

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

<filesmatch «.(pl|php|cgi|spl|scgi|fcgi)$»=»»>
Header unset Cache-Control
</filesmatch>

Кэширование по времени

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

## EXPIRES CACHING ##
<ifmodule mod_expires.c=»»>
ExpiresActive On
ExpiresByType image/jpg «access 1 year»
ExpiresByType image/jpeg «access 1 year»
ExpiresByType image/gif «access 1 year»
ExpiresByType image/png «access 1 year»
ExpiresByType text/css «access 1 month»
ExpiresByType text/html «access 1 month»
ExpiresByType application/pdf «access 1 month»
ExpiresByType text/x-javascript «access 1 month»
ExpiresByType application/x-shockwave-flash «access 1 month»
ExpiresByType image/x-icon «access 1 year»
ExpiresDefault «access 1 month»
</ifmodule>
## EXPIRES CACHING ##

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

После сохранения нужно обновить страницу.

Проверить кэширование в Google Chrome можно с помощью веб-инспектора Chrome DevTools. Столбец Size в Chrome DevTools поможет убедиться, что ресурс в кэше:

Столбец Size в Chrome DevTool. Источник — Google

Вкладка Headers покажет, как установлен Cache-Control:

Проверка заголовка Cache-Control. Источник — Google

Сжать фотографии, иллюстрации и другую графику

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

Почитать по теме:
Большое руководство по SEO для картинок: как оптимизировать изображения на сайте

Как оптимизировать картинки для сайта:

  1. Подберите разрешение.
    Незачем загружать изображение в большом разрешении, если оно будет отображаться в маленьком без увеличения по клику.
  2. Подберите формат.
    JPEG подходит для фотографий, PNG для дизайнерской графики, SVG для вектора. Google также индексирует формат WebP, который весит меньше, но не все браузеры его поддерживают. Яндекс не индексирует SVG и изображения в скриптах.
  3. Уменьшайте количество цветов.
    Изображения, где нет сложных градиентов, требуют меньшего количества цветов. Можно оптимизировать картинку без потери качества, выбрав палитру меньше, тогда изображение будет хранить меньшее количество битов на пиксель.
  4. Варианты изображений с меньшим количеством цветовСлева направо: 32 бита (16M цветов), 7 бит (128 цветов), 5 бит (32 цвета)

  5. Пропишите параметры в CSS.
    Укажите размеры в коде или в редакторе изображений CMS. Для разных экранов и дисплеев с матрицей Retina нужны дополнительные варианты изображения разных размеров, чтобы браузер загружал нужное для устройства.
  6. Используйте шрифты.
    Если вы еще используете графику вместо шрифтов для текста, замените надписи на шрифты, это удобнее и меньше весит. Такой текст можно скопировать, поменять, масштабировать в любой момент.
  7. Удалите лишние изображения.
    Неинформативные картинки, иллюстрации ради разбивки текста и непонятные схемы лучше заменить на качественные изображения, которые помогут понять тему материала, или вообще удалить, чтобы они не прибавляли вес странице.
  8. Минифицируйте.
    Удаляйте XML-разметку с лишними метаданными, она появляется при работе с картинками в некоторых графических приложениях. EXIF — информацию о геоданных, дате съемки, фотокамере тоже можно удалить.
  9. Используйте алгоритмы сжатия.
    Настройте на сервере gzip-сжатие для SVG-графики.

Инструменты и сервисы для оптимизации изображений на сайте:

  • CompressJPEG
    Сервис для сжатия JPEG и PNG без потерь качества.
  • PunyPNG
    Инструмент сжимает PNG, JPEG и GIF.
  • TinyPNG
    Инструмент для оптимизации изображений в PNG и JPEG.
  • Jpegtran
    Инструмент для оптимизации JPEG-изображений.
  • Optipng
    Инструмент для оптимизации PNG без потерь.
  • Pngquant
    Инструмент сжимает PNG-изображения.

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

Источник

​Яндекс понизит сайты с навязчивыми оповещениями

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

Волноваться стоит ресурсам, которые:

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

Если поисковая система наказала ваш сайт за принуждение пользователей к подписке, то в Яндекс.Вебмастере появится следующее уведомление:

Избавиться от санкций можно после устранения замечаний Яндекса и нажатия кнопки «Я все исправил» (см. выше).

Напомним, ранее Яндекс.Вебмастер внедрил еженедельную сводку по сайту.

Источник

Говорит юрист: что делать, если сайт украли, и как правильно заказать разработку сайта

В статье:

  1. Авторское право на сайт в законах РФ

  2. Что делать, кто-то скопировал сайт полностью

  3. Что делать, кто-то скопировал сайт частично

  4. Как заказать разработку сайта правильно: лицензионный договор и отчуждение исключительных прав

  5. Какие законы читать об авторском праве

Совместно с магистром частного права и адвокатом Дарьей Третьяковой продолжаем цикл статей об авторском праве. Четвертая статья цикла о том, как закон защищает авторское право на сайт целиком: что делать и куда обращаться, если сайт скопировали, и как самому не стать нарушителем авторских прав разработчиков, заказав сайт у фрилансера или студии без правильного договора.

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

Предыдущие части цикла:
Защищаем авторское право на текст, на программу и код, на картинки и фотографии

Еще один неочевидный момент — это шрифты. В Гражданском кодексе РФ шрифты в качестве отдельного объекта авторского права не указаны, но судебная практика приравняла их к произведениям графики, поэтому шрифт и даже одна-единственная буква охраняется авторским правом так же, как и картинки.

Где брать шрифты при разработке сайта:

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

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

  • на код — у программиста;
  • на фотографии — у фотографа;
  • на рисунки — у иллюстратора;
  • на тексты — у копирайтера;
  • на элементы дизайна — у дизайнера и т.д.

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

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

Что делать, кто-то скопировал сайт полностью

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

За нарушение прав каждого из авторов таких материалов положена отдельная компенсация. А если один человек сделал все сам или выкупил все права у остальных, то он — владелец всех прав на материалы и может требовать компенсацию за нарушение прав на каждый элемент сайта по отдельности и на сайт как на составное произведение в целом. За каждый элемент предусмотрена компенсация минимум от 10 тысяч рублей. В
статье об авторском праве на изображения упоминали дело, по которому руководство мебельного магазина отсудило 820 тысяч рублей за 82 фотографии, скопированные с сайта магазина.

Почитать по теме:
Кейс: Что делать, если мошенники скопировали ваш сайт и украли трафик

Случай: 1 670 000 рублей за скопированный сайт

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

В одном из дел Арбитражный суд Санкт-Петербурга взыскал 1 670 000 рублей с организации, которая скопировала с чужого сайта логотип, текстовые описания разделов и подразделов сайта, фотографии, графические изображения и карты проезда. Ответчику пришлось удалить всю эту информацию со своего ресурса и заплатить компенсацию в 1 670 000 рублей владельцу сайта, у которого он скопировал контент.

Что делать, кто-то скопировал сайт частично

При частичном копировании могут быть две ситуации:

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

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

«9) перевод или другая переработка произведения.
При этом под переработкой произведения понимается создание производного произведения (обработки, экранизации, аранжировки, инсценировки и тому подобного). Под переработкой (модификацией) программы для ЭВМ или базы данных понимаются любые их изменения, в том числе перевод такой программы или такой базы данных с одного языка на другой язык, за исключением адаптации, то есть внесения изменений, осуществляемых исключительно в целях функционирования программы для ЭВМ или базы данных на конкретных технических средствах пользователя или под управлением конкретных программ пользователя…»
ГК РФ Статья 1270. Исключительное право на произведение

Что делать, если кто-то скопировал ваш сайт полностью или частично:

  1. Зафиксировать факт нарушения.
    Надежный способ — нотариальный осмотр сайта.
  2. Обратиться за защитой своих прав:
  • за взысканием убытков или денежной компенсации в суд;
  • за блокировкой сайта нарушителей в Роскомнадзор;
  • за привлечением нарушителя к уголовной ответственности в полицию, если незаконные действия причинили вам крупный ущерб (более 100 тысяч рублей).

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

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

Как заполнять договор на разработку сайта

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

Если у вас нет собственных текстов, фото и картинок, то остается три варианта:

  1. У студии есть собственные копирайтеры, иллюстраторы и фотографы — то есть контент создают работники студии.
    Будет достаточно заключить договор только с самой студией. Когда сотрудник создает произведения в рамках обязанностей по трудовому договору, авторские права — право на имя — принадлежат автору, но исключительные права — право использовать произведение любым способом — по умолчанию признаются за работодателем.

    «1. Авторские права на произведение науки, литературы или искусства, созданное в пределах установленных для работника (автора) трудовых обязанностей (служебное произведение), принадлежат автору.2. Исключительное право на служебное произведение принадлежит работодателю, если трудовым или гражданско-правовым договором между работодателем и автором не предусмотрено иное».
    ГК РФ Статья 1295. Служебное произведение

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

  3. Студия или фрилансер собираются привлекать субподрядчиков.

    Если исполнители покупают для вас контент, то здесь возможны два варианта:

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

Договор на разработку сайта с фрилансером или студией

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

При заказе разработки сайта используют один из двух вариантов:

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

Сравним эти договоры:

Договор авторского заказа

Договор на создание сайта

Указан один из вариантов передачи прав:

  • исключительное право — все права владения передаются насовсем, кроме права авторства;
  • только право на использование произведения в определенных прописанных в договоре пределах.

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

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

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

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

«1. Исключительное право на программу для ЭВМ, базу данных или иное произведение, созданные по договору, предметом которого было создание такого произведения (по заказу), принадлежит заказчику, если договором между подрядчиком (исполнителем) и заказчиком не предусмотрено иное.

2. В случае, если исключительное право на произведение в соответствии с пунктом 1 настоящей статьи принадлежит заказчику, подрядчик (исполнитель) вправе, поскольку договором не предусмотрено иное, использовать такое произведение для собственных нужд на условиях безвозмездной простой (неисключительной) лицензии в течение всего срока действия исключительного права…».

ГК РФ Статья 1296. Произведения, созданные по заказу

«1. По договору авторского заказа одна сторона (автор) обязуется по заказу другой стороны (заказчика) создать обусловленное договором произведение науки, литературы или искусства на материальном носителе или в иной форме.

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

Договор авторского заказа является возмездным, если соглашением сторон не предусмотрено иное.

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

ГК РФ Статья 1288. Договор авторского заказа

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

«1. Авторские права на произведение науки, литературы или искусства, созданное в пределах установленных для работника (автора) трудовых обязанностей (служебное произведение), принадлежат автору.

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



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

ГК РФ Статья 1295. Служебное произведение

Что будет, если заказать сайт без договора

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

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

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

Кто несет ответственность за плагиат на сайте

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

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

Может ли бизнесмен взыскать убытки со студии

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

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

Какие меры предпринять, чтобы не попасть в судебные разбирательства по авторскому праву:

  1. Сразу оговаривайте, откуда исполнитель будет брать контент для сайта.
  2. Оформляйте договор в письменной форме.
  3. Не стесняйтесь перепроверять, что для сайта использован легальный контент: просите копии договоров с субподрядчиками, читайте условия лицензий на бесплатные картинки и код.

Подробная информация о правах автора на сайт, отчуждении прав, штрафах и компенсациях за нарушение есть в Гражданском Кодексе:

ГК РФ Статья 1270. Исключительное право на произведение

ГК РФ Статья 1288. Договор авторского заказа

ГК РФ Статья 1295. Служебное произведение

ГК РФ Статья 1296. Произведения, созданные по заказу

Предыдущие части цикла:

Как защитить авторские права на текст

Как закон защищает авторское право на программу

Защищаем авторские права на картинки и фотографии

Задавайте свои вопросы по теме в комментариях!

Дарья Третьякова, магистр частного права, адвокат, популяризатор юриспруденции и автор канала «У юриста бомбит»

Источник

Тег viewport: как настроить область просмотра в адаптивном дизайне

В статье:

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

  2. Как работает мета-тег viewport

  3. Как и где указывать тег «viewport»

Экран и область просмотра в адаптивном дизайне

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

Для мобильного просмотра веб-мастеры в зависимости от потребностей бизнеса выбирают способ отображения сайта: разрабатывают отдельную мобильную версию, делают адаптивную верстку или динамическую — RESS (Responsive Design + Server Side). Для корректного отображения проекта на разных моделях планшетов и десктопов также нужен адаптив под разные разрешения.

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

  • диагональ экрана — размер дисплея в дюймах, измеряется от угла к углу;
  • размер экрана в точках — количество точек, их устройство использует для координат;
  • полное число пикселей (Rendered Pixels), которое визуализирует устройство. Значение считают с помощью множителя 1x, 2x, 3x, который устройство использует к размеру экрана в точках;
  • физические пиксели — фактическое разрешение экрана в пикселях; в экранах Retina, которые используют современные модели техники Apple, более высокое разрешение изображения на экране с меньшим количеством физических пикселей.

К примеру, возьмем смартфоны: у IPhone 3 с диагональю 3.5″ физическое разрешение экрана 320x480px, а плотность пикселей 163ppi. Разрешение соответствует диагонали, плотность пикселей невысокая. Если отобразить на нем текст, набранный размером 16px, он будет читаться так же хорошо, как и на экране компьютера. Модель IPhone 6 Plus с дисплеем Retina использует более высокое разрешение изображения на экране с меньшим количеством физических пикселей, полноэкранное изображение — 1242x2208px.

мобилопригодность сайта под модели IPhoneЭкран IPhone 6 Plus. Источник: kylejlarson.com

Из-за высокой плотности пикселей тот же текст, набранный в размере 16px, будет выглядеть на экране IPhone 6 Plus значительно мельче, чем на дисплее IPhone 3 . Чтобы сделать страницу с таким текстом пригодной для чтения, нужно отмасштабировать ее, увеличив в три раза.

Отношение пикселей зависит от плотности дисплея:

  • плотность менее 200 DPI (точек на дюйм) — соотношение 1.0;
  • от 200 до 300 DPI — 1.5.
  • более 300 DPI — соотношение представляет собой плотность/150 точек на дюйм.

В основе адаптивного дизайна лежат принципы подвижности и пропорциональности. Веб-мастеры создают макеты в высоком разрешении, располагая контент по модульной сетке из 12, 16 или 24 колонок
Bootstrap, и используют адаптивную верстку. Сервер отправляет одинаковый HTML-код на все устройства, но размеры элементов CSS масштабирует под устройства с помощью CSS-правила @viewport и мета-тега «viewport» в HTML. Это позволяет добиться четких изображений и читабельного текста.

Адаптивность есть во всех современных требованиях к PSD-макетам сайта. Пример
требований by andrey-hohlov на GitHub.

Как работает мета-тег viewport

Viewport — это видимая пользователю область страницы сайта без прокруток.

область просмотра сайта на десктопеВидимая страница сайта на десктопе

Моблопригодность сайтаВидимая страница сайта на смартфоне


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

Мета-тег «viewport» и CSS правило @viewport

Правило @viewport разработала компания Windows, сейчас оно поддерживается несколькими браузерами, но ожидается, что станет будущим стандартом для веб.

Разработчики контролируют масштаб отображения страницы сайта в окне устройства с помощью мета-тега «viewport» или правила
@viewport, которое управляет масштабированием с помощью CSS. Тег используют для адаптивных сайтов и для ресурсов с фиксированной или гибкой разметкой в том числе.

мета-тег viewportСлева страница без мета-тега viewport, справа с мета-тегом. Источник: developers.google.com

Справа мобилопригодная страница с тегом «viewport», в котором указана область просмотра страницы — она равна ширине экрана. Пользователь не масштабирует страницу и видит контент в удобном для чтения размере, блоки контента смещены так, что горизонтальной прокрутки нет.

Как и где указывать тег «viewport»

Страницы сайта должны корректно отображаться на разных дисплеях, для этого в HTML-страницу нужно включить мета-тег «viewport», а в CSS добавить правило @viewport.

Мета-тег «viewport» размещают в блок в таком виде:

<meta name=»viewport» content=»width=device-width, initial-scale=1″>

Особенности поддержки правила @viewport браузерами есть в
спецификации. Пока оно мало распространено, но скорее всего станет стандартом в CSS.

@viewport { width: device-width;}

Сейчас к правилу @viewport рекомендуют добавлять вендорный префикс:

@-ms-viewport {
width: device-width;
}
@-o-viewport {
width: device-width;
}
@viewport {
width: device-width;
}

Как настроить размер окна просмотра

Атрибут «width»

Атрибут «width» адаптирует ширину окна просмотра к экрану устройства. Указывают либо целое неотрицательное значение от 200px до 10 000px, либо константу «device-width» — она означает, что устройство масштабирует ширину страницы под размер экрана.

Веб-мастер может установить конкретное число пикселей в этом атрибуте, к примеру, width=600. Так делают, если макет должен быть не менее 600px шириной. Если экран окажется больше, браузер не будет увеличивать масштаб, а станет расширять область просмотра, чтобы она растянулась до размеров экрана.

<meta name=»viewport» content=»width=600, initial-scale=1″>

К примеру, на большинстве смартфонов действует стандарт «device-width» в 320px. Если пользователь смотрит сайт с мобильного устройства дисплеем 640px, изображение шириной 320px займет весь экран, используя удвоенное количество пикселей. Поскольку экран использует удвоенную плотность пикселей по сравнению со стандартным монитором, текст на маленьком экране будет казаться четче.

Какие значения масштаба использовать

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

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

Веб-мастеру будет сложно работать с сайтом, если он задался целью определить контрольные точки на макете для разных классов и моделей устройств.
Список размеров экранов мобильных устройств и планшетов насчитывает 286 элементов, вместо этого достаточно вписать относительные величины в процентах. Если для блока верхнего уровня установить параметр «width=100%», на любом устройстве он поместится в экран и не будет слишком маленьким или слишком большим. 

div.fullWidth {
width: 100%;
}

Как использовать медиазапросы CSS

Для улучшения отображения на разных экранах в правило @viewport добавляют медиазапросы — фильтры, которые позволяют изменять стили CSS на основании характеристик устройства: ориентации, параметров экрана, ориентации и типа устройства.

С помощью медиазапросов CSS веб-мастер может настроить отображение стилей в зависимости от размера экрана устройства. Для этого применяют код:

@media (query) {
/* CSS Rules used when query matches */
}

В адаптивном дизайне применяют функции:

  • «min-width» — применимо к браузеру, ширина которого больше, чем указано в запросе;
  • «max-width» — к браузеру, ширина которого меньше;
  • «min-height» — к браузеру, высота которого больше значения, указанного в запросе;
  • «max-height» — к браузеру, высота которого меньше.

Если устройство имеет диапазон разрешения от 640 до 1024px, указанное правило @viewport будет масштабировать окно до 640px:

@media screen and (max-width: 400px) {
@-ms-viewport { width: 320px; }

}

К примеру, установим значения:

При ширине браузера от 0 до 640px применяется max-640px.css.

При ширине браузера 500-600px применяются стили из @media.

При ширине браузера 640px и выше применяется min-640px.css.

Если в браузере ширина больше высоты — горизонтальная ориентация, применяется landscape.css.

Если в браузере высота больше ширины — вертикальная ориентация, применяется portrait.css.

Код для этих значений будет выглядеть так:

<link rel=»stylesheet» media=»(max-width: 640px)» href=»max-640px.css»>
<link rel=»stylesheet» media=»(min-width: 640px)» href=»min-640px.css»>
<link rel=»stylesheet» media=»(orientation: portrait)» href=»portrait.css»>
<link rel=»stylesheet» media=»(orientation: landscape)» href=»landscape.css»>
<style>
@media (min-width: 500px) and (max-width: 600px) {
h1 {
color: fuchsia;
}
.desc:after {
content:» In fact, it’s between 500px and 600px wide.»;
}
}
</style>

Как настроить отображение в зависимости от ориентации дисплея

Атрибут «initial-scale=1»

Некоторые браузеры при изменении ориентации с вертикальной на горизонтальную увеличивают масштаб. Атрибутом «initial-scale=1» указывают браузеру соотношение пикселей CSS и устройства независимо от ориентации дисплея, в соотношении один к одному. В ориентации по горизонтали страница будет выглядеть лучше. Атрибут может иметь значение от 0.1 до 10, 1.0 означает «не масштабировать».

Атрибуты «maximum-scale», «minimum-scale» и «user-scalable»

Кроме настройки «initial-scale» у разработчика есть возможность настроить атрибуты «maximum-scale», «minimum-scale» и «user-scalable». Они ограничивают масштабирование страницы пользователем или вовсе запрещают его.

«maximum-scale» и «minimum-scale» определяют максимальный и минимальный масштаб окна. Могут иметь значения от от 0.1 до 10, 1.0 означает «не масштабировать».

Атрибут «maximum-scale=1» при переключении ориентации оставит настройки масштаба неизменными:

<meta name=»viewport» content=»initial-scale=1, maximum-scale=1″>

«user-scalable» определяет, может ли пользователь изменять масштаб. Он имеет значение «no» или «yes», по умолчанию стоит «yes».

Аналоги для правила @viewport

У «initial-scale» в мета-теге есть аналоги для правила @viewport — это дескрипторы «zoom», «max-zoom» и «min-zoom», они работают также.

@viewport {
width: device-width;
zoom: 2;
}

Свойство «user-scalable» в HTML имеет эквивалент «user-zoom» в CSS:

@viewport {
width: device-width;
user-zoom: fixed;
}

Дескриптор «orientation»

Ориентацией документа в @viewport можно управлять с помощью дескриптора «orientation». У него есть три значения:

  • auto — ориентация на основе положения устройства;
  • landscape — горизонтальная ориентация;
  • portrait — вертикальная ориентация.

По умолчанию установлено значение auto.

Медиазапросы и «device-width»

Google в
руководстве для веб-мастеров предлагает комбинировать значения «device-width» с медиа-запросами и настраивать макет в зависимости от ориентации устройства:

@media screen and (min-width:480px) and (max-width:800px) {
/* Target landscape smartphones, portrait tablets, narrow desktops
*/
}
@media screen and (max-width:479px) {
/* Target portrait smartphones */
}

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

@media all and (orientation: landscape) {
/* Target device in landscape mode */
}
@media all and (orientation: portrait) {
/* Target device in portrait mode */
}
видимая область экрана на десктопе и мобильномСайт Института культуры в горизонтальной и вертикальной ориентации, webmasters.googleblog.com

Атрибуты «height» и «device-height»

Если на сайте есть элементы, которые меняют свой размер в зависимости от высоты окна просмотра контента, в мета-теге применяют атрибут «height» — он определяет высоту Viewport. Указывают целое неотрицательное значение «height» от 223px до 10000px или константу «device-height».

Если шаблон неадаптивный

Не рекомендуют использовать «initial-scale=1» для неадаптивных шаблонов — с такой установкой страница будет отображаться в масштабе 100%, в неадаптивном дизайне пользователю придется устанавливать масштаб вручную или прокручивать.

Не используйте «user-scalable=no» или «initial-scale=1» вместе с «maximum-scale=1» на неадаптивных шаблонах — это отключит масштабирование страницы, а без него пользователь не сможет увидеть всю страницу сайта.

Если не использовать «viewport»

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

Такие страницы поисковики не будут считать адаптивными, а значит не дадут им высокие позиции в топе. Высокий процент отказов поисковики расценят как сигнал бесполезности сайта.
Мобилопригодность важна при ранжировании в Яндексе и Google. В 2016 году в Яндексе появился
алгоритм «Владивосток», в 2018 «Андромеда», а Google в 2018 году заявил, что мобильный индекс будет в приоритете и для мобильной, и для десктопной выдачи. На начало 2019 перевод в мобильный индекс еще не завершен до конца.

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

Проверить мобилопригодность страницы

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

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

Отображение на мобильных устройствах в числе прочих тестов покажет
«Анализ сайта» от PR-CY. Он оценит мобилопригодность по нескольким параметрам, покажет область просмотра на экране и даст советы по исправлению ошибок.

Проверка мобилопригодности сайта онлайнФрагмент результатов проверки сервисом «Анализ сайта»

Мета-тег «viewport» не входит в официальные стандарты, но общепризнан, его поддерживают большинство браузеров и используют многие сайты. Работа с этим тегом описана в том числе в
документации Apple и в документации Android для разработчиков.

Материалы и руководства для веб-мастеров

  • Требования к PSD-макетам сайта by andrey-hohlov на GitHub.
  • Правило @viewport в справочнике CSS
  • Спецификация @viewport
  • Мета-тег «viewport» в справочнике HTML
  • Руководство для веб-мастеров от Google
  • Список размеров экранов мобильных устройств и планшетов
  • Документация для разработчиков
    Apple и Android

Сайты, не адаптированные для устройств с разными экранами, теряют большую часть трафика. Адаптивным будет сайт, если его контент удобно просматривать с любого устройства — для этого разработчики размечают область просмотра с помощью мета-тега «viewport» в HTML, а в CSS иногда добавляют правило @viewport.

Источник

Как продвинуть сайт в Google News в этом году

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

Итак, для лучшей видимости в Google News:

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

  • не стоит дублировать чужой контент у себя на сайте;
  • не публикуйте новые статьи, содержание которых во многом повторяет опубликованные ранее;
  • не участвуйте в сомнительных схемах, призванных манипулировать поисковой выдачей;
  • по возможности используйте AMP-страницы и структурированные данные;
  • перейдите на HTTPS-протокол;
  • изучите рекомендации в Справочном центре Google для издателей.

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

Проверить, есть ли ваш ресурс в новостном агрегаторе, можно с помощью нашего анализа сайтов.

Источник

Как ускорить загрузку: оптимизируем код верхней части страницы

В статье:

Как оптимизировать код верхней части страницы:

  1. Удалить код JavaScript и CSS из верхней части страницы
  2. Использовать асинхронную загрузку Javascript и CSS
  3. Настроить асинхронную загрузку с jQuery
  4. Ускорить получение первых байтов (TTFB)
  5. Объединить CSS в один файл, объединить JavaScript
  6. Использовать алгоритмы сжатия
  7. Минифицировать файлы CSS и JavaScript
  8. Использовать кэш браузера
  9. Загружать данные с помощью CDN

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

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

Узнать примерную скорость загрузки можно с помощью инструмента
PageSpeed Insights от Google. Он оценивает скорость сайта и выводит советы по улучшению показателя.

Проверка скорости загрузки сайта PageSpeed InsightsФрагменты проверки инструментом PageSpeed Insights

Для оценки Google определил девять правил, инструмент считает количество баллов по соответствиям.

Правила PageSpeed Insights:

  1. Не используйте перенаправления с целевой страницы
  2. Включите сжатие
  3. Сократите время ответа сервера
  4. Используйте кэширование в браузере
  5. Сократите HTML, CSS и JavaScript
  6. Оптимизируйте изображения
  7. Оптимизируйте загрузку CSS
  8. Расставьте приоритеты загрузки контента
  9. Удалите блокировку рендера JavaScript

Бесплатный инструмент «Проверка скорости сайта» от PR-CY.RU использует такие же правила для анализа скорости и учитывает показатель Google Core Vitals, который поисковик обещает ввести в 2021 году. 

Бесплатная проверка скорости загрузки сайтаФрагмент проверки

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

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

Как оптимизировать код верхней части страницы:

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

Удалить код JavaScript и CSS из верхней части страницы

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

Исходный HTML-код страницы:

<link rel=»stylesheet» href=»<a>small.css< a>»=»»>

<div class=»black»>
Текст
</div>

</a>small.css<></a>small.css<>

Стили small.css:

yellow {background-color: white;}
.blue {color: black;}
.big { font-size: 8em; }
.bold { font-weight: bold; }

Встраиваем CSS: 

<style>
.black{color:black;}
</style>

<div class=»black»>
Текст
</div>

<link rel=»stylesheet» href=»small.css»>

Файл стилей small.css будет подгружаться после загрузки первой страницы.

Использовать асинхронную загрузку Javascript и CSS

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

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

Настроить асинхронную загрузку Javascript

Если на сайте есть видео со сторонних сервисов или другие внешние элементы, браузеру придется ждать загрузки всех элементов Javascript. Недоступное видео или другие проблемы с контентом могут вообще заблокировать загрузку сайта. Чтобы этого не произошло, используют
Friendly iFrame или асинхронную загрузку.

Создайте пустой div блок в том месте, где нужно отобразить элемент:

<div id=»script_block» class=»script_block»></div>

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

<div id=»script_ad» class=»script_ad» style=»display:none;»>
файл или скрипт для загрузки</div>
<script type=»text/javascript»>
*переместить на реальную позицию отображения*
document.getElementById(‘script_block’).appendChild(document.getElementById(‘script_ad’));
*показать*
document.getElementById(‘script_ad’).style.display = ‘block’;
</script>

Скрипт работает во всех современных браузерах.

Настроить асинхронную загрузку CSS

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

Настроить асинхронную загрузку CSS можно несколькими способами, к примеру, через «rel=preload»:

<link type=»text/css» href=»style.css» rel=»preload» as=»style» onload=»this.rel=’stylesheet'»>
<noscript>
<link type=»text/css» href=»style.css» rel=»stylesheet» />
</noscript>

В некоторых версиях браузеров, к примеру, в Firefox 57, «preload» по умолчанию отключен, поэтому событие «onload» не сработает. Учитывайте это и догружайте данные скриптом:

if (navigator.userAgent.indexOf("Firefox")>=0) {
var elms = document.querySelectorAll('link[rel=preload][as=style]');
for (i=0; i<elms.length; i++) {
elms[i].rel="stylesheet";
}
}

Скрипт
cssrelpreload.js by loadCSS на GitHub включает поддержку rel=preload для файлов CSS файлов. Он сработает, если в браузере нет родной поддержки «preload».

Еще по теме:
Как оптимизировать CSS сайта для улучшения Core Web Vitals

Настроить асинхронную загрузку с jQuery

Для своей работы веб-мастера используют библиотеки скриптов. По данным
графика популярности библиотек в вакансиях, в 2017 году библиотека jQuery была на пике популярности. Ее использование выросло и в 2018, хоть в вакансиях стал чаще появляться React.

Популярность библиотек скриптов javascript в 2017 и 2018График популярности библиотек в вакансиях: слева 2017, справа 2018

Библиотека скриптов jQuery содержит набор готовых функций Javascript, которые помогают писать код.

Последняя версия библиотеки jQuery для локального подключения

Для работы подключите версию библиотеки, которая у вас поддерживается.

Настроить асинхронную загрузку Javascript с jQuery

Для настройки асинхронной загрузки Javascript с jQuery нужно добавить свойство «async»:

<script async=»» src=»example.js»></script>

Это отключит последовательную загрузку, поэтому добавьте событие «onload»:

<script>function init() {
$(‘a’).addClass(‘ajax’);
}</script>
<script src=»/jquery.js» async=»» onload=»init()»></script>

Функция «init» будет вызвана после загрузки jQuery.

Настроить асинхронную загрузку CSS с jQuery

jQuery подходит и для асинхронной загрузки CSS. Для того используйте код:

$(«head»).append(«<link rel=»stylesheet» type=»text/css» href=»/stylesheet.css»>»);

Он должен загружаться после остальных элементов страницы и jQuery. К примеру, использование с методом «ready»:

<script>
$(document).ready(function() {
$(«head»).append(«<link rel=’stylesheet’ type=’text/css’ href=’/stylesheet.css’ />»);
});
</script>

Ускорить получение первых байтов (TTFB)

TTFB (Time To First Byte) — это время, которое прошло с момента отправки запроса клиентом до получения им первого байта. Чем меньше показатель, тем быстрее браузер начинает загружать страницу.

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

Чем больше запросов выполняет браузер, тем дольше может быть загрузка. Проверить, сколько HTTP-запросов генерирует страница, можно на панели разработчика браузера. В Google Chrome и Mozilla Firefox для этого нужно вызвать на странице команду «Посмотреть код» (Ctrl + Shift + I), найти вкладку Network, перезагрузить страницу и отфильтровать по типу HTML (Doc). Появится список запросов со статусами ответов и временем загрузки.

Окно опции Посмотреть код на сайтеСписок запросов со статусами на главной странице Яндекс

Почитать по теме:
Как оптимизировать показатель LCP | Ускоряем загрузку контента для пользователей

Также данные о TTFB есть в Pagespeed и в Google Analytics: перейдите в «Поведение» — «Скорость загрузки сайта» — «Обзор», в блоке «Среднее время ответа сервера» увидите TTFB в секундах.

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

  1. На загрузку не хватает ресурсов.

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

  2. Работа с базой данных слишком медленная.

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

  3. На сайте не включен акселератор (для PHP).

    Разработчики сайтов на PHP используют акселераторы кода для его оптимизации — это расширение, которое кэширует байт-код и увеличивает производительность интерпретатора. При загрузке страницы сервер часто обрабатывает одни и те же участки кода, а акселератор будет предварительно компилировать PHP, что уменьшит время получения первого байта. В версиях PHP 5.5 и выше он идет в комплекте, в файле «php.ini» нужно найти «opcache.enable» и
    включить акселератор. В версиях 5.2 и 5.3 он доступен в PECL, нужно установить его и включить также через файл «php.ini» .

Объединить CSS в один файл, объединить JavaScript

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

Исходный код:

<link rel=»stylesheet» href=»structure.css» media=»all»>
<link rel=»stylesheet» href=»banner.css» media=»all»>
<link rel=»stylesheet» href=»layout.css» media=»all»>
<link rel=»stylesheet» href=»component.css» media=»all»>
<link rel=»stylesheet» href=»plugin.css» media=»all»>

Объединяем CSS-файлы:

<link rel=»stylesheet» href=»main.css» media=»all»>

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

Исходный код:

<script src=»navbar.js»></script>
<script src=»component.js»></script>
<script src=»page.js»></script>
<script src=»framework.js»></script>
<script src=»plugin.js»></script>

Объединяем файлы JavaScript:

<script src=»main.js»></script>

Использовать алгоритмы сжатия

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

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

Можно найти плагины для CMS или включить сжатие вручную. Подробно о подключении алгоритмов сжатия для разных серверов в статье «Как уменьшить вес сайта и ускорить загрузку страниц:
использовать сжатие gzip или brotli».

Минифицировать файлы CSS и JavaScript

Данные делают легче не только с помощью алгоритмов сжатия. Еще CSS, Javascript и HTML можно минифицировать — сократить методом удаления лишних символов, которые не влияют на работу кода, но занимают место. Удаляют пробелы, комментарии, переносы строк и табуляцию, в файлах стилей сокращают названия цветов.

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

Минификация CSS

Исходный код:

<style>
body { background-image: url(«foo.png»); }
/* This comment will be stripped */
#iddy, .anotherId {
border: solid 1px #cccccc;
padding: 1.2em;
float: left;
color:##ff0000;
}
</style>

Минифицируем CSS:

<style>body{background-image:url((«foo.png»}#iddy,#anotherId{border:solid 1px #ccc;padding:1.2em;float:left;color:red}</style>

Минифицировать файлы CSS и JavaScript

Коды JavaScript тоже можно сократить — удалить лишние символы и сократить переменные. Чтобы не делать это вручную, для минификации есть автоматические сервисы — загружаешь в него код и скачиваешь версию в сокращении.

Подробнее о сервисах и особенностях минификации в статье «Как уменьшить вес сайта и ускорить загрузку страниц:
использовать минификацию HTML, CSS и JS»

Использовать кэш браузера

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

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

Для сервера Nginx в файле конфигурации настройте модуль Expires: перечислите форматы файлов для кэширования через с прямой слэш «|», укажите время хранения в секундах.

location ~* .(js|css|png|jpg|jpeg|gif)$ {
expires 86400s;
log_not_found off;
}

Если вы используете Apache, добавьте в файл .htaccess строки с указанием сроков хранения в кэше для форматов файлов:

## EXPIRES CACHING ##
<ifmodule mod_expires.c=»»>
ExpiresActive On
ExpiresByType image/gif «access plus 6 months»
ExpiresByType image/jpeg «access plus 6 months»
ExpiresByType image/png «access plus 6 months»
ExpiresByType text/css «access plus 1 year»
ExpiresByType text/javascript «access plus 6 months»
ExpiresByType application/javascript «access plus 6 months»
</ifmodule>
## EXPIRES CACHING ##

О других способах настройки кэширования есть в статье «Как
использовать кэш браузера для ускорения: кэширование для Nginx и Apache, метод Cache-Control и кэширование по времени».

Загружать данные с помощью CDN

Еще один способ сократить время загрузки данных — использовать популярные CDN. CDN (Content Delivery Network) — это сетевая структура серверов в разных географических точках, которые хранят контент и быстро отдают его клиенту. CDN нужны, чтобы сайт открывался с одинаково быстрой скоростью для пользователей из разных географических точек. Они сокращают время загрузки, ускоряют рендеринг, защищают от DDoS, скраперов и ботов.

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

Разработчики выбирают CDN в зависимости от потребностей бизнеса и бюджета. Hhostings.info собрали двадцать CDN с лучшими отзывами и
составили топ CDN 2019.

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

Источник

Adblock
detector