Оптимизация шаблона Boxed 2.X

982
Испльзовал на своём сайте шаблон Boxed - хороший, но при проверке в google speed набрал всего 45 баллов...
Оптимизация шаблона Boxed
Решил это исправить. Итак, что было сделано для ускорения:

1. Убраны из шапки сайта все скрипты и css кроме необходимых для загрузки шапки
2. Скрипты и css собраны в 1-2 файла и сжаты компрессором.
2.1 jquery загружаю с сервера Гугл. Тратится примерно 100мс. При загрузке с моего хостинга 200-300мс, с Яндекса - 200мс.
3. К изображениям в материалах, применена Lazy load - скрипт "ленивой" загрузки. Загрузка картинок по мере прокрутки страницы. Так как качество картинок ухучшать не хотелось, а гугл ругался что не сжаты
4. (это уже не шаблон) в .htacess настроено время кеширования файлов у клиента.
5. Картинки иконок заменил на свой шрифт с этими иконками. (шрифт создаю здесь https://icomoon.io)

В итоге, на тестовой странице скорость выросла с 45 до 82 пунктов в гугл (сейчас может быть чуть меньше, веду работы на сайте)
Это конечно не предел ускорения, но считаю, вполне приемлемый результат. Пример страницы: Статья про Пихту
Комментарии (21)
Capitan 17 декабря 2017 в 11:04 0
small user social cms
Ваш сайт на Инстансе? Красивый сайт. Оч не похож :)
vikont 17 декабря 2017 в 12:04 +2
small user social cms
Копирайт Инстанта, вы зря удалили, он на скорость не влияет smile
Мирослав 17 декабря 2017 в 12:18 0
small user social cms
Верно, исправим :)
Николай (asd43) 17 декабря 2017 в 23:42 0
small user social cms
как то сайт ваш трудно листается, рывками. по 4 пункту можно подробнее, результат ваш очень хороший, спасибо за пост! Постов такого направления явн не хватает, не все разработки выкладывать, без дополнений можно, без трафика нельзя)))
Мирослав 18 декабря 2017 в 10:18 +2
small user social cms
Листается с рывками у вас возможно, из-за эффекта размытия картинки фона. Проверить надо.
По 4 пункту. В конец файла .htacess (в корне сайта) добавил:

<ifModule mod_expires.c>
# Add correct content-type for fonts
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg

# Compress compressible fonts
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml

ExpiresActive On
#по умолчанию кеш в 600 секунд
ExpiresDefault "access plus 600 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 2592000 seconds"
ExpiresByType text/javascript "access plus 2592000 seconds"
ExpiresByType application/javascript "access plus 2592000 seconds"
ExpiresByType application/x-javascript "access plus 2592000 seconds"
# Cache Fonts
ExpiresByType application/vnd.ms-fontobject "access plus 2592000 seconds"
ExpiresByType application/x-font-ttf "access plus 2592000 seconds"
ExpiresByType application/x-font-opentype "access plus 2592000 seconds"
ExpiresByType application/x-font-woff "access plus 2592000 seconds"
ExpiresByType image/svg+xml "access plus 2592000 seconds"
#кэшировать html и htm файлы на один день
ExpiresByType text/html "access plus 43200 seconds"
#кэшировать xml файлы на десять минут
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>

<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf|js|css|pdf|woff)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>
Ris 18 декабря 2017 в 00:53 0
small user social cms
Google speed test - совершенно безумный инструмент.
Рекомендовано снести весь яваскрипт. laugh
Спойлер
Хотя даже на моем сайте с безумной анимацией в шапке, выдало 84 попугая...
Kreator 18 декабря 2017 в 01:07 +2
small user social cms
Не для спора вопрос:

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

