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

В статье:

1. Три варианта адаптировать просмотр для мобильных

2. Чек-лист оптимизации сайта с пояснениями, таблица для скачивания

3. Бесплатные инструменты для проверки мобилопригодности

Мобилопригодным считается сайт, на котором пользователю удобно работать с мобильных устройств. Как показывает исследование PwC от 2019 года, 79% россиян покупают онлайн с мобильных.

В 2020 году мобилопригодность — обязательное требование к сайтам, оптимизируете вы ресурс для Яндекса или для Google. Учитывать мобилопригодность страниц в ранжировании Яндекс начал с февраля 2015 года, когда ввел алгоритм «Владивосток». Google начал тестировать Mobile-first index в 2016, а до конца 2020 обещает перевести на него все сайты. Этот индекс подразумевает, что независимо от устройства выдача будет мобильной.

По словам представителя Google Джон Мюллера, перевод сайта в Mobile-first index зависит от факторов:

• способен ли Google просканировать весь контент на страницах ресурса;
• может ли этот контент отображаться на мобильных устройствах в принципе.

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

Выбор адаптивного шаблона сайта

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

Мобильная версия

Это отдельный сайт на поддомене. Сервер учитывает user-agent устройства пользователя, определяет, что тот зашел со смартфона, и перенаправляет на версию для мобильного просмотра. К URL-адресу в начало обычно добавляется «m.».

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

<link rel=»alternate» media=»only screen and (max-width: 640px)» href=»http://m.site.com/page.html»>

Мобильная и полная версия на смартфоне

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

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

Адаптивная верстка

Сайт один, интерфейс подстраивается под разрешение экрана гаджета, для всех устройств один URL. Область просмотра контента устанавливают тегом Viewport:

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

Если не установить тег, вся десктопная область просмотра уменьшится в масштабе и уместится на экране.

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

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

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

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

RESS

Технология адаптирования сайта для мобильного на стороне сервера. В зависимости от типа устройства сервер отправляет пользователю один из вариантов кода HTML и CSS.

Отображение сайта со смартфона

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

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

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

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

Чек-лист оптимизации сайта под мобильные устройства

Скачайте краткий чек-лист на свой на компьютер или скопируйте в Google Docs, чтобы отмечать выполнение в своем файле.

Открыть и скачать чек-лист мобилопригодного сайта от PR-CY.ru

Пункты из чек-листа с пояснениями и примерами:

1. Реализация отображения на мобильных

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

2. Сайт доступен для роботов

Сделать ресурс доступным для индексирующих роботов нужно в файле robots.txt. Разрешите сканирование CSS и JavaScript, от них зависит, будет ли сайт корректно отображаться на мобильных.

3. Ответ 200 ОК

Если сервер отправляет ответ с HTTP-кодом 200 OK, значит со страницей все в порядке: она доступна для просмотра и корректно отображается в выдаче.

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

Проверка внутренних страниц

Почитать по теме:
Что означает код ответа сервера

4. Поддержка всех технологий

Нет Flash-элементов, Java-апплетов и Silverlight-плагинов — эти технологии тормозят загрузку и могут не поддерживаться на мобильных, поэтому рекомендуем отключить их и встраивать контент с помощью HTML5. Тяжелый интерактив нужно облегчить или отказаться от него ради быстрой загрузки.

5. Быстрая загрузка

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

Сколько секунд должен загружаться сайт?
Конкретных лимитов нет, скорость загрузки сайта зависит и от скорости интернета, поэтому у разных пользователей она может несколько различаться. Джон Мюллер из Google в 2016 году называл около 2-3 секунд для ориентира.

Проверить скорость загрузки можно инструментом «Проверка скорости сайта», он посчитает скорость и даст советы по оптимизации.

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

Проверка скорости загрузки

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

6. Отдельный фавикон

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

Размеры фавиконов и коды для установки есть в руководстве.

Иконки сайтов на экране смартфона

7. Только вертикальная прокрутка

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

8. Крупные значки

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

Крупные элементы на сайте

9. Крупный шрифт

