к.э.н. Лавлинский М. Я., тэхнічны дырэктар ТАА «Метад лаб»
Самым папулярным і запатрабаваным выглядам кантэнту сёння з'яўляецца відэа. Пераважная большасць відэаролікаў прадстаўлены ў выглядзе ўключаюцца элементаў якога-небудзь відэахостынгу. Лідэрам сярод відэахостынгу з'яўляецца 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 да пачатку прайгравання).
за прафесійным паскарэннем сайтаў звяртайцеся да нас.