Как ускорить сайт в облаке для просмотра с мобильных устройств?
Гугл-тест выдает 8 баллов из 100: https://developers.google.com/speed/pagespeed/insights/?hl=RU&url=bonafide-moscow.com
Там же предлагаются следующие пути решения:
Отложите загрузку скрытых изображений
15,24 s
Удалите неиспользуемый код CSS
15,11 s
Настройте подходящий размер изображений
13,74 s
Уменьшите размер кода JavaScript
9,24 s
Устраните ресурсы, блокирующие отображение
2,68 s
Используйте современные форматы изображений
Как можно реализовать эти рекомендации в облаке webasyst?
Кстати, изображения я использую 300х450. Это что, много?
На какой результат можно рассчитывать, если переехать на свой хостинг?
Тема Дефолт 3. CDN подключен. Debug-режим отключен.
9 ответов
Размер главной страницы 6мб(для ретины даже 10мб) - это много, тем более для мобильной версии.
https://lighthouse-dot-webdotd...
https://gtmetrix.com/reports/b...
У вас очень много счетчиков, поэтому стоит проверить что из этого можно отложить на потом. Особенно большие файлы стилей из VK.
Отложить загрузку изображений через редактирование шаблона.
Новый формат изображений через доп.плагины.
Спасибо за ответ. Буду рад так же ответам на вопросы:
1) Подскажите пожалуйста, на какое разрешение картинок ориентироваться?
2) Как можно счетчик отложить на потом? В моем понимании он либо установлен, либо не установлен.
Конкретно по VK провел эксперимент. Убрал виджет на тестовой витрине. Оценка не изменилась, все те же 8 баллов из 100.
3) Насчет откладывания загрузки изображений буду признателен, если есть ссылка на инструкцию.
4) Новый формат это Webp? Что будет эффективнее: перевести все картинки в webp или пережать все картинки с помощью сервиса TinyPNG?
Счетчики не при делах. Размер картинок и их формат тоже практически не влияет ни на что в данном случае. Без этого пока хватает "загадок". И одним ускорением для мобилок вы не отделаетесь. Там и для компов-то тяжко, хотя скорость передачи и большее кол-во вычислительных ресурсов как-то это сглаживают.
В код даже не глядел. Увидел. Обалдел.
Чисто для справки в качестве для понимания ситуации по сайту вцелом.
Страница категории с 10 шт товаров 44/83 балла.
Карточка товара набирает 38/81.
Главная страница 10/20 в лучшем случае.
Уберите или сделайте "ленивую загрузку" каталога на 116!!! товаров с выбором артикулов на главной и проблема станет намного меньше (в разы).
Вы просто слишком сильно перегрузили главную. Скриншот из теста загрузки четко это показывает. Даже html "варится" 1.5 сек и большая часть этого времени - ожидание. В то же время в поиске у вас используется механизм "Загрузить еще", но включается он как-то далеко не сразу (его бы подпилить как надо), но однако поиск без параметров т.е. просто search/?query= набирает сходу 26/63 балла, что почти в 3 раза лучше главной т.к. укладывается в 90 запросов (в 2 раза меньше). Зависимость не линейная может быть.
Оптимизируйте выдачу товарного контента на главной каким-нибудь подобным образом, если потребность в 116 товарах реально есть, выдавая порциями по 10-15 штук хотя бы.
После этого можно будет приступать к оптимизации кода, допиливанию темы, тюнингу плагинов и другим мелочам.
Спасибо за ответ.
У меня включен именно Lazy Loading на витрине. Кстати, другой вариант загрузки (постраничная навигация) выдает 7 баллов из 100.
На главной странице действительно много товаров, и я мог бы сделать меньше. Но не сильно меньше. И, боюсь, это не решило бы кардинально проблему скорости сайта. Возьмем для примера страницу самой многочисленной категории (лосины). Сделать в ней меньше товаров никак не возможно. И посмотрим результат - 21 балл из 100. Сильно лучше, но все же очень мало.
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fbonafide-moscow.com%2Fcategory%2Fleggins%2F
Включенный в настройках Lazy видимо никак не влияет на вашу главную страницу т.к. выбрасывает похоже всю кучу разом как есть.
За одну подгрузку в категориях сейчас выводится по 30 товаров. При больших эскизах 300х450 точек и подгрузке выбора артикулов размеров стоило бы уменьшить вывод товаров до 15-20 штук на загрузку.
И ещё, при таких размерах эскизов как у вас 300х450, сильно сомневаюсь вообще в необходимости генерации x2 эскизов для ретины. Лишнее это всё. От лукавого. Вы для ретин только все портите этой генерацией.
Эскиз на примере увеличился с 47 кБ для компа до 89 кБ для мобилы. Кому на мобиле нужен в два раза более тяжелый файл чем для компа? Надо менять подход к мобильной верстке и выбрасывать этот тяжелый мусор х2, если не знаете для чего он вам нужен.
Отключил генерацию 2x эскизов.
Не подскажете, как уменьшить вывод товаров до 15-20 штук на загрузку?
Есть бесплатный плагин https://www.webasyst.ru/store/... Вам нужен параметр product_per_page
В вашем случае нет единого рецепта как поступать и куда нажать, чтобы стало хорошо и быстро. Пока по факту есть несколько "толстых" явных проблем.
1. Перегружена главная и ленивая загрузка там не работает.
2. Тяжелые эскизы.
3. Не достаточно оптимизирован и дозирован вывод информации в категориях.
4. Бардак в CSS и скриптах (очень много всякого набросано абы как), но уже финальная стадия, когда первые три пункта решены и пятый тоже в процессе решения.
5. У 10 рандомно взятых страниц товаров и категорий не заполнен мета-тег description и с title беда. В плане SEO - это полный провал.
Зачем вам столько счетчиков, если у вас пункт 5 полностью не выполнен? Я понимаю, что основные каналы у вас скорее всего это Инста и чуть-чуть ВК, но сайт не должен выглядеть как "сирота".
Теперь немного картинок об оптимизации изображений из разряда БЫЛО-СТАЛО
То же самое в оптимальном PNG
Случайно взятый эскиз товара после оптимизации jpeg и после конвертации в webp
Большие фото товаров тоже жмутся примерно в таком же соотношении. 25% дает простая оптимизация jpeg и до 50% конвертация в webp. Это всё уменьшит время на загрузку графики соответственно на примерно те же проценты.
Плагин конвертации в webp вы найдете в Магазине плагинов.
Уменьшил количество выводимых товаров и переконвертил картинки в webp.
Получил 33 балла на странице категории: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fbonafide-moscow.com%2Fcategory%2Fleggins
Заполнение мета-тегов и description как-то улучшит скорость сайта?
Будут еще практические советы по улучшению скорости?
Насколько сильно грузится ваш сервер (CPU/ОЗУ)? У вас долго сервер отдает саму страницу, это плохо.
Может дело в хостинге, если расположить на быстром хостинге в Москве, будет быстрее. Также нужно смотреть в сторону кеширования, базы данных, переход на nginx.