Мелкий шрифт читать неудобно — приходится масштабировать страницу, чтобы не напрягать зрение. Сделайте шрифт крупным, увеличьте высоту строки пропорционально размеру шрифта — около 140% от кегля текста. Для просмотра с устройств на iOS для обычного текста рекомендуют размер 17pt, для Android — 13sp. Исследование
Baymard Institute показывает, что оптимальная длина строки — 50-60 символов с пробелами. Ориентируйтесь на аудиторию, если ваши пользователи — люди пенсионного возраста, им будет удобно читать текст покрупнее.м

Текст на странице с рецептами

10. Контрастный текст

Для текста рекомендуем подбирать не строго контрастные цвета: от темного-серого текста на белом фоне глаза устают меньше, чем от черного на белом. Инструмент Color Contrast Checker поможет подобрать сочетание цветов текста и фона.

Фрагмент работы с инструментом

11. Всплывающие окна не закрывают контент

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

Иконки мессенджеров убраны под панель

12. Упрощенная регистрация

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

Быстрая регистрация

13. Использование геоданных

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

Автозаполнение города

14. Упрощенная связь с компанией

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

<a href=»tel:+74952235555″>Call me</a>

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

Экспорт номера телефона в журнал вызовов

Почитать по теме:

Повышаем юзабилити: звонок в компанию по клику с сайта

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

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

Инструмент от Google, проверяющий оптимизацию сайта для мобильных устройств.

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

Проверить сайт можно прямо в SERP: если ввести в поисковик «mobile friendly», появится поле для ввода адреса сайта.

Проверка в SERP

Анализ сайта от PR-CY проверяет ресурс по более 70 параметрам, включая и мобилопригодность. К каждому пункту проверки дает пояснение и совет. Для проверки оптимизации хватит функциональности бесплатной версии.

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

Вебмастер Яндекса тоже предлагает
проверку на мобилопригодность и выводит краткий список необходимых параметров. 

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

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

Источник

В статье:

1. Проблемы с определением источника трафика

2. Проблемы с учетом реферального трафика Яндекса

3. Как настроить полноценный учет органического трафика в Google Analytics

Чем точнее результаты в Google Analytics, тем объективнее картина о трафике и его распределении. Реферальный трафик — это переходы по ссылкам с других сайтов, а органический — поисковый. Google Analytics определяет источники трафика по рефереру — HTTP-заголовку, в котором указан источник перехода .

Проблемы с определением источника трафика

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

1. Неправильная настройка переадресации



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

Рекомендуем не использовать методы JavaScript для переадресации, использовать
301 редиректы, продумывать цепочки переходов и проверять файл перенаправления.

2. Переход по ссылке на HTTPS или HTTP



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

Если вы все еще используете HTTP, а ваши главные источники реферального трафика перешли на HTTPS, в Google Analytics переходы появятся в прямом трафике. Поэтому рекомендуем
перевести сайт на HTTPS: кроме возможного поощрения от поисковиков и пометки сайта как безопасного, вы сможете отслеживать источники трафика более точно. При этом желательно обновить обратные ссылки на новые с HTTPS.

Допустим, вы уже перешли на HTTPS, а у ваших партнеров все еще стоит протокол HTTP, тогда они не смогут отследить переходы с вашего сайта. Браузер будет передавать реферальные данные, если настроить метатег «referrer» в качестве HTTP-заголовка или элемента .

Почитать по теме:
Как перейти на HTTPS

3. Ошибочный код отслеживания


Веб-мастера добавляют коды отслеживания Google Analytics в HTML-код страниц или в систему Диспетчера тегов. Иногда коды отслеживания теряются при работе с кодом страницы или их изначально настраивают неправильно. Если пользователь попадет на страницу с ошибочным кодом и перейдет по ссылке туда, где код есть, Google Analytics не сможет корректно определить источник перехода. Источником будет ваш сайт, который по умолчанию не учитывается, если вы не меняли настройку self-referral, поэтому GA отнесет переход в прямой трафик. При этом UTM-метки не помогут идентифицировать посещение.

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

