Ускорение Magento: советы по улучшению производительности.

Многие знают, что начисто установленная Magento может быть очень медленной в работе. Используя приведённые здесь советы, мы оптимизирует работу нашего магазина.

Включите Управление кэшем в Административной панели Magento

Это первое, что вы должны сделать, перед тем как открыть сайт для посетителей - включить управление кэшем! Это позволить значительно улучшить производительность Magento. Перейдите к вкладке Система > Управление кэшем и включите каждый тип кэша. Просто убедитесь, что при обновлении системы вы очистили кэш, чтобы увидеть изменения.

Включите объединение файлов Javascript и CSS в панели управления Magento

Ещё одна простая настройка находится в Система > Расширенные настройки > Для разработчика. Объедените ваши Javascript и CSS файлы, чтобы сэкономить на первой загрузке, когда посетитель впервые заходит на ваш сайт. Без этого, ваши посетители будут загружать каждый JS/CSS файл по отдельности, один за другим, а использование данной опции резко уменьшит количество HTTP-запросов.

Установите Fooman Speedster через Magento connect

Это бесплатное расширение от Fooman уменьшит ваши JavaScript и CSS файлы используя PHP minify library. А также сожмёт ваш код и обеспечит автоматическое управление версиями. Для установки, нажмите Install Now и получите ключ для вашей версии Magento connect. Потом зайдите в Система > Magento Connect > Управление Расширениями. Вставьте полученный код и установите расширение. Вам может потребоваться установить права на запись для папки через SSH, в установочной директории Magento. Более подробную информацию можно прочитать в руководстве для этого расширения.После установки, ваши файлы будут уменьшены мгновенно.

Установите HTML Minification от Jeemon

Хотя это расширение находится в бета-версии, я не испытал никаких проблем с ней, оно простое и лёгкое в настройке. Получите ключ для установки, следуйте тем же инструкциям, что и в Fooman Speedster. убедитесь, что вы разрешили установку бета-версий расширений, на вкладке настроек Magento Connect. Ваши html файлы будут автоматически уменьшены в размере. Это очень просто.

Оптимизируйте ваш .htaccess файл для большей производительности

Есть много методов оптимизации, которые вы можете использовать, чтобы резко увеличить работу Magento через конфигурацию .htaccess. Вот список:

Включите Gzip компрессию

  1. <IfModule mod_deflate.c>
  2. 	# Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
  3. 	<IfModule mod_setenvif.c>
  4. 	  <IfModule mod_headers.c>
  5. 	    SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s,?\s(gzip|deflate)?|X{4,13}|~{4,13}|-{4,13})$ 
  6. 	HAVE_Accept-Encoding
  7. 	    RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
  8. 	  </IfModule>
  9. 	</IfModule>
  10.  
  11. 	# HTML, TXT, CSS, JavaScript, JSON, XML, HTC:
  12. 	<IfModule filter_module>
  13. 	  FilterDeclare   COMPRESS
  14. 	  FilterProvider  COMPRESS  DEFLATE resp=Content-Type /text/(html|css|javascript|plain|x(ml|-component))/
  15. 	  FilterProvider  COMPRESS  DEFLATE resp=Content-Type /application/(javascript|json|xml|x-javascript)/
  16. 	  FilterChain     COMPRESS
  17. 	  FilterProtocol  COMPRESS  change=yes;byteranges=no
  18. 	</IfModule>
  19. </IfModule>

Используйте Expires Headers для лучшего управления кэшем

