DEV Community

Cover image for How I Redesigned My Website With SvelteKit
Lucretius Biah
Lucretius Biah

Posted on • Updated on • Originally published at kudadam.com

How I Redesigned My Website With SvelteKit

You can read it on my blog

Finally, I migrated my website to SvelteKit after using Sapper for some time
The process was not hard at all since I used their migration guide

So after using Sapper for some time, I decided to move my website to SvelteKit. I remember saying that I would not move to SvelteKit till they hit version 1 but the framework looks too promising. It had features which I needed and those features weren't in Sapper.

Migration Process

The whole process took about an hour or two. I created a new SvelteKit project and copied the files from my Sapper website to my new SvelteKit folder whiles making the necessary changes.

Some of the changes are;

  • _layout.svelte and _error.svelte were renamed to __layout.svelte and __error.svelte
  • The preload function was changed to load
  • fetch on the server now runs without using the node-fetch module
  • sapper:prefetch was changed to sveltekit:prefetch
  • Files which were stored under src/node_modules can now be placed in the lib folder and referenced like this $lib/path/to/folder. The $lib alias prevents the ../../../ nonsense.
  • Oh! and regex routes are no longer supported 😄

So that's some of the stuff I changed, the list is more than this but I just decided to limit it to the few important ones

Improving Page Load Time

In order to get a good score on Google Page Insights, you website must load incredibly fast. My old website which was made with Sapper was scoring 45%😲. Yeah, the score is really bad. But when I migrated to SvelteKit, am scoring 100%.

Sapper pageinsights score of my website
Sapper version of my website's score on Page insights
Sveltekit page insights score of my website
SvelteKit version of my website's score on Page insights

I also made some adjustments which helped me to score 100% on Page Insights.

Here are some of the adjustments I made:

  • I removed Font Awesome JavaScript file from my website.

The reason was that, the loading of that JavaScript file was increasing the page load time, What I did instead was to download SVG copies of the icons I needed and turned them into Svelte components so I will load them when I needed them.

  • Adding the loading=lazy attribute to images

Adding this attribute to my image elements helped to reduce the page load time. What the attribute does is that, it does not load the image until the image is in view. This helps to reduce the number of requests made on page load.

  • Minifying the rendered HTML

SvelteKit has a feature called hooks. This is a JavaScript file which is run when requests are made to the server. By intercepting the results being sent back to the browser, I am able to minify the contents thereby reducing the size of the HTML page which has to be downloaded. You can read more about it here.

Adding Offline Support

SvelteKit does not come with a service-worker file like Sapper but it does provide a way for you to add a service-worker to your website. If you create a file named service-worker.js inside your src/ directory, Vite will automatically register that file as a service-worker and provide you access to the service-worker module.

Inside that file, I store all the built files and the static files in a cache. The cache is named with a timestamp so that on each build, a new cache is added and the old one deleted. Also, the service-worker also intercept fetch requests made by the browser and caches the requests. This is to ensure that if the user goes offline, those files will still be available to the user.

This feature is really cool because even if a user visits only the homepage of my website and the user goes offline, the user can browse through most pages of the website and read all the blog posts even if the user has not visited those pages yet😎. Yeah! all thanks to service-workers

Making My Website A P.W.A

So after adding a service-worker to my website, I decided to turn it into a P.W.A (Progressive Web App) . The only thing which I needed to add was a manifest.json file to the <head> element of my website. Inside the manifest.json file, I placed the following code inside

{
    "name": "Kudadam Website",
    "short_name": "Kudadam",
    "start_url": "/",
    "scope": "/",
    "description": "Lucretius' personal website",
    "display": "standalone",
    "background_color": "white",
    "theme_color":"tomato",
    "orientation":"portrait-primary",
    "icons": [
        {
            "src":"https://kudadam.sirv.com/logo/logo.png?h=72&w=72",
            "type":"image/png",
            "sizes":"72x72"
        },
        {
            "src":"https://kudadam.sirv.com/logo/logo.png?h=96&w=96",
            "type":"image/png",
            "sizes":"96x96"
        },
        {
            "src":"https://kudadam.sirv.com/logo/logo.png?h=128&w=128",
            "type":"image/png",
            "sizes":"128x128"
        },
        {
            "src":"https://kudadam.sirv.com/logo/logo.png?h=192&w=192",
            "type":"image/png",
            "sizes":"192x192"
        },
        {
            "src":"https://kudadam.sirv.com/logo/logo.png?h=144&w=144",
            "type":"image/png",
            "sizes":"144x144"
        },
        {
            "src":"https://kudadam.sirv.com/logo/logo.png?h=512&w=512",
            "type":"image/png",
            "sizes":"512x512"
        }
    ],
    "shortcuts": [
        {
            "name": "Blog Posts",
            "short_name": "Blog",
            "description" : "Read Lucretius' Blog Posts",
            "url":"/blog",
            "icons": [
                {
                "src":"https://kudadam.sirv.com/logo/logo_blog.png?h=512&w=512",
                "type":"image/png",
                "sizes":"512x512"
                }
            ]
        },
        {
            "name": "Web Tools",
            "short_name": "Tools",
            "description": "Use the web tools on the website",
            "url":"/toolz",
            "icons": [
                {
                    "src": "https://kudadam.sirv.com/logo/logo_toolz.png?h=512&w=512",
                    "type": "image/png",
                    "sizes": "512x512"
                }
            ]
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

So the code above is what makes my website a progressive web app, If you are using the Chrome browser on your mobile device, you can install it like any other ordinary app and you can even share the app.

Adding a newsletter to the website

So for the very first time in my entire my life of blogging, I decided to add a newsletter to my website. I use sendinblue to store my subscribers and also, they provide an API which enables me to send emails. With sendinblue, I can store an unlimited number of contacts and can only send 300 emails per day.

Though I have never used newsletters before, am learning much. On my website, the newsletter subscription form is placed in the footer component of the website and it's available on all the pages so that the user will see it and not miss it.
If you have not already subscribed, you should really do so because I will be sending useful contents to you.

Adding Comments to Blog Posts

The first version of my website used Disqus for it's comment system but after I found out that they were injecting other scripts into my page, I decided to opt out.

At first I decided to create my own comment system then I realized it would be much work maintaining a website and a comment system so finally I decided to settle on Utterances, a lightweight comments widget built on Github issues. What Utterances does is that, it stores each comment as a Github issue on the repository where the website is hosted. Utterances is really cool but there are some limitations;

Some of the limitations are;

  • The person commenting must have a Github account

  • You can use Utterances on a private repository (repo)

  • You can not nest comments

Well, that is some of the limitations of Utterances, apart from these, the comment system is good just like the others. I use it on my website so if you want to try it out, please comment on this blog post down below.

Fellas, that's all there is to say about my new redesign, Will be waiting to see your name in the subscriber's list.

The GitHub repo is at https://www.github.com/biah/www.kudadam.com.

GitHub logo lubiah / kudadamold

My personal website which is created with SvelteKit and TailwindCSS

Kudadam.com

_My personal website made with SvelteKit and TailwindCSS






Top comments (3)

Collapse
 
gevera profile image
Denis Donici

I wonder what features did you need that weren't in Sapper? From my perspective, Sapper is more stable and mature for now, with service-worker and manifest out of the box.

Collapse
 
lubiah profile image
Lucretius Biah

Well, Sapper didn't support layout resets. I really needed that feature.

Also Sveltekit is faster than Sapper due to Vite

Collapse
 
tzwel profile image
tzwel

awesome article, I learned more than I thought I would