[{"data":1,"prerenderedAt":420},["ShallowReactive",2],{"blog-article-/blog/nuxt-lite-youtube-embeds":3,"blog-surround-/blog/nuxt-lite-youtube-embeds":411},{"id":4,"title":5,"body":6,"canonical":395,"date":396,"description":397,"extension":398,"featured":399,"image":400,"meta":401,"navigation":402,"ogImage":395,"path":403,"provider":404,"published":399,"seo":405,"stem":406,"tags":407,"url":395,"__hash__":410},"blog/blog/nuxt-lite-youtube-embeds.md","Lite YouTube Embeds",{"type":7,"value":8,"toc":383},"minimark",[9,13,18,21,28,31,37,41,48,52,55,59,62,65,69,76,80,83,89,93,96,102,106,116,119,126,152,158,196,209,223,229,256,262,313,317,328,335,342,345,349,379],[10,11,12],"p",{},"We normally like to add YouTube embeds to our site so that users can easily click on a video and just watch it right there in your site and it is up to them if they want to watch in full screen or watch direct in YouTube itself. But when you have a page with lots of YouTube videos it can negatively affect performance. I have such a page where I load all the interviews and as I have done quite a lot of them the page takes a few seconds to fully load those videos.",[14,15,17],"h2",{"id":16},"lighthouse-tests-with-iframe","Lighthouse Tests with iframe",[10,19,20],{},"For those of you who regularly run a lighthouse test you might have come across this warning:",[10,22,23],{},[24,25],"img",{"alt":26,"src":27},"lighthouse test facade warning","https://res.cloudinary.com/debsobrien/image/upload/f_auto,q_auto/v1611938884/debbie.codes/blog/Screenshot_2021-01-29_at_10.37.43_meeyhu.png",[10,29,30],{},"Also you will see when testing on mobile how this page which has many YouTube embeds was giving a poor performance score with the Largest Contentful Paint of 8.8 seconds and time to interactive of 6.3 seconds.",[10,32,33],{},[24,34],{"alt":35,"src":36},"lighthouse test scores","https://res.cloudinary.com/debsobrien/image/upload/f_auto,q_auto/v1611939169/debbie.codes/blog/Screenshot_2021-01-29_at_16.34.14_jcv8ok.png",[14,38,40],{"id":39},"performance-tab-with-iframe","Performance Tab with iframe",[10,42,43,44],{},"And if we investigate a little further we can see in the Performance tab how long it is taking for the video frame to load meaning our user is getting this black empty box for quite a while until the video is ready. ",[24,45],{"alt":46,"src":47},"Chrome performance test","https://res.cloudinary.com/debsobrien/image/upload/c_scale,f_auto,q_auto,w_1400/v1611938884/debbie.codes/blog/Screenshot_2021-01-29_at_16.36.35_fa339w.png",[14,49,51],{"id":50},"solution","Solution",[10,53,54],{},"Did you know that third-party embeds can be lazily loaded on interaction? A facade is used in place of the third-party content until the user actually interacts with it.",[14,56,58],{"id":57},"whats-a-facade","What's a facade?",[10,60,61],{},"A facade is a static element which looks like the actual embedded third-party but it is not functional which makes it much quicker to load. In this case it's basically just an image that looks like a YouTube video.",[10,63,64],{},"Instead of adding the third-party embed direct in our HTML, we load the page with a static element that looks similar to it and once the user interacts with this facade by placing their mouse over it, it then preconnects to the third-party resource and when the user clicks it replaces itself with the third-party product, in this case the actual video.",[14,66,68],{"id":67},"lighthouse-tests-with-a-facade","Lighthouse Tests with a facade",[10,70,71,72],{},"Running a Lighthouse test using a facade we can see a huge difference especially in our Largest Contentful Paint which is in orange instead of red and with 3.8 seconds versus 8.8 seconds from the previous test. Also the time to Interactive has dropped from 6.3s to 3.3s and is now in green. This is a massive increase in performance with very little work needed. ",[24,73],{"alt":74,"src":75},"Lighthouse test scores","https://res.cloudinary.com/debsobrien/image/upload/c_scale,f_auto,q_auto,w_1400/v1611939855/debbie.codes/blog/Screenshot_2021-01-29_at_18.03.19_tlqdpj.png",[14,77,79],{"id":78},"performance-tab-with-a-facade","Performance Tab with a facade",[10,81,82],{},"And if we check in our performance tab in the Chrome dev tools we can see how our image for our video has loaded so much earlier in the timeline and the total blocking time is also reduced from 1366ms to 567ms.",[10,84,85],{},[24,86],{"alt":87,"src":88},"Chrome performance tab","https://res.cloudinary.com/debsobrien/image/upload/c_scale,f_auto,q_auto,w_1400/v1611939855/debbie.codes/blog/Screenshot_2021-01-29_at_18.03.52_yuqsr3.png",[14,90,92],{"id":91},"watch-the-difference","Watch the difference",[10,94,95],{},"In order to really see the difference in load times you just have to watch this video which shows the YouTube videos loaded with an iframe first followed by the YouTube videos loaded with a facade. The difference really is insane.",[10,97,98],{},[24,99],{"alt":100,"src":101},"Difference between iframe and facade","https://res.cloudinary.com/debsobrien/video/upload/f_auto,q_auto/v1611941119/debbie.codes/blog/facade_upiufl.gif",[14,103,105],{"id":104},"lite-youtube-embed-library","Lite YouTube Embed library",[10,107,108,109,115],{},"In order to add a facade to your YouTube videos I recommend the ",[110,111,105],"a",{"href":112,"rel":113},"https://www.npmjs.com/package/lite-youtube-embed",[114],"nofollow"," by Paul Irish.",[10,117,118],{},"The library instructions are pretty easy to follow but If working with Nuxt then here's what you can do:",[120,121,122],"ol",{},[123,124,125],"li",{},"Install the package",[127,128,133],"pre",{"className":129,"code":130,"language":131,"meta":132,"style":132},"language-bash shiki shiki-themes github-light github-dark","yarn add lite-youtube-embed\n","bash","",[134,135,136],"code",{"__ignoreMap":132},[137,138,141,145,149],"span",{"class":139,"line":140},"line",1,[137,142,144],{"class":143},"sScJk","yarn",[137,146,148],{"class":147},"sZZnC"," add",[137,150,151],{"class":147}," lite-youtube-embed\n",[120,153,155],{"start":154},2,[123,156,157],{},"Add the CSS. You can add it to the component you are using directly or to the global styles in the CSS array in the Nuxt config file.",[127,159,164],{"className":160,"code":161,"filename":162,"language":163,"meta":132,"style":132},"language-js shiki shiki-themes github-light github-dark","export default {\n  css: ['node_modules/lite-youtube-embed/src/lite-yt-embed.css']\n}\n","nuxt.config.js","js",[134,165,166,179,190],{"__ignoreMap":132},[137,167,168,172,175],{"class":139,"line":140},[137,169,171],{"class":170},"szBVR","export",[137,173,174],{"class":170}," default",[137,176,178],{"class":177},"sVt8B"," {\n",[137,180,181,184,187],{"class":139,"line":154},[137,182,183],{"class":177},"  css: [",[137,185,186],{"class":147},"'node_modules/lite-youtube-embed/src/lite-yt-embed.css'",[137,188,189],{"class":177},"]\n",[137,191,193],{"class":139,"line":192},3,[137,194,195],{"class":177},"}\n",[120,197,198],{"start":192},[123,199,200,201,204,205,208],{},"Create a plugin that imports the JavaScript for the package. Make sure to add ",[134,202,203],{},".client.js"," to the end of the filename so that it is only loaded client side as this library makes use of the ",[134,206,207],{},"HTMLElement"," which we only have access to in the browser.",[127,210,213],{"className":160,"code":211,"filename":212,"language":163,"meta":132,"style":132},"import 'lite-youtube-embed'\n","plugins/youtube.client.js",[134,214,215],{"__ignoreMap":132},[137,216,217,220],{"class":139,"line":140},[137,218,219],{"class":170},"import",[137,221,222],{"class":147}," 'lite-youtube-embed'\n",[120,224,226],{"start":225},4,[123,227,228],{},"Register the plugin in your Nuxt config file so it can be used across the site.",[127,230,232],{"className":160,"code":231,"filename":162,"language":163,"meta":132,"style":132},"export default {\n  plugins: ['~/plugins/youtube.client.js']\n}\n",[134,233,234,242,252],{"__ignoreMap":132},[137,235,236,238,240],{"class":139,"line":140},[137,237,171],{"class":170},[137,239,174],{"class":170},[137,241,178],{"class":177},[137,243,244,247,250],{"class":139,"line":154},[137,245,246],{"class":177},"  plugins: [",[137,248,249],{"class":147},"'~/plugins/youtube.client.js'",[137,251,189],{"class":177},[137,253,254],{"class":139,"line":192},[137,255,195],{"class":177},[120,257,259],{"start":258},5,[123,260,261],{},"Use the element where ever you want and just change the videoid for your video and the playlabel for whatever you want it to be. You can also add params for start times etc",[127,263,266],{"className":160,"code":264,"filename":265,"language":163,"meta":132,"style":132},"\u003Clite-youtube\n  videoid=\"ogfYd705cRs\"\n  playlabel=\"Play: Keynote (Google I/O '18)\"\n  params=\"controls=0&start=10&end=30&modestbranding=2&rel=0&enablejsapi=1\n/>\n","components/vidoes.vue",[134,267,268,277,288,298,308],{"__ignoreMap":132},[137,269,270,273],{"class":139,"line":140},[137,271,272],{"class":177},"\u003C",[137,274,276],{"class":275},"sj4cs","lite-youtube\n",[137,278,279,282,285],{"class":139,"line":154},[137,280,281],{"class":143},"  videoid",[137,283,284],{"class":170},"=",[137,286,287],{"class":147},"\"ogfYd705cRs\"\n",[137,289,290,293,295],{"class":139,"line":192},[137,291,292],{"class":143},"  playlabel",[137,294,284],{"class":170},[137,296,297],{"class":147},"\"Play: Keynote (Google I/O '18)\"\n",[137,299,300,303,305],{"class":139,"line":225},[137,301,302],{"class":143},"  params",[137,304,284],{"class":170},[137,306,307],{"class":147},"\"controls=0&start=10&end=30&modestbranding=2&rel=0&enablejsapi=1\n",[137,309,310],{"class":139,"line":258},[137,311,312],{"class":147},"/>\n",[14,314,316],{"id":315},"behind-the-scenes","Behind the Scenes",[10,318,319,320,323,324],{},"Your video will now appear on your page and if you inspect the ",[134,321,322],{},"HTML"," you will see the following: ",[24,325],{"alt":326,"src":327},"rendered html from library","https://res.cloudinary.com/debsobrien/image/upload/f_auto,q_auto/v1611942696/debbie.codes/blog/Screenshot_2021-01-29_at_18.50.42_bdctou.png",[10,329,330,331],{},"And as you can see a background image was added, which looks the same as the video, without you even having to create it. This is how a facade works. ",[24,332],{"alt":333,"src":334},"background image","https://res.cloudinary.com/debsobrien/image/upload/f_auto,q_auto/v1611942698/debbie.codes/blog/Screenshot_2021-01-29_at_18.51.18_ifwfgr.png",[10,336,337,338],{},"As soon as the user clicks on the video the famous iframe is loaded and the video plays straight away. The user has no idea you used a facade. All they know is that it loaded super fast and therefore they had a very good user experience. ",[24,339],{"alt":340,"src":341},"html showing iframe","https://res.cloudinary.com/debsobrien/image/upload/f_auto,q_auto/v1611943517/debbie.codes/blog/Screenshot_2021-01-29_at_19.04.47_bhero2.png",[10,343,344],{},"I encourage you to give it a try or at least investigate more about it in the links below.",[14,346,348],{"id":347},"recommended-links","Recommended Links",[350,351,352,359,366,372],"ul",{},[123,353,354],{},[110,355,358],{"href":356,"rel":357},"https://debbie.codes/resources/interviews",[114],"Page using a facade on this site",[123,360,361],{},[110,362,365],{"href":363,"rel":364},"https://web.dev/third-party-facades/",[114],"Third Party Facades from Web.dev",[123,367,368],{},[110,369,371],{"href":112,"rel":370},[114],"Lite YouTube Embed by Paul Irish",[123,373,374],{},[110,375,378],{"href":376,"rel":377},"https://paulirish.github.io/lite-youtube-embed/",[114],"Demo from Paula Irish",[380,381,382],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":132,"searchDepth":154,"depth":154,"links":384},[385,386,387,388,389,390,391,392,393,394],{"id":16,"depth":154,"text":17},{"id":39,"depth":154,"text":40},{"id":50,"depth":154,"text":51},{"id":57,"depth":154,"text":58},{"id":67,"depth":154,"text":68},{"id":78,"depth":154,"text":79},{"id":91,"depth":154,"text":92},{"id":104,"depth":154,"text":105},{"id":315,"depth":154,"text":316},{"id":347,"depth":154,"text":348},null,"2021-01-29","If you are adding YouTube videos to your site you might notice that they can load quite slowly especially when loading iframes. However this is a better way. With this library your YouTube videos will load super fast and your site will be more performant because of it.","md",false,"f_auto,q_auto/v1611939855/debbie.codes/blog/Screenshot_2021-01-29_at_18.03.52_yuqsr3",{},true,"/blog/nuxt-lite-youtube-embeds","cloudinary",{"title":5,"description":397},"blog/nuxt-lite-youtube-embeds",[408,409],"nuxt","performance","5XDF_ImM2bwB8RLspmxVTWh_Tt9O0z8GpFQvh1UhArY",[412,416],{"title":413,"path":414,"stem":415,"children":-1},"Why I Love Nuxt","/blog/why-i-love-nuxt","blog/why-i-love-nuxt",{"title":417,"path":418,"stem":419,"children":-1},"Adding analytics to your Nuxt site","/blog/nuxt-analytics","blog/nuxt-analytics",1790839747838]