4. Закрытые каналы социального трафика


Google Analytics определяет переходы из социальных сетей как социальный трафик, но не все каналы трафика корректно отображаются. Многие пользователи часто общаются и обмениваются материалами в соцсетях и мессенджерах, но переходы из ссылок в WhatsApp, Viber, Telegram, других мессенджеров, Skype и почтовых клиентов воспринимаются как ссылки из закрытых каналов. Такой трафик может отображаться в GA как прямой.

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

5. Переходы с документов и приложений



Допустим, вы распространяете в цифровом варианте книгу или методичку в формате PDF или пересылаете файл Microsoft Word, OpenOffice или Google Docs с гиперссылками. Это не веб-документы, и переходы по ссылкам из таких файлов Google Analytics не идентифицирует — весь трафик из них пойдет в прямой. Такая же ситуация с переходами по ссылкам из приложений на смартфонах.

Google Analytics позволяет отследить трафик по UTM, поэтому рекомендуем делать UTM-метки ссылкам, которые используете в цифровых файлах.

6. Переходы из материалов офлайна

В брошюрах, визитках, каталогах и других офлайн материалах тоже могут быть ссылки на какие-то проекты компании. Обычно создают отдельные страницы с короткими адресами, чтобы пользователь мог запомнить и быстро набрать его в поисковике. Веб-мастерам полезно отслеживать количество переходов по этим ссылкам, но UTM-метку таким адресам поставить сложно, а сокращенные ссылки типа «
https://clck.ru/Ew36S» с UTM меткой плохо запоминаются.

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

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

Проблемы с учетом реферального трафика Яндекса

В мае-июне 2017 года и в конце июля 2018 органический трафик в Google Analytics стал учитываться по-другому. Сначала часть трафика из поисковика Mail.ru и мобильного поиска Яндекса стала отображаться как реферальный трафик.

Органический записывается в реферальный

А потом и часть трафика из десктопного поиска пошла в referral. То есть переходы yandex / organic стали учитываться как yandex.ru / referral.

Органический трафик отображается как реферальный

Значения отчета в Google Analytics были меньше, чем на самом деле при обычной настройке органического трафика: Источники трафика — Источник или канал — Поиск соответствующего регулярного выражения — organic.

Отчет Google Analytics

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

Многие оптимизаторы объединяют учет yandex.ru / referral и yandex / organic, чтобы трафик из Яндекса не записывался в реферальный.

Раздельный referral и organic

Как настроить полноценный учет органического трафика в Google Analytics

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

Добавить «реферальный» трафик из go.mail.ru

В настройках Google Analytics на вкладке «Фильтры» нужно нажать кнопку «Добавить

фильтр», задать ему название и выбрать тип: «Пользовательский» — «расширенный»

Заполнить по порядку источник — ^go.mail.ru$, канал кампании — referral и канал кампании — organic.

Выбор типа фильтра

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

Почитать по теме:
Руководство по настройке Google Analytics для новичков: интеграция с рекламными каналами и CRM

Добавить трафик из Яндекса

Настройка аналогична, но поля заполняются по-другому. В типе фильтра «Пользовательский» — «расширенный» нужно заполнить поля по порядку: источник кампании — ^yandex.ru$, канал кампании — referral и канал кампании — organic.

Заполнение полей

Отмечаем галочками такие же пункты и сохраняем фильтр.

После настройки этого фильтра трафик yandex.ru / referral будет записываться в yandex / organic.

Настройка трафика из международного поиска

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

Чтобы настроить их, нужно повторить эту же операции, указав в Источниках кампании соответственно:

^yandex.ua$

^yandex.by$

^yandex.kz$

^yandex.uz$

^yandex.com$

Либо использовать единое регулярное выражение: ^yandex.(ru|ua|by|kz|uz|com)$

На основе справки от Кирилла Терентьева (SEOWORK).

Источник

В статье:

1. 820 тысяч рублей компенсации за 82 фотографии

2. Какие законы защищают авторское право на картинки

