RSS Мои друзья Контакты

Оптимизация загрузки страницы в Magento 1.x

Если сайт грузится дольше 3-5 секунд я закрываю вкладку. Почему? Да просто я не люблю ждать. Не люблю ждать людей, которые опаздывают, поезда, самолеты, не люблю ждать своего заказа в ресторане и больше всего я не люблю ждать пока загрузится сайт на моем 3G интернете :)

Оптимизация клиентской части в Magento не то чтобы плохая, она ужасная. JavaScript код можно найти повсюду, начиная з тега head и заканчивая, какими-то блоками в body. Самое страшное это код в блоках, потому что "благодаря" этому я не могу перенести все скрипты в конец страницы, и тем самым ускорить ее загрузку... Но все же есть несколько способов которые помогут ускорить загрузку магазина, некоторые применимы только к Magento, другие более универсальные. Давайте разбираться

HTTP кэширование и gzip

Если у Вас есть доступ к настройкам севера, то убедитесь что у Вас включено кэширование для всех рисунков, css и js файлов, а также файлов шрифтов. Также, включить компрессию для всех текстовых файлов при помощи gzip. Современные броузеры умеют делать декомпрессию таких файлов, в конечном счете получается намного быстрее заархивировать файл и отправить меньше данных по сети и потом его розархивировать. О том как включить HTTP кэширование на веб серверах Apache2 и nginx, я написал в отдельной статье.

Оптимизация серверной части в Magento

Включите все возможное кэширование в Magento, это особенно важно для блоков, поскольку вся основная работа по отображению данных происходит именно там. Так же очень важно убедится, что страница делает как можно меньше запросов в базу, а если делает много, то все они должны использовать индексы. На момент написания этой статьи Google требует, чтобы время обработки запроса было не больше 200 мс. Это непросто, но это то куда нужно стремится. О том как можно оптимизировать страницу в Magento я писал чуть раньше.

Оптимизация рисунков

Здесь все просто, либо используете Image Magick пакет для PHP и напишите свой адаптер для обработки рисунков в Magento, либо просто используйте онлайн решения. Размер большинства рисунков можно очень сильно уменьшить! Плюс-минус в 2 раза! А это соответственно улучшит загрузку магазина, особенно на мобильных устройствах. Я использую сервис Optimizilla.

CSS спрайты

Самое простое, с чего можно начать - это использовать CSS спрайты. Сейчас очень много инструментов в онлайн и оффлайн, которые помогут создать оптимальный спрайт с набора рисунков (в последний раз я использовал node-sprite-generator), а также сгенерирует готовый CSS, SASS или что другое Вы используете у себя на проекте. Это поможет уменьшить количество запросов на сервер и соответственно ускорит взаимодействие пользователя с магазином.

Data urls

Маленькие файлы (обычно < 3 kB) рисунков, лучше конвертировать в data url и вставлять прямо в CSS. Такие файлики закэшируется браузером вместе с CSS и позволит избежать лишних запросов на сервер. Их лучше не добавлять в спрайты поскольку зазор между ними и соседними рисунками будет большой, из-за чего вырастет размер спрайте. Для конвертации рисунков в data url я использую Base64 Image Ecoder.

Оффлайн режим с Service Worker

Application Cache и Service Worker - это технологии предназначенные для создания сайтов, которые могут работать полностью оффлайн! В случае с Magento, если Вы конечно же это не предусмотрите в JavaScript, эти технологии не позволят пользователям делать заказы пока они не подключены к сети. Но это поможет закэшировать полностью все или большинство рисунков с Вашего интернет магазин, что очень сильно ускорит скорость загрузки страницы для пользователей, ведь все уже скачено, нет нужды делать дополнительные запросы на сервер. Более детально о том, как Service Worker может оптимизировать загрузку можно узнать в отдельной статье.

Удалите ненужные JavaScript и CSS файлы

Наверняка Вы используете нестандартную тему (думаю большинство сайтов использует нестандартную тему ;)), то очевидно, что некоторые файлы не используются вообще, но грузятся на странице. Давайте посмотрим какие файлы можно удалить (размеры файлов указаны для Magento 1.9.3.1):

  1. varien/menu.js (4.4 kB)
    Этот файл "оживляет" список вложенных категорий. Скорее всего стандартное меню Вам не подойдет и Вы используете что-то другое
  2. lib/ds-sleight.js (1.6 kB)
    Решает проблему с прозрачностью в PNG рисунках для старых версий Internet Explorer (5.5, 6). В 2017 году поддерживать IE6? Не смешите и удаляйте!
  3. mage/captcha.js (3.1 kB)
    Позволяет подключить капчу на стороне фронтенд для разных форм. Конечно, если хотите используйте, но сейчас есть уже намного более User Friendly способы удостоверится, что пользователь не робот, чем просто показывать ему сложный рисунок и просить напрячь мозги и разобраться, что же там написано. К примеру Google Recaptcha з чекбоксом.
  4. scriptaculous/slider.js (10.3 kB)
    Опять же, если Вы не используете стандартную тему этот файл Вам не нужен. К тому же, во времена роста количества мобильных устройств, я бы смотрел на что-то вроде Swiper библиотеки, которая позволяет листать слайды не только при помощи стрелочек, но и просто перелистывая слайд на планшете, что более удобно и привычно для пользователя. Некоторое время назад я писал о том, как интегрировать такой свайпер на страницу продуктов.
  5. scriptaculous/builder.js (4.7 kB)
    Скорее всего Ваша тема не используете этот файл. Он нужен только в случае если где-то в теме вызывается метод tagifyText. Нигде по исходному коду этот метод не вызывается, так что спокойно удаляем файл и экономим еще 5 кБ.
  6. scriptaculous/dragdrop.js (31.1 kB)
    Этот файл добавляет возможность перетаскивать элементы и используется в Magento только для увеличения картинки продукта (zoom). Использовать целых 30+ кБ только для одного места - это уже слишком. Если Вы не используете стандартный zoom - спокойно удаляйте.
  7. skin/frontend/base/default/js/ie6.js (1.8 kB)
    Говорит сам за себя, просто удаляйте.
  8. skin/frontend/base/default/css/styles-ie.css (4.3 kB)
    Тоже самое что и предыдущий - удаляем!

