DEV Community

John Winston
John Winston

Posted on • Edited on • Originally published at hugosum.com

3 1

Optimize SvelteKit performance with brotli compression

In my post of building Docker image for static SvelteKit application with nginx, I have covered almost everything, except serving brotli compressed assets. brotli generally compress files better than traditional gzip.

Today I want to share how to optimize SvelteKit's performance with brotli compression, and serve those pre-compressed assets with nginx.

Enable pre-compression in SvelteKit

As we are building a static site, we can compress all our assets with brotli during the build time. To enable pre-compression, you need to set precompress: true in your adapter.

// svelte.config.js
import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter({
      precompress: true
    }),
  },
};

export default config;
Enter fullscreen mode Exit fullscreen mode

Enable brotli support in nginx

By default, nginx does not support brotli compression, and it won't serve pre-compressed brotli assets as well. To enable that, you have to install ngx_brotli module.

Luckily there is a Docker image with ngx_brotli pre-installed. We are going to modify our Docker image that build SvelteKit with static adapter and serve with nginx, and use that image.

# omitted for brevity
FROM base AS prerelease
COPY --from=install /temp/dev/node_modules node_modules
COPY . .

ENV NODE_ENV=production
RUN npm run build

# the nginx Docker image with brotli modules installed
FROM KiweeEu/nginx-brotli AS release
COPY --from=prerelease --chown=nginx:nginx /usr/src/app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]
Enter fullscreen mode Exit fullscreen mode

And finally we just need to allow nginx to serve brotli compressed content, by modifying nginx.conf.

# nginx.conf
# load the ngx_brotli module
load_module modules/ngx_http_brotli_filter_module.so;
load_module modules/ngx_http_brotli_static_module.so;

server {
    # some usual nginx config
    listen 8080;
    listen [::]:8080;
    root /usr/share/nginx/html;
    server_name _;
    try_files $uri $uri.html $uri/ =404;

    brotli_static on; # allow serving brotli compressed files
}
Enter fullscreen mode Exit fullscreen mode

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay