Video: Performance Crime. Decreasing @sitecore-jss/sitecore-jss size.

Anton Tishchenko presented trick on performance improvements for Sitecore JSS Sitecore Headless Development User Group 4. He told about @sitecore-jss/sitecore-jss NPM package, bundlers, bundle analyzers, next.js and webpack.

You can check presentation here.

Autogenerated transcription

00:24:01 presentation itself is named as a performance crime and decreasing sitecore GSS npm package in four times but uh uh that's not the main goal of this presentation the main goal of this presentation is to uh show you technique how you can analyze your nextjs JavaScript bundle and how you can improve it and as the example we will use sore GSS and yes we will really decrease it in four times for our case uh let me introduce myself um my name is Anon Tika I'm six time sitecore MVP I'm last year sitecore

00:24:57 hakon winner and uh if you haven't registered to S kakon this year I do recommend you to do it because you will have uh awesome 24 hours and you will really enjoy it I work on sitecore projects more than 10 years and I'm ex sitecore employee uh now I'm working for company XDS we have more than seven years of site core development experience and did a lot of project with different uh complexity and now we focused on headless and cloud and now let's uh move to the presentation itself first of all let's talk about

00:25:56 bundlers uh Java JavaScript bundlers it's a specific uh function that allows you to join all your JavaScript models into one Javascript file if you remember good old days uh you need to put some JavaScript into your head Tech some JavaScript right after beginning of your body tag and uh some JavaScript at the end of your HTML and uh that's what how you optimized your page and you have granular granular control it required a lot of efforts but uh control was bigger comparing to the modern

00:26:53 Frameworks if we look on Modern Frameworks like like nextjs they build everything bys you don't worry anymore uh that you need to put some JavaScript into head some JavaScript into body that's everything done by nextjs and in case of nextjs it's not just meta framework uh uh on react it's also uh so-called hybrid framework so part of your JavaScript code is added to client side bundle part of your code is added to serite bundle and in case of nextjs there also could be two server

00:27:47 side bundles one for njs and one for Edge so they are called in different run times if you host on hosting like versel or netlify but today we will be interested in client side bundles because client side bundles they do affect your web page speed your performance and the performance is essential to uh avoid losing uh some clients because your site is slow it's loading not too fast and uh that's nice that nextjs do a lot of magic but do you trust nextjs and weac and uh there is only one way to

00:28:45 figure out uh can we trust it or not is to analyze output uh there is official way how we can analyze uh bundle JavaScript bundles that are provided by nextjs is it is uh uh next bundle analyzer package so we can install it using uh usual command and PM install next bundle analyzer and we can add the bundle analyzer plug-in in very similar ways that Frank showed for his plugins and uh uh in our case if enironment variable analyze will be set to true it will provide us additional data about our bundle we will

00:29:45 see what's inside and uh we will be able to analyze it so I took default sitecore style guide site and uh decided to look what's inside it and uh let's uh see uh you can see this uh uh interesting graph and there are a lot of information that we can take from it so for example we can see that uh uh here in green we have nextjs itself at the bottom we have react at the right bottom corner we have some things related to pages and some other small stuff but uh as you already know uh the name of presentation we will

00:30:43 be Focus today on sord GSS so we are interested in this chunk so let's uh zoom in and let's uh take a more precise look uh so here we can see that this chunk contains part of this chunk is sitecore GSS and part is uh next and some other stuff let's zoom up even more and look only on sitecore GSS part what we can see here we can see that uh it consist from graphql here is graphql exos graph K request uh so some some other small things like uh CrossFit debug we we we will not look on these small things

00:31:56 today uh we we we will focus on bigger parts and we can see that uh only some small part is the code of module itself and the bigger part of module is are are some packages graphql AOS graph requests Let's uh check if we are right with this and let's uh uh use the service which is named bundle for if you haven't seen this service before I really do recommend you to use it because uh it will give you information what's actually is inside your package and uh we can see that uh our

00:32:48 analys was right the major part of sitecore GSS package are other pack packages that are baked in into sore GSS that's graphql that's graphql request and that's exos and only small part of uh this package is uh code of package itself and uh there are also some strange Parts like thebug I don't think that thebug should should be about half of code of package itself so it probably also can be improved but uh let's think about graphql graphql request and the exos uh we we know what these packages

00:33:47 are about all these packages are about communication between web services and uh where in case of nextjs sore website all communication happens we know that when we build page uh we get sitecore data we get sitecore data using get static props function and we get list of all pages using get static PA function and these two functions they are called only on server site it doesn't matter whether it is uh static side generation server side rendering or incremental static regeneration in all these cases the code

00:34:45 is executed on server site it means that actually we don't need this part on client but as we uh saw from previous slide nextjs together with web isn't smart enough to identify that this code isn't reachable on client side and it's still is added to final JavaScript bundle Let's uh think what we can do with it so the first idea is to split sitecore GSS uh package code into two parts into a server part and client side part it will allows us to import the server side part where server code is executed and