3. Как заключать договор с художником или фотографом

4. Что делать, если кто-то взял картинки с вашего сайта

5. Как использовать чужие изображения законно

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

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

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

820 тысяч рублей компенсации за 82 фотографии

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

6 февраля 2017 года Суд по интеллектуальным правам вынес решение. За использование 82 фотографий мебели на сайте интернет-магазина суд постановил выплатить компенсацию в размере 820 000 рублей, то есть по десять тысяч рублей за фото. Компенсацию взыскали совместно и с владельца магазина, и с предпринимателя, который был администратором домена сайта ответчика и выложил эти фотографии.

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

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

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

Юристы выделяют особенности авторского права для картинок и фотографий:

1. Охраняется само изображение, но не идея.

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

2. Художественная ценность не имеет значения.
   Неважно, насколько качественно сделано изображение, имеет значение только творческий вклад. Рисунок пятилетнего ребенка будет охраняться так же как и шедевр известного живописца.
   
   Фото с городской автоматической камеры для поимки нарушителей ПДД авторским правом не охраняется, творческого вклада человека в нем нет. Но если это фотография из фотоловушки для животных, то она попадает под авторское право, даже если фотограф не сам нажал на кнопку. Тем не менее, он выбрал место, ракурс, установил и настроил камеру.
3. Репродукция и переработка без согласия автора незаконны.
   Перерисованное точь-в-точь изображение без согласия автора считается нелегальной копией, а если в нее добавили незначительные изменения — нелегальной переработкой произведения.
   
   В ситуации с фотографиями есть особенности: Эйфелеву башню с одного и того же ракурса фотографируют миллионы людей, но у каждого человека будут свои права на сделанную лично им фотографию. Если вы хотите использовать фото из известного места, но не можете договориться ни с одним из фотографов, то можете приехать на ту же точку, дождаться нужных погодных условий, выбрать аналогичный ракурс и настройки фотоаппарата и сделать собственное фото. У вас будут полные авторские права на этот снимок, и вы сможете использовать его по своему желанию.

«1. Объектами авторских прав являются произведения науки, литературы и искусства независимо от достоинств и назначения произведения, а также от способа его выражения:
<…>
произведения живописи, скульптуры, графики, дизайна, графические рассказы, комиксы и другие произведения изобразительного искусства;
<…>
фотографические произведения и произведения, полученные способами, аналогичными фотографии».
ГК РФ Статья 1259. Объекты авторских прав

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

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

В 2017 году на
Pikabu освещалась история с иллюстрациями: художница Надя Кушнир заявила, что ее комиксы с Гусем перерисовывает Стас Шумаков, который дублирует также и другие комиксы, к примеру, с Крошкой Ши.

Слева иллюстрация Стаса, справа Нади

Поддержка ВКонтакте не применила никаких санкций, Facebook заблокировал личную страницу Стаса и один из его пабликов про Гуся. О дальнейшем развитии развитии истории или передаче дел в суд информации найти не удалось.

Слева иллюстрация Гуся, справа Крошки Ши

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

Кому принадлежат права на изображения

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

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

1. Личные неимущественные права.
   Это авторство, права создателя изображения. Продать эти права и указать автором другого человека нельзя.
2. Право следования.
   Каждый раз, когда оригинал произведения — фотографии, скетча или иллюстрации перепродается с участием юридического лица, художник имеет право получить процент от цены продажи. Размер процента зависит от цены перепродажи, например, при цене менее 100 тыс рублей художнику положено 5%. Право на получение процента принадлежит только самому художнику и его наследникам, передать его другому лицу нельзя. 
3. Исключительные права на использование иллюстрации или фото.
   Право размещать в интернете, печатать в газетах и журналах, показывать на выставках, продавать в банках изображений, перерисовывать, делать и продавать мерч с такими изображениями и другое. Эти права можно продать, в договоре указывайте конкретные способы использования изображений. 

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

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

