betabox

Оптимизация скорости работы сайта на ocshop (сжатие передаваемых данных, кэширование браузера и т.д.)

Recommended Posts

Нужно отптимизировать скорость работы сайта на ocshop  Версия 1.5.6.4.1 тема Mattimeo

Приемка по результату не менее 80 балов по тесту Google  PageSpeed Insights (https://developers.google.com/speed/pagespeed/insights/?url=poligraph.club&tab=desktop)

Сейчас тест пишет:

Исправьте обязательно:
Включите сжатие
Используйте кеш браузера
Оптимизируйте изображения
Сократите CSS
Сократите время ответа сервера
Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы

Исправьте по возможности:
Оптимизируйте загрузку видимого контента
Сократите JavaScript
Сократите HTML

результат теста - 23 бала из 100

своими силами решить не получилось. Нужна помощь специалиста.

Важно: наличие опыта подобных работ. 

Оплата 1200 руб. по факту выполнения.

Время выполнения заказа 1 день.
отвечу на все вопросы, пишите

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
1 час назад, betabox сказал:

Исправьте обязательно:
Включите сжатие - включите сжатие 
Используйте кеш браузера - (используйте кэш браузера)
Оптимизируйте изображения - тут дело за вами уже
Сократите CSS - оптимизируйте его (т.е созжмите,сократите)
Сократите время ответа сервера - тут много от чего зависит,от вашего хостинга и до количества модулей и т.д
Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы -  (не получится) (хотя можно скрипты и css грузить асинхронно)

Исправьте по возможности:
Оптимизируйте загрузку видимого контента
Сократите JavaScript - оптимизируйте его (т.е созжмите)
Сократите HTML - у вас в header первые 400 строк - css стили,зачем он там?

 

 

можете скинуть в ЛС  доступы на сайт,и фтп + к хостингу так же...Гляну

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

доброго дня!
1. Включите сжатие  - я включил в СИСТЕМА-НАСТРОЙКА-СЕРВЕР- поставил сжатие 5
ресурс http://www.whatsmyip.org/http-compression-test/?url=cG9saWdyYXBoLmNsdWI=  показывает что у меня включено сжатие. Но google находит много других несжатых файлов файлов, как их сжать я не знаю.

 

2. Используйте кеш браузера -  в .htaccess добавил вот такой код

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 week"
ExpiresByType image/jpeg "access plus 1 week"
ExpiresByType image/gif "access plus 1 week"
ExpiresByType image/png "access plus 1 week"
ExpiresByType text/css "access plus 1 week"
ExpiresByType application/pdf "access plus 1 week"
ExpiresByType text/x-javascript "access plus 1 week"
ExpiresByType application/x-shockwave-flash "access plus 1 week"
ExpiresByType image/x-icon "access plus 1 week"
ExpiresDefault "access plus 1 week"
</IfModule>
## EXPIRES CACHING ##

 

Но google упорно про свое, что делать ???

 

3.  Сократите CSS  - как ?

4.  Сократите JavaScript - как ?

5.  Сократите HTML - у вас в header первые 400 строк - css стили,зачем он там? - в кодах не силен. Это то, что сделал разработчик  используемой Темы.  что сделать?


добавил вот такие строки в .htaccess для сжатия разных типов файлов, при этом сжатие через СИСТЕМА-НАСТРОЙКА-СЕРВЕР-уровень сжатия и включал и отключал результат тот же. 

# compress text, HTML, JavaScript, CSS, and XML
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

 

Результат ошибка 500 
Полдумал ресурсов не хватает, сделал memory limit=128M

результат тот же 

 

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

А почему нельзя несколько примеров сделать на общий обзор? Вроде как тема не плохая и много кто сталкивается с этими вопросами...

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
21 минуту назад, bartax сказал:

А почему нельзя несколько примеров сделать на общий обзор? Вроде как тема не плохая и много кто сталкивается с этими вопросами...

 

1.Сжимаем страницу

2.Делаем кэширование браузера

3.Некоторые скрипты пускаем в асонхрон

4.Оптимизируем картинки

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
7 минут назад, SunnRi сказал:

1.Сжимаем страницу

2.Делаем кэширование браузера

3.Некоторые скрипты пускаем в асонхрон

4.Оптимизируем картинки

))))))))))))))))) ответ супер....

Думаю по некоторым пунктам понятно, но...

2. Как грамотно сделать кеширование браузера?

3. Какие именно скрипты можно пустить в ассинхрон? или методом тыка? многие скрипты в асинхроне рушат функционал...

