Blog Optimization

Recently I started to mess around with Hugo, a static-site generator, written in GO. I got some pitfalls with it, but overall it is a nice piece of software. I intend to develop a theme for this engine with semantic and accessibility in mind.

So this is a plan of optimization that I composed.

1. Inline and minify crucial CSS

For blog theme I tried to write a minimal possible CSS (~150 lines), so why not inline it in a page? So browser won't needed to fetch it from the server.

2. Enable gzip

Found a neat article on DO about enabling gzip

  1. Check that all lines with gzip are enabled

    console $ sudo vim /etc/nginx/nginx.conf

  2. Add this line to not compress a very small files

    nginx gzip_min_length 256;

  3. Replace line with types with larger one

    nginx gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;

And finally, check that Content-Encoding: gzip is there

$ curl -H "Accept-Encoding: gzip" -I http://localhost/test.css

3. Set Expires and Cache-Control Headers.

I found a good solution on ServerFault. Basically you need to add a block like this:

location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
    expires 30d;
    add_header Pragma public;
    add_header Cache-Control "public";
}

Check that headers added

$ curl -I https://example.com/css/styles.css

4. Redirect index.html files to / urls

After some googling I found this snippet that can do exactly this:

# block access to /index.(php|htm|html)
if ($request_uri ~ "/index.(php|html?)") {
    rewrite (.*)/ /$1 permanent;
}

5. Add a nice page for server errors

Adding custom error page is super easy

location / {
    try_files $uri $uri/ =404;
    error_page 404 /404.html;
}

Nice helpfull resources

This resources can help check site performance and accessibility issues.

Speed

Accessibility theory

Accessibility testing

Images

Css