“Веб-страницы становятся всё более сложными, с большим количеством скриптов, множественными таблицами стилей, изображений и флеш на них. При первом посещении страницы может потребоваться несколько HTTP-запросов для загрузки всех компонентов. Используя Expires Headers эти компоненты становятся кэшируемыми, что избавляет от ненужных HTTP-запросов при последующих просмотрах страниц. Expires Headers чаще всего ассоциируются с изображениями, но они могут и должны быть использованы на всех компонентах страницы, в том числе скрипты, таблицы стилей и флеш.”

  1. # ----------------------------------------------------------------------
  2. # Expires headers (for better cache control)
  3. # ----------------------------------------------------------------------
  4.  
  5. # These are pretty far-future expires headers.
  6. # They assume you control versioning with cachebusting query params like
  7. #   <script src="application.js?20100608">
  8. # Additionally, consider that outdated proxies may miscache 
  9. #   www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/
  10.  
  11. # If you don't use filenames to version, lower the CSS  and JS to something like
  12. #   "access plus 1 week" or so.
  13.  
  14. <IfModule mod_expires.c>
  15.   ExpiresActive on
  16.  
  17. # Perhaps better to whitelist expires rules? Perhaps.
  18.   ExpiresDefault                          "access plus 1 month"
  19.  
  20. # cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
  21.   ExpiresByType text/cache-manifest       "access plus 0 seconds"
  22.  
  23. # Your document html 
  24.   ExpiresByType text/html                 "access plus 0 seconds"
  25.  
  26. # Data
  27.   ExpiresByType text/xml                  "access plus 0 seconds"
  28.   ExpiresByType application/xml           "access plus 0 seconds"
  29.   ExpiresByType application/json          "access plus 0 seconds"
  30.  
  31. # RSS feed
  32.   ExpiresByType application/rss+xml       "access plus 1 hour"
  33.  
  34. # Favicon (cannot be renamed)
  35.   ExpiresByType image/x-icon              "access plus 1 week"
  36.  
  37. # Media: images, video, audio
  38.   ExpiresByType image/gif                 "access plus 1 month"
  39.   ExpiresByType image/png                 "access plus 1 month"
  40.   ExpiresByType image/jpg                 "access plus 1 month"
  41.   ExpiresByType image/jpeg                "access plus 1 month"
  42.   ExpiresByType video/ogg                 "access plus 1 month"
  43.   ExpiresByType audio/ogg                 "access plus 1 month"
  44.   ExpiresByType video/mp4                 "access plus 1 month"
  45.   ExpiresByType video/webm                "access plus 1 month"
  46.  
  47. # HTC files  (css3pie)
  48.   ExpiresByType text/x-component          "access plus 1 month"
  49.  
  50. # Webfonts
  51.   ExpiresByType font/truetype             "access plus 1 month"
  52.   ExpiresByType font/opentype             "access plus 1 month"
  53.   ExpiresByType application/x-font-woff   "access plus 1 month"
  54.   ExpiresByType image/svg+xml             "access plus 1 month"
  55.   ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
  56.  
  57. # CSS and JavaScript
  58.   ExpiresByType text/css                  "access plus 1 year"
  59.   ExpiresByType application/javascript    "access plus 1 year"
  60.   ExpiresByType text/javascript           "access plus 1 year"
  61.  
  62.   <IfModule mod_headers.c>
  63.     Header append Cache-Control "public"
  64.   </IfModule>
  65. </IfModule>

Удалите ETag’и

“ Теги объектов (ETag) являются серверным механизмом и используется браузером, чтобы определить, соответствует ли компонент в кэше браузера такому же на сервере. Так как Etag’и, как правило, построены с использованием атрибутов, которые делают их уникальными для конкретного сервера хостинга сайта, теги не будут совпадать, когда браузер получит оригинальный компонент с одного сервера, а потом попытается проверить этот компонент на другом сервере.”

  1. # ----------------------------------------------------------------------
  2. # ETag removal
  3. # ----------------------------------------------------------------------
  4.  
  5. # FileETag None is not enough for every server.
  6. <IfModule mod_headers.c>
  7.   Header unset ETag
  8. </IfModule>
  9.  
  10. # Since we're sending far-future expires, we don't need ETags for
  11. # static content.
  12. #   developer.yahoo.com/performance/rules.html#etags
  13. FileETag None

Удалите не используемые JavaScript файлы в ваших Layout XML файлах

