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

+14
2.38K
Испльзовал на своём сайте шаблон Boxed — хороший, но при проверке в google speed набрал всего 45 баллов…
Иллюстрация
Решил это исправить. Итак, что было сделано для ускорения:

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

В итоге, на тестовой странице скорость выросла с 45 до 82 пунктов в гугл (сейчас может быть чуть меньше, веду работы на сайте)
Это конечно не предел ускорения, но считаю, вполне приемлемый результат. Пример страницы: Статья про Пихту
0
Capitan Capitan 6 лет назад #
Ваш сайт на Инстансе? Красивый сайт. Оч не похож :)
+2
vikont vikont 6 лет назад #
Копирайт Инстанта, вы зря удалили, он на скорость не влияет smile
0
Мирослав Мирослав 6 лет назад #
Верно, исправим :)
0
Николай (asd43) Николай (asd43) 6 лет назад #
как то сайт ваш трудно листается, рывками. по 4 пункту можно подробнее, результат ваш очень хороший, спасибо за пост! Постов такого направления явн не хватает, не все разработки выкладывать, без дополнений можно, без трафика нельзя)))
+2
Мирослав Мирослав 6 лет назад #
Листается с рывками у вас возможно, из-за эффекта размытия картинки фона. Проверить надо.
По 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>
0
Ris Ris 6 лет назад #
Google speed test - совершенно безумный инструмент.
Рекомендовано снести весь яваскрипт. laugh
Спойлер
Хотя даже на моем сайте с безумной анимацией в шапке, выдало 84 попугая...
+2
Kreator Kreator 6 лет назад #
Не для спора вопрос:

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

а?
+1
Kreator Kreator 6 лет назад #
Мне просто пока не удалось сделать такое наблюдение.
Так же не удалось наблюдать повышение из-за перехода на https.
0
Мирослав Мирослав 6 лет назад #
Был такой пример что когда оптимизировал существенно, вскоре позиции выросли. Но это могло быть и из за других факторов.
Ради чего стоит оптимизировать - ради уважения к посетителю. Чтобы открывалось всё быстро. Быстрый сайт - лучше поведенческие факторы. А это должно влиять.
0
al955 al955 6 лет назад #
"Чтобы открывалось всё быстро". Это уже почти неактуально. Время медленного интернета безвозвратно уходит, все и так довольно быстро грузится.
0
Мирослав Мирослав 6 лет назад #
Интернет быстрый не везде, кроме того не забывайте что 50% трафика с мобильных устройств. А там как повезёт...
Какой бы ни был быстрый интернет, если у вас 100 запросов к серверу, это будет ощутимо медленнее, чем если их 10
0
RSN RSN 6 лет назад #
Сделать на каждой странице только по одному предложению и по одной картинке 100Х100px., а еще лучше вообще без изображений и текста, тогда совсем быстро будет загружаться однако)))

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

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

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

С сервисом от Google как то не сложилось... слишком много хочет, при неизвестной отдачи и как писал выше субъективности измерений.
0
al955 al955 6 лет назад #
ради интереса прогнал через этот сервис несколько популярных сайтов с гигантской посещалкой. По одному выдало результат 22/100 ))
0
Kreator Kreator 6 лет назад #
Мои сайты и мои шаблоны по показателям превзошли не менее чем в 1,5 раза самые посещаемые и популярные сайты мира. Меня это успокаивает. Хоть в чем то лучше них. А вообще я иногда завидую людям. у которых уже не осталось никаких задач и выводят сайты на лучшие показатели. Показатели это хорошо. Но всегда находятся более приоритетные задачи.

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

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

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

Оптимисты.
0
Kreator Kreator 6 лет назад #
Забыл к пунктам:
5) Нет посещаемости
6) Нет данамики к улучшению
0
Telema93 Telema93 6 лет назад #
50%? у меня уже давно за 60 перевалило, а порой и 70%
Да по себе знаю, лень даже к компу подойти порой, когда рядом телефон
0
RSN RSN 6 лет назад #
50%? у меня уже давно за 60 перевалило, а порой и 70%
laugh


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

Как то так))

Спойлер
0
RSN RSN 6 лет назад #
ЗЫ: Сайт правда на 1-й ветке...
0
letsgo letsgo 6 лет назад #
gmetrix проверяйте, он самый объективный.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.