VamShop 2 набирает 100 баллов из 100 возможных в тесте Googe PageSpeed Insights

[support 447]

VamShop 2 набирает 100 баллов из 100 возможных в тесте Googe PageSpeed Insights

 

Google PageSpeed Insights - https://developers.g...speed/insights/

 

Проверьте сами.

 

Адрес демки VamShop 2 - http://demo2.vamshop.ru

 

Тест для мобильных устройств: Скорость 100/100 (100 баллов из 100).

Тест для мобильных устройств: Удобство 100/100 (100 баллов из 100).

Тест для компьютеров: 100/100 (100 баллов из 100).

 

 

Изменено 24 августа, 2015 пользователем VaM

[KoVaLsKy 59]

Здорово, но судя по скринам - что то Явно не подгружается гуглу http://SSMaker.ru/9dc38b75/

[support 447]

Эти тесты - просто демонстрация возможностей VamShop 2, в том смысле, что изначально в движке предусмотрены и реализованы очень многие вещи, которые на первый взгляд не видны обычным посетителям.

 

Ну да, стили грузятся не сразу, всё сделано по советам того же гугла, вот что касается стилей и их блокировки хода загрузки страницы - https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

 

Можно сделать, что б и на скринах были всё нормально, но это придётся выносить css стили из файлах, в inline, т.е. прямо в основной шаблон, я пока что не хочу так делать, т.к. используется bootstrap и адаптивный шаблон, то вынос стилей в inline очень сильно раздует размер страницы.

 

Если коротко, то загрузка стилей отложена, т.е. сначала запрос документа идёт, а стили чуть позже грузятся, что б они не блокировали отображение страницы.

 

"живым" пользователям это не заметно практически, разве что если очень и очень медленный интернет.

 

В Chrome Developer Console видно, когда грузится стиль.

 

Да и в любом случае, всё это можно отключить очень легко и быстро в VamShop 2 и вернуться к обычной загрузке, т.е. поднять js файлы в шапку домента, грузить css стиль как обычно, а не через скрипт.

[support 447]

Результаты теста loadimpact.com

 

Очень даже неплохо получается.

 

Генерация страницы 0.26 секунды даже при 50 активных "виртуальных" пользователях.

Причём время загрузки практически не зависит от количества "виртуальных" пользователей, что, на мой взгляд, очень хорошо.

 

1 посетитель онлайн или 50 посетителей онлайн, без разницы, страницы открываются одинаково быстро, что очень важно.

 

[KoVaLsKy 59]

Ну и сервер был настроен же? Gzip, кэширование.

 

*палецвверх*

[support 447]

Нет, на стороне сервера ничего не делалось, хостинг обычный, не VDS, у меня всё равно нет доступа к настройкам веб-сервера.

 

Используются стандартные модули apache, я имею в виду mod_deflate и mod_expires, эти модули практически у всех хостеров включены по умолчанию.

 

А на стороне магазина в .htaccess указаны конечно строки для gzip сжатия файлов, для expire заголовков.

[Diana 0]

Был обнаружен такой баг, в браузерах опера и firefox, по ссылке  http://demo.vamshop.com отображаеться пустая страница только текст без стилей. Стили подгружаются только в последних версиях браузеров.

[support 447]

А какой браузер и какой версии у Вас, если не секрет?!

 

Я уже выше говорил, что это больше демонстрация возможностей, т.е. добиться результата в 100% во всех тестах вполне реально, правда на работающих магазинах довольно сложно, особенно это касается оптимизации картинок товаров, для этого нужно библиотеку на сервер устанавливать. В демо-версии просто картинки тестовых товаров уже оптимизированы, на рабочем магазина такой вариант не пройдёт.

 

Если вернуть загрузку стиля обычным способом (сейчас css файл со стилями грузится через javascript и не в первую очередь, что б не тормозить отображение страницы), тогда 100% уже не будет, но наверное придётся вернуть, посмотрим.

 

Хотя конечно со 100% результатом даже на глаз заметно, как быстро открывается demo.vamshop.com

 

Во всяком случае у меня на компе и с мобилки очень заметна разность в скорости отображение.

 

demo.vamshop.com открывается практически так же быстро, как локальная копия магазина, установленная у меня на компе.

[Diana 0]

Да конечно бесспорно, 100 это идеал, но как презентация возможностей даже очень и очень хорошо! Скорость очень заметна, это в целом касается не только последней но и в целом всей линейки очень быстрая.
Браузеры у меня конечно устаревшие Опера 12, и FireFox 12. но все равно есть людей у которых и похуже стоит, обидно если клиент зайдет к вам на демо и увидит пустой сайт. Там явно проблема в джаваскприпте все выглядит как на скрине что сбросил KoVaLsKy.

