Web Performance Optimization I am one of the CoE members in . Our company invests startups, and I help them to grow. Last time, I was helping a Vietnamese company by making their web faster. Cool! See how . This article is from the journey exploring the SSR support of the carousels. It ends with making the . GSShop web performance affects your business Vue.js vue-slick-carousel CSR (Client Side Rendering) With A Spinner The site is a SPA(Single Page Application) made with . Vue.js, like , is one of the famous tech stacks of modern web development. Despite the SPA's many advantages, it has the disadvantage of long loading time due to the . The long loading time is because the browser doesn't know what to render on the screen until the browser evaluates javascript. So it usually put the spinner to say, "Please, don't leave. We're working on it." I wish the magic circle works, but It doesn't. Vue.js React CSR(Client Side Rendering) SSR(Server Side Rendering) With Placeholders allows the server to render the HTML so that the browser can quickly show what visitors want without evaluating javascript. (like for React) provides best practices, including SSR, to help us build fast web sites. SSR(Server Side Rendering) Nuxt.js Next.js We've enabled SSR using Nuxt.js to get rid of the spinner and quickly render the site's contents. SSR made the browser to render fast without having to wait for evaluating the javascript. But this site is made up of many carousel components. The carousel component doesn't support SSR, so it can't quickly render important things like promotions. We removed the spinner, rendered contents instantly, but had to put a lot of placeholders for the carousels. As with before, the contents of the carousels were rendered only a long time after it evaluates the javascript. Wanted: Server Side Rendering Vue.js Carousel Although it looked much better than before, visitors didn't come to see the placeholders. To truly improve UX, we needed a carousel with SSR support. Top 5 Vue.js Carousels To see which carousels work with SSR best, I tested the top 5 carousels on GitHub(except , which has a specialty in 3d rendering). vue-carousel-3d 🏆 Swiper component for @vuejs vue-awesome-swiper A flexible, responsive, touch-friendly carousel for Vue.js vue-carousel vue-concise-slider,A simple vue sliding component vue-concise-slider A carousel component for Vue.js vue-agile Vue component for Slick-carousel vue-slick Example Settings I prepared the SSR examples for the carousels using Nuxt.js( , , , , , ). Also, you can run those on codesandbox( , , , , , ). vue-awesome-swiper vue-agile vue-carousel vue-concise-slider vue-slick vue-slick-carousel vue-awesome-swiper vue-agile vue-carousel vue-concise-slider vue-slick vue-slick-carousel The Examples: Are created on top of Nuxt.js with universal(SSR) mode. Are wrote by following the examples of the components. Have image items as we're likely having one or more in real life. Have identically styled. No dots, no arrows. Profile Configuration: Build for production and run a local server to minimize network Interference. Chrome performance profile with Fast 3G Network + 4x slowdown CPU throttling. vue-agile , vue-carousel , vue-concise-slider , vue-slick These carousels do not support SSR. Trying to render these carousels on the server will throw errors. In most cases, the carousels try to access the through object to manipulate the . However, this problem occurs because that does not exist on the server. browser window DOM elements To avoid the errors, The carousels should be registered on and wrapped by component. Here're the demos( , , , ) and codesandboxes( , , , ) client-side only mode client-only(no-ssr) vue-agile vue-carousel vue-concise-slider vue-slick vue-agile vue-carousel vue-concise-slider vue-slick Component Template < = > div class "carousel-wrapper" < > client-only < = > agile :options "options" < = = = > div v-for "i in 5" :key "i" class "img-wrapper" < = img :src "`./$ {i} -200x100.jpg`" /> </ > div </ > agile </ > client-only </ > div The carousel components need to be wrapped by  client-only to avoid the error. Server Render Result < = > div class "carousel-wrapper" < > client-only < = > agile :options "options" < = = = > div v-for "i in 5" :key "i" class "img-wrapper" < = /> img :src "`./${i}-200x100.jpg`" </ > div </ > agile </ > client-only </ > div The server renders blank inside client-only. The browser will render the carousel after it evaluates the necessary javascript. Performance Profile After receiving the server's response, the browser must evaluate the javascript to draw the carousel. Images included in the carousel children can only be downloaded and painted afterward. vue-awesome-swiper is the most popular Vue.js carousel component. vue-awesome-swiper offers a . You write the rendered DOM structure manually into the component template then the browser runs the to render again. Thus the server just renders what you wrote in the component template without evaluating the carousel script. It means the SSR result doesn't respect any options passed to the carousel. Below is a vue-awesome-swiper with options. Here's the & . vue-awesome-swiper special way for server rendering custom directive slidesPerView: 3 demo project codesandbox Component Template < = >
  < v-swiper:mySwiper= >
    < = >
      < v- = :key= = >
        <img :src= />
      </ >
    </ >
  </ >