Художник Дмитрий Шорин сначала продал свою картину «Пулково не принимает» и все права на нее музею «Эрарта», а затем написал новую очень похожую картину и начал продавать принты нового полотна на своем сайте. Суд решил, что права музея нарушены, обязал художника удалить картину со своего сайта и выплатить музею 50 000 рублей компенсации.

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

Как заключать договор с художником или фотографом

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

Укажите в договоре передачу нужных вам прав

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

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

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

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

«По договору об отчуждении исключительного права на произведение автор или иной правообладатель передает или обязуется передать принадлежащее ему исключительное право на произведение в полном объеме приобретателю такого права».
ГК РФ Статья 1285. Договор об отчуждении исключительного права на произведение
«1. По лицензионному договору одна сторона — автор или иной правообладатель (лицензиар) предоставляет либо обязуется предоставить другой стороне (лицензиату) право использования этого произведения в установленных договором пределах».
ГК РФ Статья 1286. Лицензионный договор о предоставлении права использования произведения

Обратите внимание на ретушь фотографии

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

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

«1. Переводчику, а также автору иного производного произведения (обработки, экранизации, аранжировки, инсценировки или другого подобного произведения) принадлежат авторские права соответственно на осуществленные перевод и иную переработку другого (оригинального) произведения.
<…>
6. Авторские права на перевод, сборник, иное производное или составное произведение не препятствуют другим лицам переводить либо перерабатывать то же оригинальное произведение, а также создавать свои составные произведения путем иного подбора или расположения тех же материалов».
ГК РФ Статья 1260. Переводы, иные производные произведения. Составные произведения

Что делать, если кто-то взял картинки с вашего сайта

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

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

Нужен ли копирайт или водный знак

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

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

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

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

Кадр из фильма «Большие глаза», реж.Тим Бертон, 2014 год

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

Что делать, если картинки с сайта украли

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

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

О размерах компенсаций указано в
Статье 1301 Гражданского кодекса РФ об ответственности за нарушение исключительного права на произведение.

Алгоритм действий такой же, как при
копипасте текстов:

1. Зафиксируйте нарушение.
   Например, проведите нотариальный осмотр сайта, многие нотариусы предлагают такую услугу.
   
2. Предъявите нарушителю претензию.
   Часто можно решить вопрос по договоренности до суда.
3. Обратитесь за защитой своих прав.
   Если договориться не получается или жалобу игнорируют, обращайтесь в суд за возмещением убытков, в Роскомнадзор за блокировкой сайта и в полицию для привлечения к уголовной ответственности, если вам нанесли ущерб в крупном или особо крупном размере.

Как доказать свое авторство на иллюстрации или фото

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

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

Если взяли ваши личные фото

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

Пользователь обнаружил свое фото на бирже под чужим именем

Общее правило — использовать изображение человека можно только с его согласия. Три исключения, когда разрешение не нужно:

• изображение используется в публичных интересах: государственных, общественных, к примеру, в новостном сюжете или на стенде «Их разыскивает полиция»;
• фотография сделана на публичном мероприятии, причем фотографировали не конкретного человека, а толпу;
• человек позировал за плату, например, был моделью в рекламной съемке.

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

Такое согласие не требуется в случаях, когда:

1) использование изображения осуществляется в государственных, общественных или иных публичных интересах;
2) изображение гражданина получено при съемке, которая проводится в местах, открытых для свободного посещения, или на публичных мероприятиях (собраниях, съездах, конференциях, концертах, представлениях, спортивных соревнованиях и подобных мероприятиях), за исключением случаев, когда такое изображение является основным объектом использования;
3) гражданин позировал за плату».
ГК РФ Статья 152.1. Охрана изображения гражданина

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

«2. Изготовленные в целях введения в гражданский оборот, а также находящиеся в обороте экземпляры материальных носителей, содержащих изображение гражданина, полученное или используемое с нарушением пункта 1 настоящей статьи, подлежат на основании судебного решения изъятию из оборота и уничтожению без какой бы то ни было компенсации.
3. Если изображение гражданина, полученное или используемое с нарушением пункта 1 настоящей статьи, распространено в сети «Интернет», гражданин вправе требовать удаления этого изображения, а также пресечения или запрещения дальнейшего его распространения».
ГК РФ Статья 152.1. Охрана изображения гражданина

