Av4 us что это такое

Новый кодек AV1: ускоряем загрузку видео в браузере

В этом руководстве мы научимся использовать видео в Вебе, как это принято в 2019. Chrome и Firefox начали поддерживать новый кодек AV1 — для них видео можно сделать в два раза меньше.

Отдельно поговорим, как заменить GIF на видео в AV1 и H.264 — тогда его размер упадёт в 20-40 раз.

YouTube уже использует его в TestTube. Netflix заявил, что AV1 будет «их основным кодеком следующего поколения».

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

Кодеки и контейнеры

Узрите AV1

AV1 — видео-кодек, который был выпущен год назад, в марте 2018. Его создавали, чтобы превзойти кодеки предыдущего поколения — HEVC, VP9, H.264 и VP8.

Диаграмма поколений кодеков от Цахи Левент-Леви

Если вам стало интересно, как именно AV1 удалось превзойти остальные кодеки в сжатии, почитайте технические подробности в переводах на Хабре:
«Видео следующего поколения: представляем AV1»
«Кодек нового поколения AV1: корректирующий направленный фильтр CDEF»

За счёт новых оптимизаций, AV1 сжимает видео на 30—50% лучше, чем H.264 или VP8, и до 30% лучше, чем HEVC. Но кодек был выпущен недавно и пока имеет несколько детских болезней:

Сравнение качества картинки у разных кодеков на разном битрейте — AV1 выигрывает

Готовим AV1 правильно

Давайте, наконец-то, перейдём к практике. Вначале определимся с контейнером. В теории, AV1 можно поместить в разные контейнеры, но MP4 компактнее и рекомендуется в спецификации. Для звука в AV1 мы возьмём Opus, потому что отлично сжимает звук.

Чтобы видео работало во всех браузерах, мы будем генерировать 3 файла:

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

Если исходного видео-файла нет, то можно сконвертировать старый H.264 файл в AV1.

Теперь пришло время для конвертации AV1 — напоминаю, будет дольше H.264. Кодек пока не использует всю мощь процессора (имеет смысл запустить конвертацию нескольких файлов параллельно).

Теперь то же самое для HEVC.

Разбираемся с опциями FFmpeg

Команды выше выглядят как заклинание вызова демона? Не волнуйтесь, это не PostCSS. Давайте разберём опции.

-i SOURCE.mov указывает входящий файл, откуда FFmpeg возьмёт потоки видео и аудио, пережмёт их и запакует в новый контейнер.

-c:v libaom-av1 выбирает видео-кодек — библиотеку, которая сожмёт кадры видео-потока.

-crf 34 — Constant Rate Factor, баланс качества и размера. Это как слайдер качества JPEG, только он идёт в другом направлении (0 — лучшее качество и самый большой файл). Шкала CRF разная у H.264 и AV1 — у H.264 идёт до 51, у AV1 до 61. CRF для AV1 и H.264 будет разный.

Facebook подобрал примерное соответствие между значениями CRF для H.264 и AV1:
19 → 27, 23 → 33, 27 → 39, 31 → 45, 35 → 51, 39 → 57.

-preset veryslow заставляет H.264 и HEVC кодеки сжимать файл сильнее даже ценой резкого роста времени конвертации.

-profile:v main используется у H.264, чтобы выбрать профиль кодека. Только «Main» будет работать в Safari.

-b:v 0 выставляет минимальный битрейт для AV1, чтобы в видео было постоянное качество.

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

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

-vf «scale=trunc(iw/2)*2:trunc(ih/2)*2» изменит размер сторон видео к ближайшим чётным (некоторые кодеки могут работать с разрешением 300×200 и 302×200, но не будут работать с 301×200). Если вы уверены, что везде разрешение делится на 2 — можете убрать эту опцию.

-strict experimental нужна для AV1, его кодер ещё экспериментальный.

video.av1.mp4 выставляет имя итогово файла.

Запускаем видео в браузерах

похожи на выражения if…else — браузер читает их сверху вниз, пока не найдёт тот, чей type он поддерживает.

В type можно указать весь формат файла: контейнер ( video/mp4 для MP4), видео-кодек ( av01.0.05M.08 для AV1, hevc для HEVC и avc1.4D401E для H.264) и аудио-кодек ( opus для Opus и mp4a.40.2 для AAC).

Бонус: как сконвертировать GIF в AV1 и H.264

В 2019 использовать GIF для коротких видео — большой грех. GIF весит в 20—40 раз больше, чем H.264 или AV1. GIF сильнее бьёт по CPU, заставляет аккумулятор утекать быстрее. Если вам нужно короткое зацикленное видео, берите видео-кодеки. И FFmpeg может конвертировать видео прямо из GIF.

Конвертируем GIF в H.264:

Генерируем ещё более маленький AV1:

Теперь вставим animation.h264.mp4 и animation.av1.mp4 в HTML.

