[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"\u002Fblog\u002Fowl-carousel-cls-fix":3,"$fnJIo7FqVKHSOQaoaPJJxr1XFjUJpznMr-hCijn5aexk":543,"i-local-icon:calendar-days":546,"i-local-icon:tag":551,"i-local-icon:eye":553},{"id":4,"title":5,"body":6,"categories_slug":531,"comment_count":534,"date_published":535,"description":536,"extension":537,"meta":538,"navigation":147,"path":539,"seo":540,"stem":541,"__hash__":542},"content\u002Fblog\u002F2.owl-carousel-cls-fix.md","Owl Carousel CLS (Cumulative Layout Shift) fix",{"type":7,"value":8,"toc":525},"minimark",[9,13,18,23,36,40,49,52,61,64,67,73,77,80,87,91,94,97,221,230,511,514,521],[10,11,5],"h1",{"id":12},"owl-carousel-cls-cumulative-layout-shift-fix",[14,15],"meta-card",{":categories":16,":date":17},"categories_slug","date_published",[19,20,22],"h2",{"id":21},"overview","Overview",[24,25,26,27,35],"p",{},"Sliders and carousels are an extremely common web component used on many websites these days, for better or worse (to read more about the worse part, a ",[28,29,34],"a",{":target":30,"href":31,"rel":32},"\\_blank","https:\u002F\u002Fthegood.com\u002Finsights\u002Fecommerce-image-carousels\u002F",[33],"nofollow","good article"," here). However, as with many things web development related, if the client insists on having a slider\u002Fcarousel on the home page, as a web developer we have to accommodate that.",[19,37,39],{"id":38},"background","Background",[24,41,42,43,48],{},"Google has announced that from June 2021, they will start to consider “Page Experience” as part of Search ranking, as measured by a set of metrics called ",[28,44,47],{":target":30,"href":45,"rel":46},"https:\u002F\u002Fsupport.google.com\u002Fwebmasters\u002Fanswer\u002F9205520?hl=en",[33],"Core Web Vitals",".",[24,50,51],{},"The Core Web Vitals are a set of three metrics designed to measure the “core” experience of whether a website feels fast or slow to the users, and so gives a good experience.",[24,53,54],{},[55,56],"img",{"alt":57,"className":58,"src":60},"Owl Carousel Image 1",[59],"blog-image","\u002Fimages\u002Fblog\u002Fowl-carousel\u002Fcls-01.jpg",[24,62,63],{},"In this article, we will concentrate on CLS (Cumulative Layout Shift) and how sliders\u002Fcarousels such as Owl Carousel negatively impact CLS scores and provide an easy fix using CSS only.",[24,65,66],{},"As per Google documentation:",[68,69,70],"blockquote",{},[24,71,72],{},"CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. The score is zero to any positive number, where zero means no shifting and the larger the number, the more layout shift on the page. This is important because having pages elements shift while a user is trying to interact with it is a bad user experience. If you can’t seem to find the reason for a high value, try interacting with the page to see how that affects the score.",[19,74,76],{"id":75},"owl-carousel-cls-problem","Owl Carousel CLS Problem",[24,78,79],{},"Using a standard implementation of Owl Carousel, you will typically end up with a CLS score of 0.5 or more. According to Google, anything greater than 0.25 is considered poor, between 0.1 and 0.25 needs improvement, and less than 0.1 is good.",[24,81,82],{},[55,83],{"alt":84,"className":85,"src":86},"Owl Carousel Image 3",[59],"\u002Fimages\u002Fblog\u002Fowl-carousel\u002Fcls-03.jpg",[19,88,90],{"id":89},"solution","Solution",[24,92,93],{},"Owl Carousel chooses to hide the entire carousel on initial page load until all javascript has been loaded – hence why you end with a large layout shift.",[24,95,96],{},"The solution is to add a small amount of CSS that displays the first carousel image on initial page load so that the DOM can properly reserve the space required for the carousel, and therefore minimise any layout shift.",[98,99,104],"pre",{"className":100,"code":101,"language":102,"meta":103,"style":103},"language-css shiki shiki-themes github-dark",".owl-carousel {\n  display: block;\n}\n\n.owl-carousel .slide-owl-wrap:not(:first-child) {\n  display: none;\n}\n\n.owl-carousel img {\n  width: 100%;\n}\n","css","",[105,106,107,120,136,142,149,166,178,183,188,199,216],"code",{"__ignoreMap":103},[108,109,112,116],"span",{"class":110,"line":111},"line",1,[108,113,115],{"class":114},"svObZ",".owl-carousel",[108,117,119],{"class":118},"s95oV"," {\n",[108,121,123,127,130,133],{"class":110,"line":122},2,[108,124,126],{"class":125},"sDLfK","  display",[108,128,129],{"class":118},": ",[108,131,132],{"class":125},"block",[108,134,135],{"class":118},";\n",[108,137,139],{"class":110,"line":138},3,[108,140,141],{"class":118},"}\n",[108,143,145],{"class":110,"line":144},4,[108,146,148],{"emptyLinePlaceholder":147},true,"\n",[108,150,152,154,157,160,163],{"class":110,"line":151},5,[108,153,115],{"class":114},[108,155,156],{"class":114}," .slide-owl-wrap:not",[108,158,159],{"class":118},"(",[108,161,162],{"class":114},":first-child",[108,164,165],{"class":118},") {\n",[108,167,169,171,173,176],{"class":110,"line":168},6,[108,170,126],{"class":125},[108,172,129],{"class":118},[108,174,175],{"class":125},"none",[108,177,135],{"class":118},[108,179,181],{"class":110,"line":180},7,[108,182,141],{"class":118},[108,184,186],{"class":110,"line":185},8,[108,187,148],{"emptyLinePlaceholder":147},[108,189,191,193,197],{"class":110,"line":190},9,[108,192,115],{"class":114},[108,194,196],{"class":195},"s4JwU"," img",[108,198,119],{"class":118},[108,200,202,205,207,210,214],{"class":110,"line":201},10,[108,203,204],{"class":125},"  width",[108,206,129],{"class":118},[108,208,209],{"class":125},"100",[108,211,213],{"class":212},"snl16","%",[108,215,135],{"class":118},[108,217,219],{"class":110,"line":218},11,[108,220,141],{"class":118},[24,222,223,224,229],{},"To make this CSS work, a small change to the standard html structure as laid out in the ",[28,225,228],{":target":30,"href":226,"rel":227},"https:\u002F\u002Fowlcarousel2.github.io\u002FOwlCarousel2\u002Fdocs\u002Fapi-classes.html",[33],"Owl Carousel class documentation"," is required. Basically an extra div within each div.owl-item needs to be added as shown below:",[98,231,235],{"className":232,"code":233,"language":234,"meta":103,"style":103},"language-html shiki shiki-themes github-dark","\u003Cdiv class=\"owl-carousel owl-theme owl-loaded\">\n  \u003Cdiv class=\"owl-stage-outer\">\n    \u003Cdiv class=\"owl-stage\">\n      \u003Cdiv class=\"owl-item\">\n        \u003Cdiv class=\"slide-owl-wrap\">\n          \u003Cimg src=\"...\" \u002F>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"owl-item\">\n        \u003Cdiv class=\"slide-owl-wrap\">\n          \u003Cimg src=\"...\" \u002F>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"owl-item\">\n        \u003Cdiv class=\"slide-owl-wrap\">\n          \u003Cimg src=\"...\" \u002F>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","html",[105,236,237,258,274,290,306,322,340,349,358,372,386,400,409,418,433,448,463,472,481,491,501],{"__ignoreMap":103},[108,238,239,242,245,248,251,255],{"class":110,"line":111},[108,240,241],{"class":118},"\u003C",[108,243,244],{"class":195},"div",[108,246,247],{"class":114}," class",[108,249,250],{"class":118},"=",[108,252,254],{"class":253},"sU2Wk","\"owl-carousel owl-theme owl-loaded\"",[108,256,257],{"class":118},">\n",[108,259,260,263,265,267,269,272],{"class":110,"line":122},[108,261,262],{"class":118},"  \u003C",[108,264,244],{"class":195},[108,266,247],{"class":114},[108,268,250],{"class":118},[108,270,271],{"class":253},"\"owl-stage-outer\"",[108,273,257],{"class":118},[108,275,276,279,281,283,285,288],{"class":110,"line":138},[108,277,278],{"class":118},"    \u003C",[108,280,244],{"class":195},[108,282,247],{"class":114},[108,284,250],{"class":118},[108,286,287],{"class":253},"\"owl-stage\"",[108,289,257],{"class":118},[108,291,292,295,297,299,301,304],{"class":110,"line":144},[108,293,294],{"class":118},"      \u003C",[108,296,244],{"class":195},[108,298,247],{"class":114},[108,300,250],{"class":118},[108,302,303],{"class":253},"\"owl-item\"",[108,305,257],{"class":118},[108,307,308,311,313,315,317,320],{"class":110,"line":151},[108,309,310],{"class":118},"        \u003C",[108,312,244],{"class":195},[108,314,247],{"class":114},[108,316,250],{"class":118},[108,318,319],{"class":253},"\"slide-owl-wrap\"",[108,321,257],{"class":118},[108,323,324,327,329,332,334,337],{"class":110,"line":168},[108,325,326],{"class":118},"          \u003C",[108,328,55],{"class":195},[108,330,331],{"class":114}," src",[108,333,250],{"class":118},[108,335,336],{"class":253},"\"...\"",[108,338,339],{"class":118}," \u002F>\n",[108,341,342,345,347],{"class":110,"line":180},[108,343,344],{"class":118},"        \u003C\u002F",[108,346,244],{"class":195},[108,348,257],{"class":118},[108,350,351,354,356],{"class":110,"line":185},[108,352,353],{"class":118},"      \u003C\u002F",[108,355,244],{"class":195},[108,357,257],{"class":118},[108,359,360,362,364,366,368,370],{"class":110,"line":190},[108,361,294],{"class":118},[108,363,244],{"class":195},[108,365,247],{"class":114},[108,367,250],{"class":118},[108,369,303],{"class":253},[108,371,257],{"class":118},[108,373,374,376,378,380,382,384],{"class":110,"line":201},[108,375,310],{"class":118},[108,377,244],{"class":195},[108,379,247],{"class":114},[108,381,250],{"class":118},[108,383,319],{"class":253},[108,385,257],{"class":118},[108,387,388,390,392,394,396,398],{"class":110,"line":218},[108,389,326],{"class":118},[108,391,55],{"class":195},[108,393,331],{"class":114},[108,395,250],{"class":118},[108,397,336],{"class":253},[108,399,339],{"class":118},[108,401,403,405,407],{"class":110,"line":402},12,[108,404,344],{"class":118},[108,406,244],{"class":195},[108,408,257],{"class":118},[108,410,412,414,416],{"class":110,"line":411},13,[108,413,353],{"class":118},[108,415,244],{"class":195},[108,417,257],{"class":118},[108,419,421,423,425,427,429,431],{"class":110,"line":420},14,[108,422,294],{"class":118},[108,424,244],{"class":195},[108,426,247],{"class":114},[108,428,250],{"class":118},[108,430,303],{"class":253},[108,432,257],{"class":118},[108,434,436,438,440,442,444,446],{"class":110,"line":435},15,[108,437,310],{"class":118},[108,439,244],{"class":195},[108,441,247],{"class":114},[108,443,250],{"class":118},[108,445,319],{"class":253},[108,447,257],{"class":118},[108,449,451,453,455,457,459,461],{"class":110,"line":450},16,[108,452,326],{"class":118},[108,454,55],{"class":195},[108,456,331],{"class":114},[108,458,250],{"class":118},[108,460,336],{"class":253},[108,462,339],{"class":118},[108,464,466,468,470],{"class":110,"line":465},17,[108,467,344],{"class":118},[108,469,244],{"class":195},[108,471,257],{"class":118},[108,473,475,477,479],{"class":110,"line":474},18,[108,476,353],{"class":118},[108,478,244],{"class":195},[108,480,257],{"class":118},[108,482,484,487,489],{"class":110,"line":483},19,[108,485,486],{"class":118},"    \u003C\u002F",[108,488,244],{"class":195},[108,490,257],{"class":118},[108,492,494,497,499],{"class":110,"line":493},20,[108,495,496],{"class":118},"  \u003C\u002F",[108,498,244],{"class":195},[108,500,257],{"class":118},[108,502,504,507,509],{"class":110,"line":503},21,[108,505,506],{"class":118},"\u003C\u002F",[108,508,244],{"class":195},[108,510,257],{"class":118},[24,512,513],{},"With this small change, our CLS score has improved dramatically.",[24,515,516],{},[55,517],{"alt":518,"className":519,"src":520},"Owl Carousel Image 4",[59],"\u002Fimages\u002Fblog\u002Fowl-carousel\u002Fcls-04.jpg",[522,523,524],"style",{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}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 pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}",{"title":103,"searchDepth":122,"depth":122,"links":526},[527,528,529,530],{"id":21,"depth":122,"text":22},{"id":38,"depth":122,"text":39},{"id":75,"depth":122,"text":76},{"id":89,"depth":122,"text":90},[102,532,533],"development","wordpress",null,"2021-12-19","In this article, we will look at CLS (Cumulative Layout Shift) and how sliders\u002Fcarousels such as Owl Carousel negatively impact CLS scores and provide a fix.","md",{},"\u002Fblog\u002Fowl-carousel-cls-fix",{"title":5,"description":536},"blog\u002F2.owl-carousel-cls-fix","naLSCSkDE1ykOKkl3k3fDzvSUM6EEUilMrUkrRg_lAo",[544],{"id":122,"name":539,"count":545},22125,{"left":547,"top":547,"width":548,"height":548,"rotate":547,"vFlip":549,"hFlip":549,"body":550},0,24,false,"\u003Cpath\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\"\n    d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12zM12 15h.008v.008H12zm0 2.25h.008v.008H12zM9.75 15h.008v.008H9.75zm0 2.25h.008v.008H9.75zM7.5 15h.008v.008H7.5zm0 2.25h.008v.008H7.5zm6.75-4.5h.008v.008h-.008zm0 2.25h.008v.008h-.008zm0 2.25h.008v.008h-.008zm2.25-4.5h.008v.008H16.5zm0 2.25h.008v.008H16.5z\" \u002F>",{"left":547,"top":547,"width":548,"height":548,"rotate":547,"vFlip":549,"hFlip":549,"body":552},"\u003Cg\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\">\n    \u003Cpath\n      d=\"M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.1 18.1 0 0 0 5.224-5.223c.54-.827.368-1.908-.33-2.607l-9.583-9.58A2.25 2.25 0 0 0 9.568 3\" \u002F>\n    \u003Cpath d=\"M6 6h.008v.008H6z\" \u002F>\n  \u003C\u002Fg>",{"left":547,"top":547,"width":548,"height":548,"rotate":547,"vFlip":549,"hFlip":549,"body":554},"\u003Cg\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\">\n    \u003Cpath\n      d=\"M2.036 12.322a1 1 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178c.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178\" \u002F>\n    \u003Cpath d=\"M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0\" \u002F>\n  \u003C\u002Fg>"]