Многие ругают Drupal, мол слишком сложный. Вы просто не умеете его готовить!
Вступление
Как приготовить Drupal к прохождению теста PageSpeed Insights? На что обратить внимание? Как начать “разгонять” свой сайт, а самое главное - нужно ли это вообще делать?
Очень многие пользователи CMS Drupal сталкиваются с этими вопросами, давайте попробуем в этом немножко разобраться при этом не углубляясь в дебри оптимизации сервера и каналов связи. Да-да они тоже имеют влияние на результат теста. Так что изначально предположим что сайт находится на хорошем хостинге с приличным каналом связи.
Что же можно исправить сразу со стороны CMS Drupal и получить приличный прирост скорости загрузки страниц? Это посмотреть в каком формате и качестве у вас сохранены изображения которые используются как в контенте так и в теме оформления сайта, А также проверить еще два важных момента, это кэширование и режимы отладки в теме и модулях.
Изображения
Делаем тест PageSpeed Insights и получаем результат.
Изначально PageSpeed Insights будет нам навязывать прогрессивные форматы изображений, такие как JPEG 2000, JPEG XR и WebP и скажет что они гораздо круче чем популярные сейчас PNG и JPG, JPEG.
Так ли это? Если кратко то ДА, НО! Вот в этом НО вся боль и печаль новых технологий, ни один из новых форматов не поддерживается сразу всеми популярными браузерами, в одних отображаются в других нет. Конечно же есть ряд “костылей” которые позволяют в случае если браузер поддерживает данный формат использовать его (например WebP для Chrome, да он там работает прекрасно), а если не поддерживает (например Safari, там вместо изображения в формате WebP просто прозрачный фон) то показывать то же изображение но в формате JPG или PNG.
То есть нам придется, мало того что делать “костыль” и переписывать все материалы, так и одну и ту же картинку сохранять в двух разных форматах… Оно нам нужно? Спасибо но нет.
Так что же делать? Давайте просто посмотрим можно ли уменьшить размеры файлов изображений которые мы используем сейчас. То есть откроем все изображения в, например Photoshop'е и покрутим настройки качества изображений. Сохраним все изображения как копии и посмотрим на разницу размеров полученных файлов.
Как видно на скриншоте какие-то файлы сильно ужались, какие-то не особо. Например about-me.png с 350Кб уменьшился до 90 Кб, это уже экономия больше чем в три раза! Отлично теперь посмотрим на результат PageSpeed Insights.
После результатов Page Speed Test, была проведена оптимизация изображений, результаты ниже.
Вполне себе приличный результат!
Кэш и режим отладки TWIG
Зачастую многие то ли по незнанию, то ли по невнимательности забывают включить и настроить кэширование содержимого, которое кстати является частью самого ядра CMS Drupal и не требует установки сторонних модулей. А также встречаются случаи когда “недобросовестные” фрилансеры и даже штатные разработчики включают отладку TWIG, а потом забывают ее выключить… Да такое тоже бывает.
Давайте в качестве эксперимента, отключим кэширование на сайте и включаем режим отладки twig. Что же из этого вышло? Смотрим.
До
После
Как видно на скриншоте мы моментально потеряли 31 пункт в тесте PageSpeed Insights. Есть над чем подумать, не правда ли?
Выводы
За счет изображений вы можете получить прирост до 10-15 пунктов, а за счет кэширования и отключения twig отладки еще 25-35 пунктов. Итого только исправив эти два момента мы получаем улучшение показателей до 40-50 пунктов в тесте PageSpeed Insights.
Не забывайте, что тест PageSpeed Insights проверяет конкретную страницу сайта, а не весь сайт в целом! К чему это? К тому что стоит в первую очередь оптимизировать только те страницы или разделы сайта, которые имеют для нас значение, а не браться делать все сразу.
Кстати можете потратить 10-15 минут и самостоятельно “прогнать” через PageSpeed Insights ваши любимые сайты, посмотрите как обстоят дела у них ) Вот ссылка на тест.
И конечно же старайтесь работать с профессионалами, чтобы не попадать в такие ситуации!
Комментарии