4. как оптимизировать картинки, которые формируются в кеше? Ведь кешированные картинки имеют например вид "картинка-215x215.jpg"... каждый раз по новому?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

1 - проверяем все ли работает, так как замечены проблемы при работе симплы и некоторых модулей рассчета стоимости доставки.

2 - мало сделать нужно еще и время жизни правильное указать.

3 - делать не рекомендуется. Так как на медленном интернете получите такие артефаки что вам и не снилось.

4 - да. pagespeed выдает отличный архив с уже сжатыми изображениями. А вот изображения товаров и категорий "из коробки можно оптимизировать только уменьшением качества, путем увеличения сжатия". Если использовать imagick - можно получить очень впечатляющие результаты.

5. кроме включения сжатия в настройках магазина, включаем сжатие на сервере для всего статического контента

6. также оптимизируем время ttfb у html контента страницы. И это чуть ли не самый важный показатель.

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
1 минуту назад, bartax сказал:

))))))))))))))))) ответ супер....

Думаю по некоторым пунктам понятно, но...

2. Как грамотно сделать кеширование браузера?

3. Какие именно скрипты можно пустить в ассинхрон? или методом тыка? многие скрипты в асинхроне рушат функционал...

4. как оптимизировать картинки, которые формируются в кеше? Ведь кешированные картинки имеют например вид "картинка-215x215.jpg"... каждый раз по новому?

 

к сожалению серверные настройки не всегда можно расписать путем универсальных инструкций. Очень много зависит от типа хостинга. от правил хостера, от типа сервера и так далее. Так например на reg.ru на дешевых хостингах настроить сжатие статики - невозможно!

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
1 час назад, Yoda сказал:

 

Ну да,насчет ассинхрона - согласен,даже при более менее стабильном интернете могут быть артефакты,но допустим на всякие там аналитиксы - я поставил,траблов не заметил,но получше уже стало,т.к как никак,а скрипты свое время съедают.

Сжатием картинок доверяю tinypng

Отлично сжимает без потерь 1-2 раза,далее начинает съедать детализацию

 

 

Насчет последнего пункта не особо понял(точнее не разбираюсь еще )

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
54 минуты назад, Yoda сказал:

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

Но сжатое не всегда корректно работает,не так ли?Или все же доверяем гугло?

 

 

У меня кстати,часто бьет

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Сжатое что именно. скрипты, которые текст. которые сервер пакует в zip, а потом браузер распаковывает - всегда ок.

Скрипты, которые отдал гугл и вычистил из них пробелы и комментарии - тоже ок.

Картинки - сторонние сервисы ок. Но только для каких то изображений шаблона, движок то все равно потом пережимает все, и так как по дефолту везде GD, то картинки мазанные получаются при большой степени сжатии. Выход - исползовать Imagick. Где то у меня даже библиотека доработанная валяется.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
1 час назад, Yoda сказал:

Сжатое что именно. скрипты, которые текст. которые сервер пакует в zip, а потом браузер распаковывает - всегда ок.

Скрипты, которые отдал гугл и вычистил из них пробелы и комментарии - тоже ок.

Картинки - сторонние сервисы ок. Но только для каких то изображений шаблона, движок то все равно потом пережимает все, и так как по дефолту везде GD, то картинки мазанные получаются при большой степени сжатии. Выход - исползовать Imagick. Где то у меня даже библиотека доработанная валяется.

 

А можно выложить imagick и мануал как подключить? 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

http://www.opencart.com/index.php?route=extension/extension/info&extension_id=23443

 

https://github.com/xmugenx/Opencart-Imagick-Library

 

Бесплатное решение с гитхаба требует допила напильником.

У меня есть - $15 долларов в лицо.

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
В 20.09.2016 at 10:32, Yoda сказал:

 

У меня есть - $15 долларов в лицо.

 

на ocstore 1.5.4.1 запуститься? 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Привет. Вставь в htaccess код: 

<ifmodule mod_expires.c>
<filesmatch ".(jpg|jpeg|gif|png|ico|css|js)$">
ExpiresActive on
ExpiresDefault "access plus 1 month"
</filesmatch>
</ifmodule>

И должно все быть ок.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Ой, лучше б вы серверной оптимизацией увлеклись (время ответа сервера). Все эти сжатия до попки, а в режиме разработки еще и мешают.

Безусловно, в продакшине лучше минифицировать и сжимать, однако, на все 100% гуглу не угодить. Как минимум, фактический размер изображений часто не подгонишь под блоки, ибо responsive и адаптив.

 

На счет асинхронного js, тоже нужно, но осторожно. YepNope + обратные вызовы, нужен индивидуальный подход.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу