Odisseya

.button:hover::before {
  background-color: black;  
  box-shadow: 0 0 1px 0 currentColor, inset 0 0 1px 0 currentColor;
}

• Из font awesome возьмите только фактически используемые глифы и на их основании сгенерируйте собственный шрифт.
  
• open sans — конвертируйте и подключите как woff2 и woff — отберите 2-3 фактически
  используемых начертания, у которых возьмите только нужные charset (например, cyrillic)).
  

• Используйте свойство font-display (также можно сделать фоллебек из визуально схожих системных шрифтов)
  
• Приоритезируйте загрузку шрифтов "из первого экрана", например:

  <link rel="preload" as="font" type="font/woff2" crossorigin="" href="*.woff2">