а?
Kreator 18 декабря 2017 в 01:09 +1
small user social cms
Мне просто пока не удалось сделать такое наблюдение.
Так же не удалось наблюдать повышение из-за перехода на https.
Мирослав 18 декабря 2017 в 10:11 0
small user social cms
Был такой пример что когда оптимизировал существенно, вскоре позиции выросли. Но это могло быть и из за других факторов.
Ради чего стоит оптимизировать - ради уважения к посетителю. Чтобы открывалось всё быстро. Быстрый сайт - лучше поведенческие факторы. А это должно влиять.
al955 18 декабря 2017 в 21:37 0
small user social cms
"Чтобы открывалось всё быстро". Это уже почти неактуально. Время медленного интернета безвозвратно уходит, все и так довольно быстро грузится.
Мирослав 19 декабря 2017 в 11:08 0
small user social cms
Интернет быстрый не везде, кроме того не забывайте что 50% трафика с мобильных устройств. А там как повезёт...
Какой бы ни был быстрый интернет, если у вас 100 запросов к серверу, это будет ощутимо медленнее, чем если их 10
Rainbow 20 декабря 2017 в 14:54 0
small user social cms
Сделать на каждой странице только по одному предложению и по одной картинке 100Х100px., а еще лучше вообще без изображений и текста, тогда совсем быстро будет загружаться однако)))

ИМХО скорость загрузки сайта понятие субъективное, оптимизировать надо, но без фанатизма

Мне достаточно если страница загружается больше 50% процентов тестируемых сайтов по известному сервису теста загрузки:
https://tools.pingdom.com/
Посмотреть, в диаграмме, что больше всего тормозит и оптимизировать.

Учитывая что сайты сейчас в основном оптимизированные, 50% уже не плохой показатель, если больше - еще лучше))

С сервисом от Google как то не сложилось... слишком много хочет, при неизвестной отдачи и как писал выше субъективности измерений.
al955 21 декабря 2017 в 12:46 0
small user social cms
ради интереса прогнал через этот сервис несколько популярных сайтов с гигантской посещалкой. По одному выдало результат 22/100 ))
Kreator 21 декабря 2017 в 16:07 0
small user social cms
Мои сайты и мои шаблоны по показателям превзошли не менее чем в 1,5 раза самые посещаемые и популярные сайты мира. Меня это успокаивает. Хоть в чем то лучше них. А вообще я иногда завидую людям. у которых уже не осталось никаких задач и выводят сайты на лучшие показатели. Показатели это хорошо. Но всегда находятся более приоритетные задачи.

Вы еще поспорьте какой из нижеперечисленных вариантов правильней, а если не правильный то почему, и какие нарушения, санкции и наказания предусмотрены:
Код HTML:
  1. <meta name="generator" content="InstantCMS - www.instantcms.ru"/>
или
Код HTML:
  1. <meta content="InstantCMS - www.instantcms.ru" name="generator"/>
letsgo 21 декабря 2017 в 20:58 0
small user social cms
Kreator, скорость сайта имеет значение. Для сайта, который комплексно оптимизирован, правильно добавить и показатели загрузки высокие. Если в целом сайт расхлябан, то это не поможет.
Kreator 21 декабря 2017 в 22:03 0
small user social cms
Так я и не спорю.

Только если на сайте:
1) Нет контента
2) Нет никакой политики развития
3) Нет дизайна (юзабилити)
4) Нет ничего интересного.

То я не думаю что нужно начинать именно с этих показателей. Я такие люди есть. Мало того, через год-два при не измененных 1-4 пунктах они продолжают "оптимизировать" сайт.

Оптимисты.
Kreator 21 декабря 2017 в 22:04 0
small user social cms
Забыл к пунктам:
5) Нет посещаемости
6) Нет данамики к улучшению
LxDx 22 декабря 2017 в 10:39 0
small user social cms
50%? у меня уже давно за 60 перевалило, а порой и 70%
Да по себе знаю, лень даже к компу подойти порой, когда рядом телефон
Rainbow 22 декабря 2017 в 11:01 0
small user social cms
50%? у меня уже давно за 60 перевалило, а порой и 70%
laugh


Я же написал 50% хорошо, если больше - лучше)). У меня сейчас 87% показал, но видел на нем и 91%.

Как то так))

Спойлер
Rainbow 22 декабря 2017 в 11:10 0
small user social cms
ЗЫ: Сайт правда на 1-й ветке...
letsgo 22 декабря 2017 в 11:51 0
small user social cms
gmetrix проверяйте, он самый объективный.