[support 447]

Это не просто старые, а очень старые  :dad:

 

Спасибо за отзыв, сейчас сделаю, что б и в старых браузерах было всё хорошо

[support 447]

Проверил старые версии на тесте браузеров - https://www.browserstack.com/screenshots

 

По идее, начиная с Firefox 23 версии загрузка стилей работает через javascript.

 

Попробую аналогичные скрипты поискать, может есть скрипты которые подгружают стили и в старых версиях.

[support 447]

Diana

 

Нашёл скрипт, который решают описанную проблему.

 

т.е. и в старых версиях браузеров работает и в тесте Google PageSpeed Insights нормальные скриншоты показывают.

 

Если не сложно, зайдите со своих древних браузеров и посмотрите как сейчас отображается http://demo.vamshop.com

[KoVaLsKy 59]

Саш, а каким образом было отложена загрузка в шапке jQuery и стилей?

[support 447]

Все скрипты просто вниз вынесены.

Что б правильно работал jQuery код по всему магазину, т.е. сами js файлы внизу ведь, а js код вверху, просто так он работать не будет, будет писать ошибку, есть вот такой способ - http://writing.colin-gourlay.com/safely-using-ready-before-including-jquery/

Стили загружаются так - https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

или вот ещё есть вариант - https://github.com/filamentgroup/loadCSS

[support 447]

Ну и много всего остального, в общем, были учтены все замечания гугл.

Что б было совсем идеально, надо решить проблему скриншотов вот этих (в том числе отсюда и ноги растут, что в старых браузерах стили не подгружаются), подгружать стили чуть раньше, но в тоже время, что б они не блокировали загрузку.

 

Вот тогда будет всё идеально.

 

Попробую решить и эту проблему.

[support 447]

Заменил гугловский скрипт отложенной загрузки стилей на loadCSS - https://github.com/filamentgroup/loadCSS

Поддерживает любые браузеры, в том числе и старые.

 

Теперь в Google PageSpeed Insights всё нормально выглядит, в смысле скриншоты тоже нормальные.

В старых браузерах тоже всё работает хорошо.

[Diana 0]

Теперь все отлично и в старых браузерах, даже в совсем древних )

[Diana 0]

Мои поздравления это наверное первая CMS которая набрала 100 из 100 :)

[support 447]

И Вам спасибо, что стали небольшим таким тестировщиком.  :pff:

 

Пусть это и "сферический конь в вакууме", если можно так выразиться, тем не менее, все рекомендации гугла для быстрых сайтов, были выполнены в VamShop 2 и это действительно заметно "на глаз", что называется.

 

Но всё равно, как я уже говорил, на работающих магазинах и на абсолютно всех страницах магазина добиться будет сложно 100 баллов.

 

Хотя, есть вариант, что в будущих версиях абсолютно все страницы VamShop 2 по умолчанию будут давать 100 баллов, есть одна идея как этого добиться, но самое главное уже сделано, остались детали.

 

К примеру, если включите счётчики яндекс метрику и google analytics, всё, 100 баллов уже не будет наверняка, картинки товаров не сжатые специальной библитекой на стороне сервера тоже 100 баллов не дадут.

[Diana 0]

Да это понятно конечно )
А тут на форуме есть где-то раздел предложений и пожеланий по развитию CMS?

[support 447]

Можно например здесь создать тему - http://forum.vamshop.ru/forum/18-%D0%BF%D1%80%D0%B5%D0%B4%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F-%D0%BF%D0%BE-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B5-%D1%81%D0%B0%D0%B9%D1%82%D0%B0-%D1%84%D0%BE%D1%80%D1%83%D0%BC%D0%B0/

[support 447]

Видимо, в Google PageSpeed Insights тоже свои глюки есть.

 

Вот, для примера, две одинаковые страницы умных часов:

 

http://demo.vamshop.com/product/samsung-gear-2-charcoal-black.html

100 баллов по всем тестам.

 

http://demo.vamshop.com/product/samsung-gear-2-wild-orange.html

100 баллов по мобилкам и 89 для десктопов.

 

А ведь страницы абсолютно идентичные, html структура одинаковая, скрипты одинаковые, все одинаковое за исключением количества картинок товара, но количество картинок не должно влиять на этот тест, главная страница тоже проходит его на 100 баллов, хотя там картинок намного больше.

 

Так что, будем считать, что вопрос оптимизации скорости загрузки VamShop 2 на этом можно закрыть.

 

Всё, что можно было сделать, сделано и результат действительно хороший, заметный на глаз, что называется.