Там очень много JavaScript наворотов. Вы можете спокойно удалить определённые файлы и повысить производительность. Вот пример page.xml layout файла:

  1. <action method="addJs"><script>prototype/prototype.js</script></action>
  2. <action method="addJs"><script>lib/ccard.js</script></action>
  3. <action method="addJs"><script>prototype/validation.js</script></action>
  4. <!--<action method="addJs"><script>scriptaculous/builder.js</script></action>-->
  5. <action method="addJs"><script>scriptaculous/effects.js</script></action>
  6. <!--<action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
  7. <action method="addJs"><script>scriptaculous/controls.js</script></action>
  8. <action method="addJs"><script>scriptaculous/slider.js</script></action>-->
  9. <action method="addJs"><script>varien/js.js</script></action>
  10. <action method="addJs"><script>varien/form.js</script></action>
  11. <!--<action method="addJs"><script>varien/menu.js</script></action>-->
  12. <!--<action method="addJs"><script>mage/translate.js</script></action>-->
  13. <action method="addJs"><script>mage/cookies.js</script></action>

Я закомментировал весь Scriptaculous код и translate.js. Menu.js так же был удалён, для кастомного jQuery кода.

Установите APC, Eaccelerator или Xcache на ваш сервер

Это будет более сложнее - вам потребуется ssh доступ, чтобы установить один из них, на вашем сервере. Эти системы кэширования делают PHP более отзывчивым, за счёт кэширования вашего PHP кода, освобождая интерпретатор от повторной компиляции кода при каждом запросе. Я использовал APC в прошлом и имел смешанные результаты при использовании его с Magento, но попробуйте и посмотрите, увеличится ли производительность вашей страницы.Если вы задумываетесь, какой из них использовать, посмотрите сюда APC vs. Eaccelerator vs. Xcache на StackOverflow.

Переместите jQuery и пользовательский JavaScript код в Footer

Если вы используете jQuery (надеюсь) и кастомный код, вы определённо захотите включить эти файлы в конце, перед окончанием тега body. Таким образом, ваш сайт быстрее отобразится на экране и не надо ждать, пока загрузятся эти дополнительные JS файлы. Больше информации о JS файлах в футере.

Использование Amazon S3 для хостинга картинок и установка OnePica_ImageCDN через Magento Connect

Amazon S3 является экономически эффективным способом отдачи фотографий товаров в вашем магазине Magento. Это дёшево и быстро в установке. К счастью есть бесплатное расширение Magento, которое позволяет вам подключится к вашей Amazon S3 корзине. Используя OnePica_ImageCDN вы можете легко создать свой сервер CDN для изображений, с помощью Amazon S3. Почему вы должны использовать Amazon S3/CDN?

“Маленькое время отклика. Развёртывание контента на нескольких, географически распределённых серверов, помогает пользователям чувствовать, что страницы загружаются быстрее.”

Создавайте CSS Спрайты для уменьшения количества HTTP-запросов

Вот ещё один стандарт фронтенд оптимизации: группируйте ваши фоновые изображения CSS в Спрайты. Браузер загружает изображения, используемые в вашем CSS, когда ваш CSS файл загружается, замедляется скорость отображения. спрайт включает столько изображений, сколько вам требуется, всего в одном файле. Обычно я группирую рейтинги звёзд и кнопки государств в свои собственные, уникальные спрайты, вместо того, чтобы иметь отдельные изображения для каждого государства или рейтинга, например button_hover.gif, button_active.gif или rating_1.gif, rating_2.gif и т.д. Тем не менее, это становится своего рода сложным. Если у вас есть repeat-x или repeat-y фоны, вы не можете поместить их вместе в один спрайт. при создании спрайтов вы используете перекрывание: скрываете в вашем CSS и отрезаете часть спрайта, чтобы показывать только одну часть спрайта. чтобы узнать больше информации нажмите здесь.

Тестируйте скорость вашей Magento Темы

Если вы хотите увидеть, как быстро работает ваша Magento тема во фронтенде, используйте Developer Tools в Chrome, или Firebug в Firefox или установите расширение YSlow для вашего браузера.

Надеемся, эти советы помогут вам в ваших поисках сделать Magento как можно быстрее!

Источник: fastdivision.com

1 Notes/ Hide

  1. kuzvac это опубликовал(а)