00:35:45 clients had part in components where we need it and uh uh that's uh doable but I'm not an owner of s core GSS sitecore owns its code it's open source I can Fork it and I can uh publish my own packages but uh it's uh actually time consuming and I will need to support it and I will need to make changes uh during each upgrade so that's an option but uh time consuming the next option is use hugs so we can change what's inside not modules during build or we can hardcode somehow but inside not modules that's uh

00:36:44 also doesn't look so good and the last option that I I choosed is using web P LS configuration so vbp allows us to configure how you want to bundle your JavaScript and uh this configuration uh should be added into nextjs config and it tells us that if we if if if we bundle uh line side so if it's not server then we mop graphql graphql request and exos to some fake modules and actually all these graph qu request JS graph qu GS and the exgs they are just the empty files that's enough to uh make this uh uh JavaScript

00:37:56 bondable and uh we don't worry about the code itself because it's not reachable on client side it it will not be used and uh now let's measure results let's measure how uh how many kilobytes can we save you can see this table first row it's uh start size it's total size of source sore second row is part size it's minified and uglified JavaScript and uh last line is jip size we are mostly interested in jip size because uh that's a amount that will be transferred to browser and

00:38:49 uh then browser will parse it spend some CPU time and then browser will execute it and we can see big result here so previously it was 28 kiloby and now it's uh a little bit less than seven so we will be able to decrease the site core GSS uh size in four times which quite big result for one package but uh uh that's uh but uh in browser we have not only one package as previously we so there will be also react there will be also nextjs so let's uh check the whole picture Let's uh check uh it using lighthouse my favorite

00:39:50 tool for checking performance and at the left we see see how it was before and at the right we see how it is after uh so we can compare we can see that previously it was 130 kilobytes now it's a little bit less than 110 kilobytes so still 20 kilobytes it's on the size of 100 kilobytes it's not so big but it's still 20% and it's still some Network time it's still some CPU time and we can uh see that even uh Lighthouse score was changed from low to medium medium is also not perfect and

00:40:50 there are still room for improvement but it's uh some result and uh now uh let's make conclusion what's next uh first of all you can apply this technique this sitecore GSS package right now into your sitecore nextjs website and you will get this measurable Improvement it's uh take it takes small amount of time but will give you uh measurable Improvement if you don't want to to do it you think that it's not very valuable you still will get it after some time because sitecore is aware

00:41:51 about this issue and they are working on the optimization and by the way here we shouldn't blame sitecore that they missed this part and they did it wrong uh we should remember that sore GSS package was created core package was created at the time when there was no uh nextjs implementation there was only react View and angular and there was no uh such division like uh server side bundle and client side bundle and at that time they did everything right H later nextjs appeared and that uh solution could be improved but at that

00:42:37 time it was absolutely fine and the last Point what you definitely should do you need to analyze your client side bundle and you need to know what is inside and uh probably in your client side bundle there will be also something that you don't need and you can remove and that's how you can improve the performance of your Sor nextjs website so that's all from my side uh here are all resources uh this presentation also is available as article uh which was published today and you can read it as text and get all code

00:43:30 Snippets and uh you can uh access this presentation by scanning this QR code that's all from my side I'm open for questions thank you very much andon for this wonderful presentation I Can Only Imagine how many websites do violate the bundal site and initially when you look at the nextjs and the basic idea behind the framework that's all about optimization right but the way how people actually implement it in many cases is far away from the Perfection so I think this presentation you gave us today will help many of us

00:44:21 to reduce this performance crime at least I will definitely use uh my takeaways from what you shared uh if anyone if anyone would like to ask the question please do that uh just just one final thing so if it will allow you improve your nextjs performance but you if you want to get absolutely blazing fast website you need to look to Astro but that's completely different topic so oh we all know your skills with doing Astro and that's uh indeed very inspiring framework for those who are not familiar with this

00:45:06 framework first of all I would like to ask you to investigate on your own spend your own time to investigate what are the advantages of this framework and why it is in that way so so Advantage once you find this out and you will uh please refer to Anton's post because Anton explains how to uh made Astro with uh GS with next GS with our Frameworks and there are plenty of wonderful takeaways from there and we actually got a question we actually got a question so question number one which tools was used for bundle analyzer for

00:45:45 analyz of next uh bundle size there was used official uh nextjs bundle and it should be in oh no it's not it's not this one it's not this one uh it should be this one so uh there is official uh nextjs bundle analyzer and it works perfectly with sidec so it was used for to analyze and to see what's inside okay pretty obvious answer but thank you very much for that another question is um do you think uh if T Park will have a better results as well uh as far as I know uh turbo Park uh I uh one of my colleagues

00:46:46 started to use troak and uh for now they spent a lot of time on configuring it so if you want to to be on the edge it's absolutely fine to start with it but you should you should take into account that you will need to uh spend a lot of time on configuring about uh how smart it is to Define unreachable code I can't say I need to make experiment Vis it uh so so if uh if if anyone will uh build uh default sitecore website default sitecore style guide I will be happy to measure it and I will be happy