Оптимизация производительности на мобильном телефоне

Question

Я работаю над этим (все еще продолжающимся) проектом, и я отмечаю некоторую плохую производительность на младшем устройстве, конечно, в настоящее время происходит много анимаций одновременно (в основном, созданных с помощью платформы для приложений с зеленым носком) то, что я могу удалить с помощью matchmedia api с javascript, но я бы сохранил основную анимацию основных четырех разделов, это css:

.section{
  position: absolute;
  z-index: 0;
  width: 50%;
  height: 50%;
  overflow: hidden;
  transform: scale(1);
  will-change: transform;
  transition: all $speed;
  transition-timing-function: cubic-bezier(.4,.2,0,1);


   &:first-child {
   top: 0;
   left: 0;
   background-image: $color-orange;


   }

   &:nth-child(2) {
     top: 0;
     left: 50%;
     background-image: $color-blue;


   }

   &:nth-child(3) {
     top: 50%;
     left: 0;
     background-image: $color-yellow;


   }

   &:nth-child(4) {
     top: 50%;
     left: 50%;
     background-image:$color-violet;

   }

  &.is-expanded{
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;

  }

  .has-expanded-item &:not(.is-expanded){
    transform: scale(0);
    opacity: 0;
  }

}

в основном, когда щелкается заголовок, его контейнер получает класс is-extended, тело также получает элемент ha-extended-item.

Я использую здесь изменения, а также я включил кэширование изображений (пока не для css и javascript), я включил сжатие gzip на облачном фронте, но я все еще отмечаю низкую производительность на мобильных устройствах Может кто-нибудь дать мне подсказку? Может быть, я должен использовать изменится по-другому? Спасибо