Опции autoplay и loop делают из видео «гифку» — цикленное видео, которое сразу играет после загрузки страницы. playsinline блокирует Safari от открытия видео на весь экран при клике на видео.

Источник

Анализ сайта Av.av4.xyz

Рейтинг

Отлично! Наш бот получил доступ к вашему сайту!

Информеры и кнопки для av.av4.xyz

Поисковые системы

Индекс качества сайта — это показатель того, насколько полезен ваш сайт для пользователей с точки зрения Яндекса. ИКС рассчитывается для сайтов, которые участвуют в результатах поиска Яндекса. Значение индекса регулярно обновляется. При расчете индекса качества учитываются размер аудитории сайта, степень удовлетворенности пользователей, уровень доверия к сайту со стороны пользователей и Яндекса, а также другие критерии. Для расчета используются данные сервисов Яндекса.

Знаки помогают пользователям ориентироваться в результатах поиска. Для каждого знака есть свои критерии, которым должен соответствовать сайт. Например, знак «Популярный сайт» получают сайты с высокой посещаемостью и постоянной аудиторией.

Для направления заявки о разблокировке нужно отправить письмо на: zapret-info@rkn.gov.ru

Проверка ограничения доступа к сайтам и (или) страницам сайтов сети «Интернет»

Для направления заявки о разблокировке нужно отправить письмо на: zapret-info@rkn.gov.ru

Проверка ограничения доступа к сайтам и (или) страницам сайтов сети «Интернет»

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

Примерно так выглядит сайт на странице выдачи ПС Google

Примерно так выглядит сайт на странице выдачи ПС Яндекс

Позиции сайта

G o o g l e

Запросов в ТОПе G o o g l e

Я ндекс

Запросов в ТОПе Я ндекса

История видимости в ПС

Ссылки на сайт

Степень доверия поисковой системы к сайту. Рассчитывается по алгоритму, аналогичному Page Rank, но учитывает только ссылочный граф между доменами.
Аналитика MegaIndex
Расширенный анализ сайта
Заказать выгрузку всех ссылок из MegaIndex

Трафик, SMM

Alexa Rank – рейтинговая система оценки сайтов, основанная на подсчете общего количества просмотра страниц и частоты посещений конкретного ресурса. Alexa Rank вычисляется исходя из показателей за три месяца. Число Alexa Rank – это соотношение посещаемости одного ресурса и посещаемости прочих Интернет-порталов, поэтому, чем ниже число Alexa Rank, тем популярнее ресурс.

Alexa Rank для рунета не является таким важным, значимым и известным показателем продвижения, как например Яндекс ИКС, но тем не менее он учитывается многими рекламодателями при принятии решения о размещении или не размещении рекламы на вашем проекте.

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

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

Поиск рекламы идет только на главной странице сайта.

Номер счетчика Яндекс Метрики

«Яндекс.Метрика» — бесплатный интернет-сервис компании Яндекс, предназначенный для оценки посещаемости веб-сайтов и анализа поведения пользователей. На данный момент Яндекс.Метрика является третьей по размеру системой веб-аналитики в Европе. «Яндекс.Метрика» стала общедоступной 24 апреля 2009 года.

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

Количество страниц, просмотренных посетителем во время визита.

Доля посетителей, предположительно являющихся роботами.

Доля визитов и хитов, совершенных с мобильных устройств.

Доля посетителей мужчин и женщин.

LiveInternet.ru — интернет-портал, собравший в 2003 году воедино счётчик статистики rax.ru и сервис дневников li.ru

Конкуренты сайта

SEO аудит

Ключевые слова в контенте

Длина: 9 символов

Оптимальная длина для мета тега Title от 70 до 80 символов

Длина: 0 символов

Оптимальная длина для тега Description от 70 до 160 символов

Не желательно использовать повтор слов в заголовке

Лучше не делать заголовки более 12-ти слов.

Размер страницы не должен превышать 100 Кб, его необходимо уменьшать в разумных пределах, удаляя не информативный контент.
Оптимальным считается размер документа 30-40 Кб.

Мы настоятельно рекомендуем использовать кодировку UTF-8

Желательно не использовать устаревшие теги на странице

Open Graph Protocol представляет собой микроразметку от Facebook, которая в 2010 году была разработана для того, чтобы интегрировать веб-сайты с соц. сетью. Сейчас данный формат используется в Twitter, Google+, Вконтакте, Одноклассники, Pinterest и т.д. С помощью протокола Open Graph можно управлять представлением контента в социальных медиа, тем самым улучшая его взаимодействие с пользователями. Например, мы можем определить, название, описание и фото, которое будет отображаться на странице в социальной сети и определить тип контента.

Schema.org — это совместная инициатива по разработке единой схемы для семантической разметки в HTML5. Инициатива была запущена второго июня 2011 года создателями крупнейших поисковых систем — компаниями Google, Yahoo! и Microsoft, а первого ноября 2011 года к ней присоединилась российская компания Яндекс.

