How I configured one website

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

Main page

CMS also has admin page where all can be changed quickly

Log in to admin page
Edit pages with different content

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

Chrome > Add > Open

It’s available on desktop using Chrome as well

Settings > Install > Open

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

Conclusion

After optimisation, the metrics look like that:

Main page
Gallery page with carousels
Benefits page with grid
Blog and news page

I’m totally satisfied with it and ready to improve website in any other way

Alexey Berezin,
Graduate student from St Petersburg State University, Master’s
Front-end Developer from Yandex

LinkedIn
GitHub

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store