Под словом "удаляем", я имею введу "перестаем использовать", сам файл на файловой систему удалять не нужно :) А как же тогда? Просто в local.xml вашей темы добавьте такой код:

<default>
    
    <reference name="head">
        <action method="removeItem"><type>js</type><name>varien/menu.js</name></action>
        <action method="removeItem"><type>js</type><name>lib/ds-sleight.js</name></action>
        <action method="removeItem"><type>js</type><name>mage/captcha.js</name></action>
        <action method="removeItem"><type>js</type><name>scriptaculous/slider.js</name></action>
        <action method="removeItem"><type>js</type><name>scriptaculous/builder.js</name></action>
        <action method="removeItem"><type>js</type><name>scriptaculous/dragdrop.js</name></action>
        <action method="removeItem"><type>skin_js</type><name>js/ie6.js</name></action>
        <action method="removeItem"><type>skin_css</type><name>css/styles-ie.css</name></action>
    </reference>
</default>

В целом получилось удалить 61.3 kB, без лишних движений - очень просто :)

Объедините файлы CSS и JavaScript

В Magento есть возможность объединить все CSS и JavaScript файлы в один. Этой возможность обязательно нужно пользоваться, так как это уменьшит количество запросов на сервер и ускорит загрузку страницы. Чтобы это сделать просто перейдите в Система > Конфигурация > Для разработчика > Настройки JavaScript и Настройки CSS, выберите "Да" для "Объединить файлы JavaScript" и "Объединить файлы CSS". А если Вы вдруг решите поменять какой-то файл, то просто зайдите в "Управление кэшем" и нажмите кнопку "Очистить кэш JavaScript/CSS".

Но будьте осторожны, не забывайте ставить точки с запятой где нужно в JavaScript, потому что если это не делать, то есть вероятность, что после объединения файлов Ваш код перестанет работать. Кстати, это сразу же и подсказка, если код не работает значить нужно искать пропущенную точку с запятой :)

Минифицируйте файлы CSS и JavaScript

В случае с CSS все достаточно просто, если используете SASS или SCSS, так просто передайте опцию "--output-style compressed". Аналогично для других препроцессоров CSS.

С JavaScript все немного сложно, я потратил довольно таки немало времени в поисках нормального минификатора JavaScript написанного на PHP, но так и не смог ничего полезного найти. То что есть либо устаревшее, либо минифицирует недостаточно агрессивно, либо в некоторых случаях минифицирует неправильно. Тогда то я и решил использовать старый добрый uglifyjs (который кстати и точки с запятой вместо Вас поставит ;)).

Получилось лучше чем я ожидал! Понятно, что для этого из PHP нужно запустить отдельный процесс, который это делает и соответственно проверять, пока нет минифицированного файла - отдаем объединенный неминифицированный.

Кэшируйте клиентские переводы

Меня шокировало когда я узнал, что Magento добавляет клиентские переводы на все страницы в виде инлайнового тега script. И это грузится на каждой странице! Больше переводов - дольше грузится страница. По правильному все это нужно писать в отдельный файл, отдавать его клиенту и кэшировать "навсегда"!

Вместо заключения

Почти все из выше перечисленного я использовал не так давно, для достаточно сложного интернет магазина, в котором я решил подключить jQuery 3.2-slim и в конце минифицированная gzipped версия JavaScript составила всего 136 кБ, а CSS 23 кБ. На данный момент Google Page Speed показывает оценки 80 для мобильных устройств и 85 для настольных. Страница отображается за 1.2 с, все картинки и остальные ресурсы загружаются еще через 2 секунды.

В целом результат я считаю очень хорошим как для Magento. Так что оптимизируйте и вкладывайте время в улучшения своего магазина, поверьте это очень сильно увеличит UX и поднимет Ваш сайт в ТОП без дополнительных затрат.

Добавить комментарий

Комментариев: 2

  • Антон
    Ответить 21 июня 2017 г., 9:02
    А еще можно установить PHP7 и тогда вообще летать будет :)
    • Сергей
      Ответить 21 июня 2017 г., 22:32
      Да, я кстати тоже планирую перейти на PHP7 и написать об этом статью немного позже