Как использовать чужие изображения законно

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

Где лучше брать фото или картинки

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

Выбор лицензии в выдаче Google

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

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

Указание лицензии на стоке pixabay.com

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

Фрагмент из лицензии CC0 Creative Commons

Стоки не дают 100% гарантии: на самом деле никто не знает, действительно ли автор залил картинку на фотосток, поэтому рекомендую связаться с автором фотографии, если он указан, сделать поиск по картинке в Google или Яндекс и посмотреть, не фигурирует ли то же изображение на другом сайте с указанием другого автора.

Фрагмент лицензии стока freestockimages.ru

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

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

Когда можно не спрашивать согласие автора

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

Создание пародий и карикатур

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

Цитирование с обязательным указанием автора или источника

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

В 2017 году Верховный суд РФ признал правомерным цитирование 22 фотографий авторства блогера Ильи Варламова, которые архитектурный сайт использовал для иллюстрации своего обзора блогов. Сайт процитировал фотографии с информационной целью и указал авторство, а значит нарушения не было.

Цитирование фотографий и указание их авторства на сайте varlamov.ru

«1. Допускается без согласия автора или иного правообладателя и без выплаты вознаграждения, но с обязательным указанием имени автора, произведение которого используется, и источника заимствования:
1) цитирование в оригинале и в переводе в научных, полемических, критических, информационных, учебных целях, в целях раскрытия творческого замысла автора правомерно обнародованных произведений в объеме, оправданном целью цитирования, включая воспроизведение отрывков из газетных и журнальных статей в форме обзоров печати;
2) использование правомерно обнародованных произведений и отрывков из них в качестве иллюстраций в изданиях, радио- и телепередачах, звуко- и видеозаписях учебного характера в объеме, оправданном поставленной целью».
ГК РФ Статья 1274. Свободное использование произведения в информационных, научных, учебных или культурных целях

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

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

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

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

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

Использование мема с Пикачу в группе в ВКонтакте BURGER KING® Russia

Как использовать скриншоты сайтов

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

В одной из статей PR-CY использовали скриншот главной страницы сайта в качестве иллюстрации и поставили подпись из серии «Пример интерфейса на главной». В редакцию обратился директор маркетингового агентства, команда которого разрабатывала сайт от дизайна до программирования. Директор попросил убрать скриншот, аргументировав тем, что это часть портфолио агентства. Редакция PR-CY заменила иллюстрацию.

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

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

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

ГК РФ Статья 1259. Объекты авторских прав

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

ГК РФ Статья 1274. Свободное использование произведения в информационных, научных, учебных или культурных целях

ГК РФ Статья 1285. Договор об отчуждении исключительного права на произведение

ГК РФ Статья 1286. Лицензионный договор о предоставлении права использования произведения

ГК РФ Статья 1291. Отчуждение оригинала произведения и исключительное право на произведение

ГК РФ Статья 1292. Право доступа

ГК РФ Статья 1293. Право следования

ГК РФ Статья 152.1. Охрана изображения гражданина

ГК РФ Статья 1301. Ответственность за нарушение исключительного права на произведение

УК РФ Статья 146. Нарушение авторских и смежных прав

Другие части цикла:
Как защитить авторские права на текст
Как закон защищает авторское право на программу
Что делать, если сайт украли, и как правильно заказать разработку сайта

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

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

Источник

В статье:

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 оценит скорость и покажет страницы, на которых не работает сжатие.

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

Использовать минификацию 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. Уменьшайте количество цветов.
   Изображения, где нет сложных градиентов, требуют меньшего количества цветов. Можно оптимизировать картинку без потери качества, выбрав палитру меньше, тогда изображение будет хранить меньшее количество битов на пиксель.

Слева направо: 32 бита (16M цветов), 7 бит (128 цветов), 5 бит (32 цвета)

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

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

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

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

Источник

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

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

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

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

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

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

Источник