Improve performance and user experience on mobiles

The user experience on mobile is not great:

the navigation to menu to switch between years is crowded
the language drop-down menu seems to be broken
Lighthouse metrics should be improved

Among the points for fix:

Avoid an excessive DOM size 7,772 elements

Route (pages)                              Size     First Load JS
┌   /_app                                  0 B            73.6 kB
├ ● /[year]/[language] (49952 ms)          58.7 kB         132 kB
├   └ css/c686c22591dbfa2e.css             254 B
├   ├ /2017/zh (7032 ms)
├   ├ /2016/en (6400 ms)
├   ├ /2017/ja (6143 ms)
├   ├ /2017/en (4470 ms)
├   ├ /2017/fr (3101 ms)
├   ├ /2016/ja (3038 ms)
├   ├ /2016/zh (3028 ms)
├   └ [+22 more paths] (avg 761 ms)
├ λ /[year]/[language]/design              1.63 kB        75.3 kB
├   └ css/498c7c84c4a76fb3.css             171 B
└ ○ /404                                   183 B          73.8 kB
+ First Load JS shared by all              76.6 kB
  ├ chunks/framework-581f102fc68ef277.js   45.4 kB
  ├ chunks/main-c54db12ec8301afa.js        27.1 kB
  ├ chunks/pages/_app-aa8690e3a3d18c5d.js  351 B
  ├ chunks/webpack-59c5c889f52620d6.js     819 B
  └ css/0b8fc5dbefb69b6f.css               2.97 kB

File sizes in .next/server/pages/2022 folder:

452K en.html
104K en.json

bestofjs / javascript-risingstars

Improve performance and user experience on mobiles #111