Ускорила загрузку мобилки сайта ×3
Пост 2/2
После завершения верстки оказалось, что загрузка мобильной версии длится 18 секунд (что ощущается, как «…a few hours later»)
Так что мобилку пришлось безжалостно менять (по согласованию с клиентом): — полностью избавилась от анимаций — заменила многосоставные визуалы на единые картинки — раскрыла слайдеры — прогнала всю графику через оптимизаторы
Промежуточная скорость загрузки получилась 5–9 секунд. Для сайта, ориентированного на партнёров компании (как этот), не критично, но всё равно ускорила еще:
— все, кроме одного, слайдеры заменила на карусели карточек — переверстала так, чтобы не понадобилась тяжелая стилевая модификация — максимально убрала все скрипты «для красоты», не несущие смысловой нагрузки
Теперь сайт загружается 3-5 секунд на андроидах и 4-6 секунд на IOS
Потом внесла правки в десктоп, проработала базовое SEO и сайт наконец запустили
На финале я все-таки догадалась поставить в известность своего менеджера о реальных объёмах запары. Она меня поддержала, где-то перехватив коммуникацию с клиентом, где-то просто заметив проделанную работу и пообещав премию) Потом провели аудит проделанной работы и зафиксировали на будущее
Лично мои выводы и осознания: 1. Делай дизайн с учетом того, где его потом будут верстать 2. По возможности давай заказчику выбор – суперкрасиво, но дольше и дороже или просто хорошо, но в рамках бюджета и сроков 3. Если видишь сложный визуал – заложи время на исследования, и пусть заказчик будет в курсе 4. Тильда выручает и еще выручит не раз, но у каждого инструмента есть свой потолок. Так что нужно будет пополнить стек новой платформой для вёрстки 5. Если над тобой есть человек, который также отвечает за результат – держи его в курсе своей работы
Составила чек-лист по оптимизации для коллег-дизайнеров, забирайте в карточках)
#оптимизациясайта #кейс #тильда #мобильнаяверстка #вебдизайнер #личныйопыт
· 20.04
а чо вы такие картинки грузите в background? через img можно было бы сделать loading=lazy. стало бы ещё быстрее )
ответить
коммент удалён
· 20.04
А что с картинкой? Lazy loading вообще не даёт им прогрузиться очень долго, пробовала
ответить
ответ удалён
· 20.04
странно… ну ладно, как скажете… ) есть ещё картинки только с прозрачными скруглениями уголков — их вроде тоже можно "откусывать" с помощью css, а сами картинки поменять формат без альфа-канала, что тоже сильно поможет в скорости
ответить
ответ удалён
· 20.04
🤔 звучит хорошо
В начале у меня и был такой план —загружала картинки в jpeg и скругления делала через CSS — но они тормозили всю страницу (тк с первого экрана уже есть картинки)
Возможно, конечно, это потому, что в тот момент они не были оптимизированы
Пробовала стиль скругления поставить в конец страницы — это дало то, что всё грузилось, а картинки со скруглениями тормозили и все тексты были без фона, жуткое зрелище 😀
ответить
ответ удалён
· 20.04
Может ещё дело в том, что стиль получилось загрузить только через библиотеку, и это всё тормозило (в Тильда, как я поняла, по-другому было никак)
ответить
ответ удалён