Как добавить видео на сайт, чтобы не пострадала скорость загрузки страницы
Как добавить видео на сайт, чтобы не пострадала скорость загрузки страницы
Автор этого кода Alexis Ulrich (ссылка на оригинал в конце статьи).
А сейчас, собственно, сам код с небольшими пояснениями.
В id данного кода необходимо вставить идентификатор вашего видео на YouTube. Где его взять покажу внизу темы.
CSS стили
Создаем в блокноте файл с названием youtube.js и вставляем данный скрипт.
и заливаем в ФМ . Потом вот этот код ставим в низ вашего сайта
Ускорение сайтов: оптимизация подключения видео с YouTube
к.э.н. Лавлинский Н. Е., технический директор ООО «Метод Лаб»
Самым популярным и востребованным видом контента сегодня является видео. Подавляющее большинство видеороликов представлены в виде включаемых элементов какого-либо видеохостинга. Лидером среди видеохостингов является YouTube, который предоставляет свой стандартный виджет плеера в виде iframe для размещения на страницах сайта. Выбор этого метода размещения обычно оправдан и оптимален, так как позволяет достичь корректной работы видеоплеера на любых устройствах и скоростях интернет-каналов.
Но, как часто бывает, достоинства решения не приходят одни. За удобство и отсутствием проблем приходится платить загрузкой большого количества кода и дополнительными подключениями браузера.
Ускорение виджетов YouTube
Сначала разберемся с сутью проблемы: при загрузке страницы мы, помимо необходимых для самой страницы элементов, грузим большое количество JS-кода YouTube (460 Кб в сжатом виде, 1,5 Мб в распакованном). Даже если этот код грузится в асинхронном режиме, мы получаем торможение при отрисовке страницы из-за загрузки CPU и заполненности канала при загрузке кода. Если учитывать мобильные устройства, такое количество JS-кода может серьезно затормозить сайт.
При этом видео не требуется проигрывать сразу же при посещении страницы. Как правило, перед этим видео есть сопроводительный текст, другие элементы, требующие внимания. Получается, что загрузку тяжеловесного плеера можно отложить до момента начала просмотра этого видео. Логично привязать момент загрузки плеера к клику по картинке-заставке для видеоролика. Задержка загрузки плеера не будет критичной для пользователя, потому что он готов к задержке из-за буферизации самого видео.
Реализация
Для реализации отложенной загрузки можно использовать YouTube JS API или jQuery-плагин отложенной загрузки lazyYT.
Использование YouTube JS API позволяет полностью контролировать поведение видео-плеера на странице, но требует довольно сложных манипуляций для использования на сайте.
Второй вариант с lazyYT намного проще в реализации. Для использования нужно скачать и подключить плагин на странице (js- и css-код) с видео (также требуется jQuery).
Далее, вместо получаемого кода iframe вставляем такой элемент:
Параметры, которые требуются для создания плеера передаются в виде атрибутов тега div вида «data-». Например, data-youtube-id – это идентификатор ролика в YouTube, data-parameters – это параметры плеера.
Этот слой получит картинку-миниатюру для видео с YouTube и покажет в виде фона блока. По клику на картинку загрузится обычный плеер и начнётся воспроизведение видео.
Использование такого несложного приёма позволит значительно повысить ощущение скорости сайта у пользователей. Особенно актуально при включении большого количества роликов на одной странице.
К недостаткам указанного решения можно отнести нестабильное поведение YouTube по отношению к миниатюрам видео (заставкам). Плагин, в зависимости от размеров слоя, пытается взять качественную версию картинки, которая может отсутствовать на YouTube. В этом случае на месте заставки мы увидим неказистую заглушку, растянутую до размеров блока. Решить эту проблему можно небольшой модификацией плагина и передавать ему свой адрес картинки (и убрать таким образом необходимость соединения с YouTube до начала воспроизведения).
За профессиональным ускорением сайтов обращайтесь к нам.
Событие после полной загрузки HTML5 видео
Есть HTML страница на которой плавно по таймеру появляются элементы (jQuery):
В верхней части HTML страницы есть видео. Как сделать так, чтобы появление элементов начиналось после 100% загрузки видео HTML5, которое есть на странице?
2 ответа 2
Согласно документации События в медиа (audio, video) объектах, не существует пока событий, которые отправляются после 100% загрузки видео.
Но есть события oncanplaythrough и oncanplay, которые, возможно, вам подойдут:
Оптимизация видео из YouTube и Vimeo
В связи с популярность видео-роликов в интернете, многие сервисы (например, YouTube и Vimeo) дают пользователям возможность размещать видео на своих сайтах. Это очень удобно, но существует одна серьезная проблема: такое размещение часто становится причиной, увеличивающей время загрузки страницы.
Давайте разберем, почему встраиваемое видео вызывает замедление загрузки сайта, и рассмотрим варианты борьбы с этой проблемой, а также плагины к CMS, помогающие решить эту задачу.
Встраиваем видео из YouTube на сайт
Процесс размещения видео из YouTube на странице сайта очень прост: нужно просто открыть видео на YouTube и нажать «Поделиться».
После этого выбираем «HTML-код», и получаем возможность менять размер видео и работать с остальными настройками.
В результате Вы получите кусочек кода, который необходимо вставить на страницу Вашего сайта:
Проблема в том, что внедрение видео с помощью этого кода приводит к тому, что браузер скачивает более 500 КБ файлов Javascript при обращении к странице. И это произойдет даже если пользователь не будет взаимодействовать с проигрывателем видео, встроенным на страницу.
Встраивание нескольких видео
Ситуация, когда на странице расположено более, чем одно видео уже не редкость. Например, отзывы о компании в формате видео или различные видео-инструкции по настройке на странице помощи.
YouTube осуществляет 8 запросов при загрузке нескольких файлов для каждого видео в iframe, поэтому страницы с несколькими встроенными видео загружаются не так быстро из-за этих http-запросов и соответствующих загрузок.
Статический «баннер» на месте видео с YouTube
Решение этой проблемы следующее: получаем статический «баннер» с YouTube и отображаем уже его вместо встроенного видео. При нажатии пользователем кнопки проигрывания видео начинается его показ.
Делается это с помощью следующего Javascript-кода:
Благодаря такому решению время загрузки страницы значительно уменьшается: с 17,38 секунд до 3,6 секунд.
Альтернативное внедрение видео YouTube
Габариты YouTube-видео на странице внедрены в код, что делает проигрыватель неадаптивным, а стандартный код внедрения видео увеличивает время загрузки страницы, в том числе и за счет скачивания дополнительных файлов и множественных запросов.
Однако внедрить видео на страницу можно и другим способом, используя не iframe, а тэг div. При этом размер не указывается, а размещение iframe на странице предусматривается только при клике пользователя на кнопку просмотра видео.
Габариты проигрывателя не указаны, поэтому высота подбирается автоматически, а по ширине он занимает весь родительский контейнер. Если на странице размещается несколько видео, то вставляем несколько тэгов div с различными идентификаторами видео.
После вставляем в шаблон страницы код, который находит все внедренные тэги, заменяя их на миниатюры видео.
Браузеры Safari и Chrome на устройствах iOS и Android блокируют автоматический запуск внедренного видео в целях предотвращения скачивания больших объемов информации по мобильному Интернету. Поэтому данные браузеры проигрывают HTML5 видео только по запросу пользователя.
Готовые решения для CMS
Описанный вариант решения проблемы подходит, если владелец сайта достаточно знает Javascript, чтобы использовать это решение.
Однако изложенный выше алгоритм действий не так легко применить на сайтах с различными популярными CMS, для них существуют иные плагины, способствующие ускорению работы страницы с большим количеством внедренного видео.
Рассмотрим 4 плагина для WordPress, позволяющие загружать видео из YouTube по принципу lazy-load, а именно, не блокируя отображение других составляющих страницы.
Плагин Lazy Load for Videos
Данный плагин производит замену встроенного видео на кликабельную картинку, содержащую превью видео, тем самым ускоряя работу страницы.
Плагин a3 Lazy Load
Данный плагин совместим с WooCommerce и дает возможность загрузки изображений/видео на сайте в режиме lazy-load, а также позволяет исключать изображения/видео из действия плагина по имени класса.
Плагин Lazy Load XT
Быстрый легкий плагин, позволяющий загрузку изображений и видео (а также содержимого iframe-ов) из YouTube или Vimeo в режиме lazy-load.
Плагин WP YouTube Lyte
Плагин, внедряющий на сайт «легкие» элементы вместо полноценных видео. Речь идет об элементах, запускающих проигрыватель видео при клике по ним.
Очевидно, что стандартный путь внедрения на сайт YouTubе-видео с использованием iframe значительно замедляет скорость загрузки страницы, а при размещении нескольких видео влияние данной проблемы возрастает в разы.
Решение этой задачи лежит в использовании предложенного Javascript-кода либо подходящих плагинов для CMS, аналогичных приведенным 4-м плагинам для WordPress.
Как добавить видео на сайт, чтобы не пострадала скорость загрузки страницы
Приветствую. Как известно, при встраивании на страницу ролика с ютуб через стандартную конструкцию вида страница при отрисовке делает порядка 14-ти внешних запросов, что значительно снижает скорость её загрузки.
На примере WordPress:
1. страница без ролика:
2. страница с роликом:
Нашел несколько вариантов оптимизации встраивания ютуб. Интересует мнение SEO-гуру какой вариант будет предпочтительней с точки зрения SEO.
Вариант 1.
Вставка видео обеспечивается кодом
где ХХХХ — идентификатор видео на ютубе.
И на страницу надо добавить скрипт
Ну и надо еще добавить некоторые стили CSS (не буду уже тут приводить). Таким образом фактически видео загружается только при клике на PLAY, что не влияет на скорость отрисовки страницы и создает лишь один дополнительный запрос. Вот результат:
Вариант 2.
Плагин для WordPress https://ru.wordpress.org/plugins/wp-youtube-lyte/
Фактически он делает то же, что и предыдущий вариант, но и добавляет к видео ютуб микроразметку v > Результаты чуть хуже чем в предыдущем варианте, но зато получаем и разметку videoObject microdata. Результат:
Учитывая всё это, сформулирую вопросы:
1. Какой вариант вы считаете более предпочтительным?
2. Важна ли для SEO микроразметка videoObject microdata? Автор плагина утверждает, что она способствует тому, что в выдаче Гугла возле ссылки на страницу в поиске будет отображаться скриншот видео, что повысит CTR страницы в поиске.
Но насколько я понимаю, такая микроразметка при исходном варианте вставке видео через стандартный код ютуб (iframe) отсутствует, соответственно надо ли оно?
3. Поскольку загрузка и проигрывание видео инициируются лишь при клике на нем, а у мобильных браузеров нет функции автовоспроизведения, то мобильным пользователям понадобится дважды кликнуть на видос, чтобы он запустился. Не думаю что это большая проблема (тем более перед видео это можно указать), но как кто думает на этот счет?
11 способов ускорить загрузку страницы, чтобы сохранить посетителей сайта
Креатив на вашем сайте прекрасен. Заголовок и ценностное предложение — очень мощные. Но посетители не дают конверсий. Почему?
Потому что самый опасный убийца конверсий скрывается за сценой. Скорость загрузки зачастую влияет на конверсии сильнее, чем все остальные факторы.
Влияние скорости
Google проводил эксперимент и получил 20% снижение трафика из-за того, что страница с результатами поиска стала грузиться на 0,5 секунды дольше.
Если страница интернет-магазина не загружается за 3 секунды, он рискует потерять половину входящего трафика. В результате, многие известные интернет-магазины загружаются менее, чем за 1 секунду.
Влияние скорости еще более выражено на мобильных устройствах, где ограниченная мощность процессора и прерывающиеся соединения являются обычным делом. Согласно данным, опубликованным Kinsta, 74% людей с мобильными устройствами уйдут со страницы, если она не загружается за 5 секунд.
И это в нашем мире, где пользование интернетом с мобильных устройств начинает обгонять настольные компьютеры и ноутбуки. Какой вывод? А такой — если страница не загрузится быстро, некому будет конвертироваться. Да, ваш заголовок важен. Предложение ценности для клиента должно быть четким. Хорошо бы и вся страница выглядела приятно. Социальное доказательство добавляет уверенности. Но если нет скорости загрузки, все это уже не важно!
Вот как это можно исправить. Обратите внимание, что для выполнения некоторых рекомендаций может потребоваться помощь специалистов.
1. Почистите свой код
Аккуратный код не просто радует глаз вашего разработчика. Он помогает страницам загружаться быстрее. Уменьшение размеров файлов, в особенности, связанных с фронт-ендом, может дать большой эффект. Даже такие простые вещи, как излишние пробелы, переносы строк и избыточные теги, могут повредить скорости загрузки.
Javascript — это круто. Он позволяет вам добавить разные забавные штуки типа хвоста, тянущегося за курсором мыши по экрану (это сарказм!). Часто Javascript может быть совершенно излишним на посадочной странице. То же самое с Ajax и прочими визуальными штуковинами.
Помните про принцип KISS. Если вы сфокусируетесь на простоте, не нужно тратить силы на всякие дополнительные хитрости.
Но если вам позарез нужны ваши очень важные скрипты, то, по крайней мере, загрузите как можно скорее контент, который «выше сгиба» (above the fold), а потом уже все остальное. Это рекомендуемый Google метод.
Определите, как загружаются ваши скрипты, с помощью средства Varvy и поработайте над оптимизацией по результатам.
2. Минимизируйте HTML и CSS
Если вы уверены в своих технических навыках, прочитайте эту статью и поступите, как там сказано.
Если вы сомневаетесь, просто откройте Google PageSpeed Insights, введите свой URL и отправьте результаты разработчику, которому вы доверяете.
3. Примените GZIP-сжатие
Сжатие с помощью GZIP используется для того, чтобы минимизировать запросы к серверу со стороны вашего браузера. Говоря по-простому, GZIP позволяет уменьшить размеры файлов, чтобы ускорить загрузку. Если вам нужно больше подробностей, то в этой статье все расписано.
Используйте GIDNetwork, чтобы посмотреть, как у вас обстоят дела с компрессией на сайте, а также чтобы получить идеи, что можно улучшить.
4. Минимизируйте редиректы
301-редиректы — это стандартная практика SEO, чтобы показать поисковым серверам, что определенная страница была перенесена на другой URL. Это стандартная практика, использующаяся тогда, когда сайты и страницы эволюционируют со временем. 301-редирект помогает избежать несуществующих страниц и ошибок-404.
Проблема в том, что редиректы могут негативно сказываться на скорости. Google рекомендует минимизировать редиректы или отказаться от них, поскольку они приводят к дополнительным переходам по сети. Это может быть проблемой на мобильных устройствах.
Screaming Frog поможет быстро определить все редиректы на вашем сайте. На примере ниже мы видим, что 14% страниц сайта Runnersworld.com содержат редиректы. Упс!
Главное здесь — это покопаться поглубже. Почему здесь эти редиректы? Какую цель они преследуют? В примере выше мы видим множество временных 302-редиректов, которые можно попробовать почистить, чтобы увеличить скорость загрузки. Вот детальное руководство от Varvy на этот счет.
5. Перенесите скрипты
Верьте или нет, но даже место размещения скриптов может влиять на время загрузки. Например, если скрипт статистики и отслеживания расположен «выше сгиба» или в секции лендинга, браузер должен будет сначала скачать его и исполнить, и только уже потом показывать посетителю тот контент, за которым он, собственно, и пришел на сайт.
Не будем даже упоминать, что дублирование скриптов (распространенная ошибка, когда над страницей работают несколько людей) будет замедлять загрузку страницы.
И вам на самом деле нужно иметь пять различных счетчиков статистики и аналитики? Возможно, нет. Если так — попробуйте отказаться от чего-то, что реально не используется в работе.
6. Ограничьте число плагинов WordPress (или другой CMS)
Откройте консоль WordPress и посмотрите, сколько у вас там установлено плагинов за годы работы вашей команды. Наверняка там окажется что-то, что вы уже не используете, либо что-то, что вы установили, чтобы попробовать, но не оказались удовлетворены результатом, но плагин остался и работает.
Возможно, вы сможете отказаться от некоторых плагинов, а какие-то хорошо бы заменить профессиональным кодом от вашего разработчика вместо какой-то заплатки от неизвестного автора.
Собрать целую кучу решений, написанных разными авторами для разных задач, и затолкать это все в один сайт, который становится похожим на Франкенштейна. Это рецепт для катастрофы.
Если вы хотите провести быструю диагностику вашего сайта на WordPress, вам не понравится это предложение, но. Вам надо установить еще один плагин! Plugin Performance Profiler измерит производительность плагинов и их влияние на скорость загрузки, после чего вы сможете принять более обоснованное решение, что оставить, а что выкинуть.
7. Купите нормальный хостинг
Если у вас есть планы когда-то зарабатывать на вашем сайте, как, вероятно, у всех наших читателей, то хостинг за $3 на GoDaddy в этом плохой помощник. Главная проблема в том, что дешевые предложения по хостингу реализованы на разделяемых ресурсах, что означает, что вы делите серверные ресурсы с многими другими сайтами, и высоконагруженные «соседи» могут негативно сказаться на вас.
Это особенно важно для интернет-магазинов, где вы можете внезапно испытать значительный приток трафика, если ваша рекламная кампания, что называется, «удалась».
PCMag подготовил рейтинг хостингов с выделенными серверами.
Если вы сами не рискнете управлять своим сервером, ваше решение — выделенный управляемый хостинг. Провайдеры в этом случае обычно предлагают и дополнительную защиту от внешних угроз, и регулярное резервное копирование на случай каких-то проблем или даже ваших собственных ошибок.
8. Используйте подходящий размер картинок
Требовать от браузеров брать картинку 1200×600 пикселей и подгонять ее под размер экрана на всех устройствах, запрашивающих страницу, это куча лишнего трафика и расходуемой процессорной мощности. В особенности это справедливо для мобильных устройств, где процессоры не так мощны, связь прерывистая, а размер картинки на экране редко больше спичечного коробка.
Используйте размер картинки, подходящий ее размещению — возможно, разные варианты картинок для разных устройств. Если это кажется вам слишком сложным, хотя бы воспользуйтесь встроенными средствами ресамплинга картинок, которыми обладают большинство CMS, например, тот же WordPress.
9. Сжимайте картинки
Следующим шагом должно быть сжатие картинок. Про это часто забывают, а Radware сообщает, что 45% из топ-100 интернет-магазинов не используют сжатые изображения.
Но сжатие картинок может быть едва ли не самым простым действием, которое может дать быстрый результат в плане скорости загрузки. Существует множество бесплатных средств типа TinyJPG или Compressor.io, которые значительно уменьшат размеры файлов. Показанный ниже тест дал 73% сжатия. Умножьте это на все картинки на вашем сайте, и вы поймете огромный масштаб возможного ускорения.
10. Передавайте картинки через CDN
Прибегнуть к использованию сети распространения контента (CDN), это как получить помощь от серверов, расположенных поближе к посетителям сайта. CDN будет доставлять контент с наиболее близких серверов и таким образом сократит время загрузки страницы.
CDN не обязательно должен быть внешним. Существуют сервисы — например, Айри.рф — которые передают весь сайт целиком через CDN, реализуя все преимущества географического приближения сайта к пользователям без изменения кода сайта.
11. Внешний хостинг
Другая возможность — это перенести большие файлы, например, картинки, аудио, видео, на внешние хостинговые платформы, такие как Imgur для картинок или Wistia для видео.
Это может быть не так важно для картинок, а видео и аудио лучше всегда хостить на внешнем сервисе. Использование так называемого rich media растет бурными темпами. По прогнозам, 74% мирового интернет-трафика в 2020 году будет составлять видео.
Внешние платформы для медиа также дают возможности для большего охвата аудитории, а также различные функции для взаимодействия и конверсий. Основатель Wistia Крис Сэведж предлагает еще ряд идей, почему лучше пользоваться внешним хостингом для видео.
Заключение
74% людей уйдут с сайта, если он не загрузился за 5 секунд. Это означает, что вы можете применять лучшие мировые практики в плане оптимизации конверсии. Но если страница не загрузится быстро, это было все зря.
Способы ускорения загрузки вашего сайта могут быть как самыми базовыми (полноценный хостинг и удаление ненужных плагинов), так и более продвинутыми (минимизация кода). Но что бы вы ни сделали, это все равно лучше, чем игнорировать проблему скорости загрузки.
Да, внедрение этих изменений займет много времени, но это даст также шанс вашему сайту выстоять в битве за высокую конверсию.
Мнение редакции может не совпадать с мнением автора. Если у вас есть, что дополнить — будем рады вашим комментариям. Если вы хотите написать статью с вашей точкой зрения — прочитайте правила публикации на Cossa.
Как сделать отложенную загрузку видео?
Зачем делать отложенную загрузку видео?
Когда вы вставляете видео с Yputube, Vimeo, Facebook и других видеохостингов на свои странички – вы замедляете скорость её загрузки и отображения.
Поэтому каждое встроенное видео должно быть с отложенной загркузкой – подгружаться только после того, как вся страница загрузилась и отобразиласт пользователю.
Когда вы делаете отложенную загрузку видеофайлов вы даёте возможность браузеру загрузить более необходимые для отрисовки страницы файлы, увеличиваете скорость сайта в целом. Проблема не в самом видео, а больше замедляете загрузку блокирующий отрисовку javascript, вы можете увидеть это например в GMetrix или Chrome DevToools
Как добавить отложенную загрузку видео
Для этого нам понадобится небольшой и очень простой javascript. Я покажу вам метод, который я использую чаще всего. Для начала разберем html:
Это код видео из ютуба с двумя небольшими изменениями
Первое – убрана ссылка на видео в атрибудет src=””
второе – я добавил ссылку на видео в атрибут data-src
data-src=”//www.youtube.com/embed/OMOVFvcNfvE”
Ну а теперь javascript:
Как использовать отложенную загрузку
- Возьмите код дял вставки любого видео, которое вам нравится
- Измените немного код как указано выше
- Добавьте скрипт на вашу страничку и вставьте видео
Эта штука будет работать для большинства сайтов и не нужны никакие специальные библиотеки
Добавить комментарий Отменить ответ
Быстрый заказ
Я фронт-енд разработчик / верстальщик / программист с небольшим уклоном в сателлитостроение / поисковую оптимизацию. Получаю удовольствие от создания чистых, функциональных и оптиммизированных сайтов. Использую последние технические решения HTML5, CSS3, javascript / jQuery. Прекрасно ориентируюсь в WordPress
Текущий статус: Частично свободен к работе
Отложенная загрузка картинок и видео для ускорения загрузки WordPress
Среднестатистический вес веб-страницы составляет 2406 kB, из которых 75% занимают изображения и видео, согласно с HTTP Archive . Это много для загрузки браузером посетителей веб-страниц, и всё указывает на то, что в будущем размеры веб-страниц будут увеличиваться.
WordPress — самая популярная платформа в области добавления медиафайлов на сайт. С WordPress интегрировать изображения и видео в записи, страницы и даже фон темы — очень просто.
Однако это всё делает сайт тяжёлым, и пользователи должны ждать загрузку больших файлов, включая файлы, которые сразу не видны, до того, как увидят веб-страницу.
Именно тут нужна отложенная загрузка. Отложенная загрузка (Lazy Load, ленивая загрузка) – это метод по оптимизации, который загружает только видимый контент для определенной области монитора, но откладывает загрузку и рендеринг контента, появляющегося ниже, после прокрутки страницы.
Google в восторге от этого метода, вы тоже должны обратить на него внимание, если ваши записи или страницы содержат много встроенных видео и изображений с высоким разрешением.
Как работает отложенная загрузка?
«Ленивая» загрузка работает так:
- Браузер строит DOM веб-страницы, не загружая изображения и видео
- Применяется некий JavaScript, чтобы понять, какие изображения и видео нужно загружать сразу на первом этапе. Это зависит от видимого содержимого в момент загрузки. Эти изображения загружаются как обычно.
- Загрузка и рендеринг дополнительных медиафайлов откладывается до тех пор, пока посетитель сайта не прокрутит страницу вниз и дополнительный контент не отобразится на экране.
В конечном счёте, изображения и видео не загружаются до тех пор, пока они не будут действительно нужны. Это повысит показатели скорости работы сайта, содержащего большое количество изображений с высоким разрешением и встроенных видео.
Отложенная загрузка потенциально повлияет на скорость загрузки вашего сайта, если вы используете много изображений.
Использование отложенной загрузки в wordpress
Как и у многих других сайтов, у WordPress могут возникать проблемы с рабой сайта, но существуют плагины, чтобы это исправить. На самом деле, есть много бесплатных плагинов для отложенной загрузки изображений и видео.
Просмотрев и протестировав десятки плагинов, мы нашли три наилучших. Они существенно улучшают работу сайта. Если вы готовы использовать отложенную загрузку, то обратите на них внимание.
Действительно ли изображения и видео замедляют веб-сайты?
Нам нужна стартовая оценка, чтобы мы видели влияние добавления картинок и видео на скорость загрузки сайта. Не имеет смысла решать проблему, если мы не знаем, в чём её суть.
Для нашего теста мы установили стандартную версию WordPress с темой TwentySixteen – это родная тема, где не используются никакие способы кэширования или плагины по оптимизации.
Вот так Pingdom оценивает скорость нашего сайта перед добавлением изображений или видео.
Как вы видите, страница очень лёгкая, весит меньше 155 kb и загружается менее чем за полсекунды. Трудно придраться к таким оценкам.
Что случится, если мы загрузим на страницу большой файл с изображениями или встроенные видео из YouTube?
Размер страницы увеличился до 1,7 MB, а время загрузки почти утроилось до 1,3 секунды. TwentySixteen – это хорошо написанная, лёгкая тема, поэтому даже с пол дюжиной изображений и видео из YouTube сайт остался лёгким и загружается достаточно быстро. Однако, мы видим, что добавленные изображения и видео заметно увеличили размер и скорость загрузки страницы.
WordPress плагины для отложенной загрузки
Вот три плагина, которые ускоряют загрузка веб-страницы: BJ Lazy Load , Lazy Load XT и a3 Lazy Load . Давайте посмотрим на работу каждого из них.
Мы тестировали и другие плагины, но они не дали значимых результатов. Проводите замеры до и после установки отложенной загрузки, чтобы найти плагин, удовлетворяющий вашим требованиям.
1. BJ Lazy Load
BJ Lazy Load – это очень популярный плагин. Его используют на более 40 000 веб-сайтах WordPress и оценивают на 4,1 из 5 звёзд.
Установка и настройка очень легкие. После активации в меню появится новый пункт в Настройки → BJ Lazy Load . Все параметры отложенной загрузки установлены по умолчанию, и вы скорее всего не будете их менять, если не столкнётесь с какими-то проблемами во фронтенде вашего сайта после активации плагина.
У этого плагина есть одна функция, которая недоступна для двух других, это возможность добавлять URL для изображений и использовать их как папку для отложенной загрузки изображений и видео до тех пор, пока настоящие изображения и видео не загрузятся. Конечно, если вы будете использовать эту функцию, вы будете использовать маленькие файлы, а не изображения в высоком разрешении.
Для лучшего результата мы бы рекомендовали создать изображение того же цвета, как и фон, и сохранить его в формате png.
Вы можете также указать класс HTML, который будет исключён из отложенной загрузки. Вы можете применить это для любого изображения или видео. И наконец, вы можете установить, как близко должно оказаться изображение или видео к окну просмотра для начала загрузки и отображения.
Давайте проверим скорость загрузки нашей страницы с установленным BJ Lazy Load.
Это даже слишком быстро. Мы тестировали сайт дюжину раз на протяжении всего дня, но время загрузки всегда было около 300-400 мс.
Этот блестящий результат — не аномалия.
Хоть страница и загружается очень быстро, её размер увеличился. Как это произошло? В теории, с отложенной загрузкой размер страницы должен уменьшиться, поскольку не все изображения загружаются на начальную страницу.
После некоторых исследований мы кое-что выяснили.
Как WordPress загружает изображения?
По умолчанию, WordPress предоставляет файлы в нескольких размерах браузеру, используя атрибут srcset элемента img для размещения изображения. Браузер просматривает список доступных размеров и загружает самую маленькую версию изображения, которое заполнит свободное пространство.
Это значит, что если вы загрузите очень большое изображение, WordPress автоматически предложить посетителям веб-сайта версии поменьше. Браузер ваших посетителей выберет наименьшее подходящее изображение, в зависимости от доступного количества пикселей.
Как BJ Lazy Load меняет режим работы WordPress?
BJ Lazy Load берет верх над режимом работы WordPress. Атрибут srcset заменяется на атрибут adata-lazy-srcset , который работает в сочетании с сценарием плагина. Однако, в итоге вместо того, чтобы загружать уменьшенную версию изображения, загружается и отображается изображения в высоком разрешении.
Это не идеально, но если вы оптимизируете файлы перед загрузкой на WordPress, вы не столкнётесь с этой проблемой.
Проведите тест – просто загрузите сайт и посмотрите, что случится. Если у вас цвет фона не белый, то нужно будет добавить изображение-заполнитель места. Потому что без него, на месте изображения будет белый gif заполнитель места.
2. Lazy Load XT
Last Load XT хорошо проявил себя во время наших тестов и стоит вашего внимания. Он менее популярен, чем BJ Lazy Load, всего 1000 активных установок, но плагин имеет рейтинг 4,9 из 5. Только один опубликованный отзыв из 22 поставил оценку ниже 5.
После активации плагин можно настроить в меню Настройки → Lazy Load XT . Там вы узнаете о других функциях плагина, кроме отложенной загрузки изображений и видео. Вы можете также использовать этот плагин для уменьшения JS и CSS файлов, загрузки JavaScript и CSS библиотек, используя Cloudflare CDN, и перемещать скрипты в футер сайта.
Есть еще несколько дополнительных параметров для финальной настройки работы сайта. Однако, поскольку мы тестируем только отложенную загрузку, мы не использовали уменьшение или перемещение CSS и JavaScript, мы просто удалили кэш сервера и запустили тест нашей страницы на Pingdom.
Вес страницы составляет 2 MB, скорость загрузки хоть и не такая высокая, как у BJ Lazy Load, но вдвое быстрее, чем без использования отложенной загрузки.
Анализ дерева файлов показал, что в Lazy Load XT идут те же процессы, как и у BJ Lazy Load. Вместо загрузки оптимизированной версии изображения, плагин загружает и отображает изображение с высоким разрешением.
И хотя BJ Lazy Load быстрее, но Lazy Load XT побеждает при визуальном тестировании. В результате, нет пустых белых полей при загрузке изображений и видео. Вам не нужно волноваться о создании и загрузке изображений-заполнителей места.
3. a3 Lazy Load
a3 Lazy Load — еще один популярный выбор в директории плагинов WordPress, он используется на более 10 000 веб-сайтов и получил оценку 4,7 из 5 звёзд.
При активации плагина в меню появляется вкладка Настройки → a3 Lazy Load . Для нашего эксперимента мы не меняли стандартные настройки, кроме одного пункта. Мы использовали параметр Loading Background Color, чтобы сделать заполнители места такими же по цвету, как и фон веб-страницы. С базовыми настройками и одним изменением плагин показал себя очень хорошо.
Мы ускорили загрузку до 488 мс, что впечатляет с тем количеством изображений и видео, которые мы добавили на страницу.
Сравнение результатов
Вы наверняка заметите уменьшение размера страницы и количества запросов. Что стало причиной этих изменений? Pingdom предоставляет снимки состояния размера контента, а сравнив их, мы получим ответ.
Во-первых, вот размер контента с активированным a3 Lazy Load:
Вес изображения совсем небольшой – всего около 150 kb. И BJ Lazy Load, и Lazy Load XT создают страницу весом 2,0 MB. Вот скриншот контента с общим весом 2,0 MB:
Скрипты, HTML, CSS и вес остального контента примерно равны. А вес изображений составляет 1,86 MB. Размер же всей страницы без изображений не превышает 150 kb.
Так что происходит?
Как мы упоминали ранее, WordPress автоматически предлагает варианты размера изображений, а браузер выбирает и отображает наименьший возможный вариант, в зависимости от размера экрана, на который будет выводиться изображение.
BJ Lazy Load и Lazy Load XT отменяют эту функцию и доставляют изображение в высоком разрешении. Однако, a3 Lazy Load сохраняет стандартную функции WordPress без изменений, и в результате отправляются значительно меньшие по размеру изображения.
Интересно, что несмотря на разницу в весе страницы, сайт загружается быстрее с активированным BJ Lazy Load, чем с a3 Lazy Load. Мы протестировали сайт много раз, чтобы убедиться в правильности результатов. Разница состоит в числе HTTP запросов, необходимых для загрузки страницы.
На первый взгляд может показаться, что BJ Lazy Load нужно больше запросов. Но если мы взглянем на дерево файлов, то увидим действительное положение вещей:
С активированным BJ Lazy Load файл сайта включает в себя около 20 запросов, которые начинаются на data:image/gif . Это скорее data URIs, чем HTTP запросы. В сущности, они говорят браузеру создать gif локально, а не запрашивать gif с сервера.
В результате BJ Lazy Load нужно только 17 HTTP запросов для создания страницы, а a3 Lazy Load нужно 27. Это объясняет скорость загрузки страницы.
Lazy Load XT использует похожую тактику, но ему нужно на несколько запросов больше, чем BJ Lazy Load, что объясняет его не такие высокие результаты.
Итоги и рекомендации
Что нам остается? Все три варианта делают отличную работу по повышению скорости загрузки сайта с помощью отложенной загрузки изображений и видео. Выбор плагина зависит от личных предпочтений и того, как вы готовите изображения к загрузке на веб-сайт WordPress.
- Если вы предварительно не оптимизируете изображения перед загрузкой на веб-сайт WordPress, то вам подойдёт a3 Lazy Load , где вы сможете по достоинству оценить встроенный оптимизатор изображений.
- Если вы оптимизируете изображения перед загрузкой и хотите максимально высокой скорости загрузки с наименьшими усилиями, то выбирайте BJ Lazy Load .
- Если вы оптимизируете изображения перед загрузкой и хотите иметь дополнительные параметры конфигурации, то вашим идеальным выбором будет Lazy Load XT .
Отложенная загрузка – это один их способов оптимизации вашего сайта WordPress. И потенциально может влиять на скорость загрузки сайта, даже если вы загрузили очень много изображений и видео.
Источник: kinsta.com
Насколько полезным был этот пост?
Нажмите на звезду, чтобы оценить этот пост!
Средний рейтинг: 4.7 / 5. Количество голосов: 10
Website-create.ru
Если Вы столкнулись с вопросом добавления видео ролика на страницы Вашего сайта или блога, но не знаете, как это сделать, то этот урок для Вас! В данном уроке мы рассмотрим 3 альтернативных способа добавления видео на сайт, и Вы сможете выбрать тот, который понравится Вам больше.
Интернет развивается с каждым днем все больше и больше. Сегодня пользователи хотят не только читать тексты, но также и лицезреть различные графические элементы, разные интерактивные примочки и еще смотреть видео прямо с веб страниц. Во многих случаях это создает дополнительное удобство для пользователя (например, когда он может посмотреть видео-инструкцию) или просто делает его пребывание на веб ресурсе более увлекательным.
Так или иначе, будь то полезное видео с уроком или инструкцией, демонстрационное видео какого-либо продукта или развлекательное видео, призванное скрасить досуг пользователя, рано или поздно появляется необходимость внедрения этого видео в веб страницу.
Есть несколько способов сделать это. Сегодня мы рассмотрим 3 разных способа, которые помогут Вам справиться с этой задачей. Какой из них выбрать – решать Вам. Итак, поехали…
Как вставить видео на сайт
Для того, чтобы тестировать все наши примеры, я создам html-файл, а также подключу к нему кое-какие стили. Ниже приведен код этого файла и код таблицы стилей, которая подключена к html-документу. Также все эти файлы Вы можете найти в исходниках к уроку. Объяснять этот код я здесь не буду, так как он достаточно простой, и я думаю, что Вы и сами в нем прекрасно разберетесь, однако, если что-то будет непонятно, то Вы всегда можете написать в комментариях свой вопрос, и я на него обязательно отвечу.
Итак, код html-файла:
Это просто html5 файл, который содержит в себе несколько заголовков. Далее под каждым из них мы будет размещать соответствующий код.
Я также прописала некоторые стили для этой странички. Они хранятся в файле «style.css», который лежит в том же каталоге, что и html-файл. Содержимое файла «style.css» выглядит следующим образом:
Если открыть наш html-файл в браузере, то сейчас он будет выглядеть так:
Подготовка закончена, давайте перейдем к самой вставке видео на веб страницу.
Первый способ, который мы рассмотрим – это вставка видео при помощи сервиса Youtube.
1. Первое что нам нужно – это иметь какой-то видео-ролик, который мы хотим вставить. Допустим, что он у нас есть и хранится на нашем локальном компьютере.
Теперь переходим на сайт www.youtube.com. Здесь нам нужно нажать на кнопку «Войти», расположенную в верхнем правом углу. После этого нужно произвести вход при помощи Вашего аккаунта Google. Если вдруг у Вас его еще нет, то сначала нужно его завести.
2. После того, как Вы вошли в сервис под своим аккаунтом, нажмите на кнопку «Добавить видео». Сервис предложит Вам выбрать файл для загрузки, и Вы можете выбрать нужный файл, который хранится у Вас на компьютере.
После того, как Вы выбрали нужный файл, он начнет загружаться. Нужно подождать немного, пока он полностью не загрузится.
После того, как видео загрузилось полностью, Вы можете перейти по его ссылке (ее вы можете увидеть вверху, сразу после сообщения о том, что загрузка завершена).
Когда Вы перейдете по данной ссылке, то увидите Ваше видео, размещённое на сервисе Youtube.
3. Теперь нам нужно получить код, для вставки видео на нашу веб страницу. Для этого сразу под видео щелкните по вкладке «Поделиться», а в ней по вкладке «HTML-код».
Теперь Вы можете увидеть html-код, который понадобится нам для вставки. Здесь также можно задать и некоторые другие параметры, такие как: размер видео, показывать ли похожие видео после окончания просмотра и режим конфиденциальности.
Когда Вы настроите все параметры, то можете скопировать код и вставить его в Ваш html-файл. Я вставлю код в файл под соответствующим заголовком следующим образом:
И теперь, если мы посмотрим работу нашего html-файла в браузере, то увидим, что видео вставилось и его можно просмотреть (посмотреть код в действии Вы можете нажав на иконку «Демо» в начале статьи).
Здесь, я думаю, все понятно. Давайте перейдем к следующему способу.
Вставляем видео при помощи скрипта плеера.
Можно вставить видео и не загружая его на какой-либо видеосервис. Если по какой-то причине Вы не хотите загружать видео на сервис, то можно воспользоваться скриптом плеера.
Итак, у Вас должен быть видеоролик, который Вы будете загружать. Допустим, что он хранится в какой-то папке на Вашем сайте. Я сохраню видеофайл в папке с именем «video».
Теперь нам нужен сам плеер. На данный момент существует множество бесплатных плееров, с помощью которых можно вставить видео на сайт. Давайте воспользуемся плеером Flowplayer. Это бесплатный видеоплеер для веб, который разработан специально для владельцев сайтов.
1. Скачайте файлы плеера себе на компьютер нажав вот на эту ссылку: FlowPlayer
2. После того, как Вы скачали файлы плеера на свой компьютер, нужно их разархивировать в какую-либо папку на Вашем сайте. Я создала папку «flowplay» и разархивировала файлы туда.
3. Теперь перейдем в html-файл и займемся кодом.
Первое, что нам нужно сделать это подключить javascript-файл плеера к нашему html-файлу. Для этого внутри тега head, сразу после подключения таблицы стилей пропишите следующий код:
Если Вы размещаете файл в другой папке, то обратите внимание, чтобы путь к файлу был прописан правильно.
4. Теперь перейдем в тело нашего файла и разместим сам плеер с проигрываемым файлом. Я размещу его прямо под соответствующим заголовком, предварительно поместив в тег div, который выровняю по центру.
Здесь Вам нужно будет проверить пути до файлов и прописать свои. Делая это будьте внимательны.
Также здесь выставлены настройки, которые не дают видео запускаться автоматически, однако разрешают его загрузку. Если Вы хотите, чтобы видео запускалось автоматически, то после пути к файлу «flowplayer-3.2.2.swf» следует убрать запятую, закрыть круглую скобку и поставить «;» (без кавычек), а все остальное, что находится после этого и до закрывающего тега «/script» удалить.
Таким образом, если мы проверим страницу в браузере, то увидим, что теперь у нас 2 видео: одно загружается с сервиса youtube, а другое хранится у нас на сайте и загружается при помощи плеера.
Имейте в виду, что видео, загружаемое плеером должно иметь формат .mp4 или .flv.
Давайте опробуем еще один способ и попробуем загрузить тот же самый ролик, который хранится у нас на сервере, но только при помощи новых возможностей HTML5.
1. Найдите третий заголовок и прямо под ним пропишите следующий код:
Если вы откроете страницу в браузере, то увидите, что Ваше видео добавилось под третьим заголовком. Вот так просто! Всего одной строчкой.
Не забудьте проверить путь к видеофайлу, чтобы он соответствовал тому, где Вы его расположили.
Параметр «controls» добавляет панель управления для видео.
Если Вы хотите, чтобы Ваше видео воспроизводилось сразу после загрузки страницы, то нужно добавить параметр «autoplay».
Этот способ отвечает новым стандартам html5 и, я думаю, заинтересует разработчиков, желающих уже сегодня внедрять стандарты будущего.
Однако, здесь есть свои «подводные камни», например, разная поддержка браузерами разных форматов мультимедиа. Данный пример будет замечательно работать во всех новых браузерах, но не в браузере Опера. Чтобы этот код заработал в Опере мы должны конвертировать видео файл в формат «Ogg Theora» и немного поменять код, чтобы дать браузеру альтернативный выбор.
Конвертировать файл можно с помощью сервиса online-convert.com/ . После конвертации сохраните полученный файл в папку «video», а код для вставки видео поменяйте на следующий:
Теперь пример будет работать и в браузере Опера.
Однако, есть еще одна загвоздка, касающаяся старых браузеров, которые не понимают html5-теги. К сожалению, переход к новым стандартам также требует и умения находить обходные решения.
Если для браузера незнаком какой-то тег, то он его просто игнорирует, но при этом не игнорирует содержимое внутри неизвестного ему элемента. Следовательно, мы можем добавить обходное решение прямо в наш тег для вставки видео. Код при этом может выглядеть вот так:
С таким кодом новые версии браузеров успешно обработают наш элемент «video», а если вдруг пользователь откроет страницу при помощи старого браузера, то незнакомый тег «video» будет проигнорирован, но тег «iframe» будет успешно обработан и видео подгрузится с Youtube.
Пожалуй, на этом буду заканчивать. Напоминаю, что все исходные материалы Вы можете скачать, щелкнув по иконке «Исходники» в начале статьи, а посмотреть работу всех трех примеров можно щелкнув по иконке «Демо» там же.
Оставляйте свои комментарии и делитесь этой статьей с друзьями при помощи кнопок социальных сетей. Буду Вам очень признательна.
Также подписывайтесь на обновления блога. Впереди много всего интересного и полезного по теме создания веб сайтов.
Желаю Вам хорошего настроения и успехов в Вашей работе!
Как изменить скорость просмотра видео на любом сайте
Здравствуйте, друзья! Способ, про который я сегодня расскажу в статье позволит Вам с легкостью изменять скорость просмотра видео практически на любом сайте. Естественно, что в первую очередь это касается YouTube, но он легко справляется со своими задачами хоть в ВКонтакте, хоть в FaceBook, да и вообще на любом сайте.
Немного предыстории откуда я узнал об этом способе. В прошлом году я учился в тренинге Академии интернет-профессий №1 на менеджера YouTube. Солидный тренинг с солидной оплатой и еще более солидными знаниями. Все эти знания были изложены в довольно продолжительных видеозанятиях.
И вот тогда, я столкнулся с тем, что в закрытом кабинете тренинга, невозможно как-либо повлиять на скорость воспроизведения видео. Хотя я понимал, что могу увеличить ее минимум в 1,5 раза и при этом нормально воспринимать информацию. Одна из одногруппников дала мне ссылку на расширение Video Speed Controller. Оно абсолютно бесплатное и скачивается из официального магазина приложений Google Chrome (картинка кликабельная).
Сразу после его установки в окне расширений появится значок расширения Video Speed Controller, а на всех видео начнет отображаться значение текущей скорости воспроизведения.
Если навести курсор на окно отображения скорости, то это окно раскроется вправо и на нём будут отображены 5 кнопок для управления воспроизведением и самим расширением.
Каждой кнопке соответствует своя клавиша на клавиатуре компьютера.
Само расширение управляет непосредственно html-проигрывателем, встроенным в браузер. А потому оно будет работать практически на любом сайте, открытом в браузере Google Chrome. Конечно это YouTube, ВКонтакте, Facebook… Список можно было бы продолжить, но отмечу что при просмотре видео в закрытых кабинетах тренингов, которые предоставляются на платформе memberlux и ей подобных, отображается только значение скорости. Дополнительные кнопки при наведении не открываются, но горячие клавиши на клавиатуре вашего компьютера работают как надо.
В этом видео вы можете посмотреть весь процесс вживую. Я постарался сделать запись коротко, но при этом охватить максимум возможности расширения Video Speed Controller.
В заключение хочу отметить, что с помощью расширения можно задавать скорость воспроизведения с дискретностью в 0,1 и практически от нулевого значения до 16-ти кратного увеличения. Тут, возможности Ютуба с его фиксированными значениями по изменению скорости с шагом в 0,25 и максимальным 2-х кратным увеличением, как говорится, рядом не лежали.
Конечно на скорости 16 вы учиться и смотреть не будете, но вы с легкостью можете выбрать оптимальный баланс между воспроизведением и скоростью восприятия информации. Я, например, до такой степени привык смотреть видео в ускоренном режиме, что теперь для меня посмотреть ролик с нормальной скоростью уже стало проблемой. Думаю, что и Вы по достоинству оцените возможности расширения Video Speed Controller и будете применять его в своей практике. Поверьте, это круто!
