Хотелось бы поделиться кое-какими подробностями реализации магазина «Оримэкс» на Yii2 и его дальнейшей оптимизации.
В основе используется фреймворк Bootstrap, .js и .css файлы которого подключены внешние через быстрый CDN (BootstrapCDN), тем-самым автоматически немного освобождаем наш сервер (обычный shared-хостинг) от пары лишних запросов, BootstrapCDN делает всю работу за нас — быстро выдает уже минифицированные и gzip-сжатые скрипты через HTTPS.
С JQuery (куда ж без него) поступаем так же, только используем CDN от гугла — Hosted Libraries.
В итоге самые тяжеловесные библиотеки подключаются через CDN и освобождают ресурсы на нашем shared-хостинге.
Далее самый сложный этап — это отказ от встроенного в Yii2 ассет-менеджера, и конфигурация Grunt.
Воспользуемся рецептом из Yii2 Cookbook — Asset processing with Grunt
Единственно, я не использую Less и TypeScript, а для сжатия CSS использую grunt-contrib-cssmin и grunt-data-uri для встраивания в CSS картинок + из личных предпочтений grunt-contrib-concat вместо grunt-concat-sourcemap.
Убраны из сборки JQuery и Bootstrap, т. к. они подключаются как внешние на CDN:
"vendor/bower/jquery/dist/jquery.js",
"vendor/bower/bootstrap/dist/js/bootstrap.js",
"vendor/yiisoft/yii2/assets/yii.js",
"vendor/yiisoft/yii2/assets/yii.validation.js",
"vendor/yiisoft/yii2/assets/yii.activeForm.js"
Дополнительно подключены через Bower:
'vendor/bower/photoswipe/dist/photoswipe.min.js',
'vendor/bower/photoswipe/dist/photoswipe-ui-default.min.js',
'vendor/bower/jquery.equalheights/jquery.equalheights.min.js'
и еще parallax.min.js
Пару слов о них:
PhotoSwipe — лучший лайтбокс, который я видел, современный, имеет приятный минималистичный интерфейс, адаптирован под мобильные устройства, можно листать свайпом, есть полноэкранный режим, зум, управление с клавиатуры, и много других полезных фишек.
jQuery Simple Equal Heights — мини-плагин, название которого говорит само за себя, выравнивает высоту нескольких элементов на странице, в некоторых случаях лучше, чем городить избыточную разметку и CSS с проблемами адаптивности.
Parallax.js — библиотека для создания parallax-эффекта.
Важно! Все .js и .css файлы подключаем перед закрывающим тегом body
Настраиваем кэширование статики
Добавляем в .htaccess (Взято отсюда http://habrahabr.ru/post/154643/)
<ifModule mod_expires.c> ExpiresActive On #по умолчанию кеш в 5 секунд ExpiresDefault "access plus 5 seconds" #кэшировать флэш и изображения на месяц ExpiresByType image/x-icon "access plus 2592000 seconds" ExpiresByType image/jpeg "access plus 2592000 seconds" ExpiresByType image/png "access plus 2592000 seconds" ExpiresByType image/gif "access plus 2592000 seconds" ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds" #кэшировать css, javascript и текстовые файлы на одну неделю ExpiresByType text/css "access plus 604800 seconds" ExpiresByType text/javascript "access plus 604800 seconds" ExpiresByType application/javascript "access plus 604800 seconds" ExpiresByType application/x-javascript "access plus 604800 seconds" #кэшировать html и htm файлы на один день ExpiresByType text/html "access plus 43200 seconds" #кэшировать xml файлы на десять минут ExpiresByType application/xhtml+xml "access plus 600 seconds" </ifModule>
Еще у меня используются нестандартные шрифты:
# Шрифты
ExpiresByType application/x-font-woff "access plus 1 month"
Также уделите внимание сжатию картинок, и гуглу очень не нравится, когда размер img заданный в атрибутах height и width или CSS меньше реального размера изображения.
Надеюсь эти небольшие советы помогут вам получить высокие результаты в тесте Google PageSpeed Insights.