Тег H1 желательно использовать только один раз на странице.

HTML теги h1, h2, h3, h4, h5, h6 — это шесть заголовков показывающих относительную важность блока после заголовка в зависимости от уровня заголовка h1, h2, h3 и т.д. Тег h1 — заголовок первого уровня, тег h2 — второго, тег h3 — третьего, тег h6 — наименее значимый заголовок из всех. Заголовок h1 — второй по важности для SEO сайта элемент на странице после тега title (заголовка страницы) и самый важный тег из всех тегов H.

Не рекомендуется иметь на одной странице более 3 внешних индексируемых ссылок.

Не рекомендуется иметь на одной странице более 100 внутренних ссылок.

Рисунки должны обязательно быть с атрибутом Alt. И процент рисунков с Alt должен быть не меньше 80%

W3C разрабатывает для Интернета единые принципы и стандарты (называемые «рекомендациями», англ. W3C Recommendations), которые затем внедряются производителями программ и оборудования. Таким образом достигается совместимость между программными продуктами и аппаратурой различных компаний, что делает Всемирную сеть более совершенной, универсальной и удобной.

Миссия W3C: «Полностью раскрыть потенциал Всемирной паутины, путём создания протоколов и принципов, гарантирующих долгосрочное развитие Сети».

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

Обязательно следите за тем, чтобы ваш домен был продлен. Иначе вы можете его потерять навсегда.

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

Иногда поисковые системы могут сайты на доменах www.domain.ru и domain.ru принять за разные и индексировать как два отдельных сайта. Но для большей эффективности стоит склеить их.

В середине 2014 года Google объявил о появлении нового фактора, влияющего на позиции веб-сайта в поисковой выдаче – использование протокола HTTPS. Было заявлено, что если использовать протокол HTTPS, для сайта будут доступны существенные бонусы ранжирования в виде преимущества перед теми, кто его не использует. При этом в официальном объявлении делался упор на заботу Google о безопасности пользователей во время посещения интернета.

Файл robots.txt – это текстовый файл, находящийся в корневой директории сайта, в котором записываются специальные инструкции для поисковых роботов. Эти инструкции могут запрещать к индексации некоторые разделы или страницы на сайте, указывать на правильное «зеркалирование» домена, рекомендовать поисковому роботу соблюдать определенный временной интервал между скачиванием документов с сервера и т.д.

Sitemaps — XML-файлы с информацией для поисковых систем (таких как Google, Яндекс, Bing, Поиск@Mail.Ru) о страницах веб-сайта, которые подлежат индексации. Sitemaps могут помочь поисковикам определить местонахождение страниц сайта, время их последнего обновления, частоту обновления и важность относительно других страниц сайта для того, чтобы поисковая машина смогла более разумно индексировать сайт. Использование протокола Sitemaps не является гарантией того, что веб-страницы будут проиндексированы поисковыми системами, это всего лишь дополнительная подсказка для сканеров, которые смогут выполнить более тщательное сканирование сайта

Желательно исключить использование фремов на странице

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

Юзабилити

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

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

Избегайте переадресаций на целевых страницах.

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

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

Сжатие HTML-кода (в том числе встроенного кода JavaScript или CSS) позволяет сократить объем данных, чтобы ускорить загрузку и обработку.

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

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

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

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

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

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

Мобильность

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

Нужно отказаться от старых технологий.

Желательно отказаться от Java-апплетов.

Желательно отказаться от Silverlight-плагинов.

Безопасность

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

Желательно скрыть данную информацию в заголовках сервера.

Желательно скрыть данную информацию в заголовках сервера.

Желательно скрыть данную информацию в заголовках сервера.

Желательно скрыть данную информацию в заголовках сервера.

Желательно скрыть данную информацию в заголовках сервера.

Желательно скрыть данную информацию в заголовках сервера.

Заголовок X-XSS-Protection может предотвратить некоторые XSS-атаки («межсайтовый скриптинг»), он совместим с IE 8+, Chrome, Opera, Safari и Android.

Google, Facebook, Github используют этот заголовок, и большинство консультантов по предупреждению проникновений порекомендуют Вам его использовать.

Заголовок X-Frame-Options позволяет снизить уязвимость вашего сайта для кликджекинг-атак. Этот заголовок служит инструкцией для браузера не загружать вашу страницу в frame/iframe. Не все браузеры поддерживают этот вариант

Аналогично механизму браузеров блокировки стороннего контента Adobe Flash имеет свой. Он регулируется файлами crossdomain.xml сайта, начиная с корневого каталога. Проблема с механизмом в том, что на любом уровне вложенности корневой регулирующий файл (политика безопасности) может быть переопределен. Чтобы избежать таких ситуаций, необходимо задать этот HTTP-заголовок

Заголовок Strict-Transport-Security запрещает использование незащищенного (HTTP) соединения на сайте, если есть защищенное (HTTPS). Таким образом, все данные пользователей сайта будут защищены в любом случае

Источник