</ > div class "carousel-wrapper" div "options" div class "swiper-wrapper" div for "i in 5" "i" class "img-wrapper swiper-slide" "`./${i}-200x100.jpg`" div div div div The custom directive v-swiper is for browsers, server renderer doesn't evaluate it. Server Render Result < = > div class "carousel-wrapper" < = > div v-swiper:mySwiper "options" < = > div class "swiper-wrapper" < = = = > div v-for "i in 5" :key "i" class "img-wrapper swiper-slide" < = /> img :src "`./${i}-200x100.jpg`" </ > div </ > div </ > div </ > div The server renders the template as it is. Browser shows a default vue-awesome-swiper having one slide in it. After the browser evaluates the component directive, It updates the carousel for the given options. Performance Profile Browsers can download and paint images in the early stages because the first HTML response contains images. As soon as the browser evaluates the script, It can render the carousel with images. But it seems to render the carousel takes more time than the other carousels. It is because of the heavier script. Not only downloading but also evaluating the javascript takes longer. Writing SSR Support Carousel: vue-slick-carousel Ok. I tested the most popular carousels. I also looked around the other carousels. But all seemed not working. And I excluded carousels in the UI Frameworks because they do not provide rich features we needed. Here it is. I made the because of the reasons. Long story short, I ended up writing the vue-slick-carousel by porting the . I tested by matching the result of the for the vue-slick-carousel to the result of the for react-slick. I kept in mind that the rendering result works for every carousel settings. Here's the & . vue-slick-carousel react-slick vue-server-renderer react-dom server example codesandbox Component Template < = > div class "carousel-wrapper" < = > VueSlickCarousel v-bind "slickOptions" < = = = > div v-for "i in 5" :key "i" class "img-wrapper" < = img :src "`./$ {i} -200x100.jpg`" /> </ > div </ > VueSlickCarousel </ > div vue-slick-carousel works well on the server. Therefore, you can write the template in the usual way, without the client-only tag. Server Render Result < = > div class "carousel-wrapper" < = = > div dir "ltr" class "slick-slider slick-initialized" data-v-6bed67a2 < = > div class "slick-list" data-v-6bed67a2 < = = > div class "slick-track" style "width:433.33333333333337%;left:-100%;" data-v-4dc0f449 data-v-6bed67a2 < = = = = = > div tabIndex "-1" data-index "-3" aria-hidden "true" class "slick-slide slick-cloned" style "width:7.6923076923076925%;" data-v-4dc0f449 < > div data-v-4dc0f449 < = = = > div tabIndex "-1" class "img-wrapper" style "width:100%;display:inline-block;" data-v-4dc0f449 < = > img src "./3-200x100.jpg" data-v-4dc0f449 </ > div </ > div </ > div  < = = = = = > div tabIndex "-1" data-index "9" aria-hidden "true" class "slick-slide slick-cloned" style "width:7.6923076923076925%;" data-v-4dc0f449 < > div data-v-4dc0f449 < = = = > div tabIndex "-1" class "img-wrapper" style "width:100%;display:inline-block;" data-v-4dc0f449 < = > img src "./5-200x100.jpg" data-v-4dc0f449 </ > div </ > div </ > div </ > div </ > div </ > div </ > div The server fully make the DOM elements and sends them to the browser. The browser can render on the screen without evaluating any javascript. Performance Profile The browser renders the carousel right after the first HTML response. Since the carousel was rendered quick, downloading images can also be started fast. Undoubtedly, the vue-slick-carousel can show content the fastest and prepare the image resources it needs. The actual site contains a much heavier script, and this performance gap will be even more significant. Component Support Completes The SSR All components used by the site must support it for the server to fully render. Thus, the site can deliver what visitors want quickly. Otherwise, In many cases, Trying without the support of components can make the site even slower due to the heavier HTML. Component support completes the Server Side Rendering. My last project had the same issue. To show content to users faster, we enabled SSR, but this was not possible because no Vue.js carousel supported it. The server is now able to fully render the content using the vue-slick-carousel so that it can deliver content to visitors faster. What's Next? Since I started this project to improve performance, I'd like to focus on the goal. And the vue-slick-carousel itself is a new project that has been only a few months old. I want to make it stable. Every issue and PR are welcomed. Your help can make this project mature. Finally, Thank you, react-slick contributors. I'd like to contribute as much as I can while I'm working on this. Besides the project, I'm thinking of two more articles to share what I learned in the last project. Perhaps due to the population differences, I feel that the react ecosystem is more versatile and mature than the Vue.js ecosystem. Just as is the case with the vue-slick-carousel, I guess it's worth sharing "How to port the react component for the Vue.js." And "Vue.js SSR the hard parts" that I struggled with in my last project.

Stacks

Initialized

Instantly

code everyday • dream always

Read My Stories

Too Long; Didn't Read

 Add passwordless user experiences to your app

HackerNoon Mobile

Server Side Rendering Carousels in Vue.js: Blazing Fast Loading

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

@kyuwoo-choi

RELATED STORIES