Lendo page speed journey
Background
Lendo is a service between customers and banks where we present the best offer available for a loan. All the customer needs to do is fill out a form to get available offers from Lendo’s partners.
When www.lendo.se was launched the setup was; React, Semantic UI and Webpack (without any SSR support). This setup resulted in a not so good lighthouse score and page speed was totally outside of the scope.
We had a new market on our roadmap, Austria, where we could experiment with improving and so the journey began.
Setup
Starting with www.lendo.at we decided to try https://preactjs.com/ since it is a lightweight framework with the same api as React. We set it up with preact-cli which helped us with full PWA support, service worker, automatic code splitting, and so on. This was all great and just what we needed.
Our next goal was to create our own UI library since the one we used, semantic, is way too large and more than what is needed on our sites.
semantic-ui-react
MINIFIED 280.5 kB
MINIFIED + GZIPPED 72.4 kB
Lendo attended an event called nordic.js (https://nordicjs.com/2018) where one talk in particular, called “Manage your styles as it ́s 2018” by Katarzyna Jastrzębska-Łachacz, were very interesting. She talked about the difference between using good old .css files and using inline styles. She also talked about component driven libraries like fella.js and styled-components which were ideas we had discussed earlier but not started to use actively.
All this led to our project called lendo-ui. A component library for Lendo where we could set our own design and have zero dependencies on any open-source projects. We decided to go with styled-components and use storybook for development initially and build the components with react.
The result of the first implementation:
🎉 As you can see we managed to improve a lot in all of the metrics and score from our starting point.
Problems
Since our landing page project was built in Preact and we decided to build lendo-ui with styled-components, which is dependent on React, we hit some road blocks. We couldn’t use styled-components to its full potential and when they released version 4.0.0 we couldn’t really update from version 3.7.x since they started using hooks from React and Preact didn’t support this yet. We were also eager to start using hooks in our lendo-ui components, but were not able due to Preact.
Another problem we had implementing our own UI components was the side effect it had - breaking the built in ssr functionality in preact-cli. The documentation about implementation of styled-components for ssr (https://www.styled-components.com/docs/advanced#server-side-rendering) helped out a bit, but not to its full extent. We searched the web for a solution for Preact and found a gist (https://gist.github.com/SaraVieira/b7468b94bb54e5ee1824b3a0a1bcc0f8) which gave us an idea of what we had to do to get it working. It was a lot of hassle and was rather time consuming to fix these problems ourselves, so we started to look around for other great tools or frameworks which would be able to solve these problems automatically for us.
Eureka!
The company Lendo is part of a large corporation, Schibsted. At Schibsted we have hackdays where we can experiment and try out new things we usually don’t do on a daily basis. We took this opportunity to try out two different frameworks, Gatsby JS and Next JS. Both of these frameworks had just what we needed, a built in bundler for building static web pages with great page speed and SEO friendly. Both of these frameworks are amazing for both performance and development. At this point we had also started to work with the headless CMS Contentful so if any of these two frameworks had an advantage when implementing Contentul we would lean more towards that one. Gatsby happened to have a great plugin for sourcing the content from Contentful at the build stage and bundling the content inside the static rendered pages. We decided to go with Gatsby and have since been very happy with this successful implementation.
Google ❤️ page speed & SEO
Everyone knows Google is the top dog when it comes to SEO. We have the benefit of having their Stockholm office across the street from our office, so we booked a meeting about improving our SEO and page speed. They recommended that we lazy load all images below the view point, only load Hotjar when we are actively looking for something in particular, add PWA support and also service workers for a higher score. All of this was solved by all the possibilities that came with Gatsby and its awesome plugin library.
Results
2018–11–02 (Preact)
This was the result of our first implementation with Preact, styled-component and our own UI library. It was a great result and just what we were aiming for, but it still had a few flaws and missing features for us to have the best development setup possible.
2019–04–04 (React + Gatsby)
Since we decided to go with Gatsby JS our metrics even improved and we even got a better score in SEO. We improved the UI library as well for better accessibility.
PS: We’re hiring and have lots of exciting positions. Check out our open positions at https://www.lendo.group/careers/.
