How I configured one website

3 min readNov 9, 2018

Introduction

One Saturday afternoon I started researching top 20 of @WTA players' site structure, its performance and tried to come up with something better (image loading, adaptive layout, etc)

And it turned out most of websites use Wordpress?!

I researched analogues and found more appropriate CMS for myself and it was Netlify CMS. I found netlify-cms-react-starter of Jinksi on GitHub, forked it and started to change it

Usability

As for me, very configurable and easy way to understand as a frontend developer. It stores all pages as Yaml or Markdown, saves all images in a Github repo, deploys on every commit hook

I’ve created webpage https://tda-mz.netlify.com

CMS also has admin page where all can be changed quickly

It uses React to write components. In Jinksi’s repo there were already a number of custom components which I extended

Customisation

First, I filled pages with the content using CMS

Next, I used Lighthouse to check metrics of web pages

It wasn’t good at first, but step by step I improved it

Performance

I needed to lazy load images as they slow down UX. It includes Gallery component which I added and background images. It then started to load faster even for mobile devices with poor Internet connection

PWA

I added manifest, updated logos with description in manifest and now Android application is available via Chrome

It’s available on desktop using Chrome as well

Moreover, all content is cached. This means it loads pages faster next time!

Accessibility

To make web application accessible via screen readers, I fixed issues which were advised by Lighthouse. There are aria-label, alt, rel and some meta tags. It was fixed for social media links, forms, buttons, etc