Jump to content

Оптимизация и ускорение сайта для максимального повышения оценки pagespeed Гугла

Version number: 1.0.0
   (2 reviews)

3 Screenshots

  • +1 2

About This File

УСЛУГА (работа):

Оптимизация сайта на опенкарт 1.5, 2.* и 3.0

В состав работ входит установка и настройка необходимого софта, включая разработки для оптимизации (модули) от

@sitecreator

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

 

Разработчик уверен в результате и может предложить вам оптимизацию до ее оплаты с пробным периодом в 7 дней. Предложение может быть ограничено ввиду временного отсутствия свободного времени.

 

тестовый сайт:

https://hi-optimizer.sitecreator.pro/

схема дефолтная, но с виджетами, счетчиками, картой, видео-вставкой.

проверка показателей pagespeed для данного сайта:

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fhi-optimizer.sitecreator.pro%2F

 

При отсутствии оптимизации данный сайт оценивается гуглом в 28 баллов. После оптимизации - 98...99 баллов для мобильных.

Это не означает, что любой сайт можно вывести в зону 90+ баллов при малом бюджете (как в данной услуге). Но существенно поднять оценку можно.

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

 

Спойлер

 

9aRuAkc.jpg

 

 

Работа производится с применением профессионального инструмента оптимизатора (Hi-Optimizer by SiteCreator):

 

sitecreator_ru_JyZWVFJfaH.jpg

 

 

На сайте оптимизируются (список не является исчерпывающим):

 

  • стили (CSS)
  • скрипты (JavaScript)
  • объединение, минификация CSS и т.п.
  • откладывание выполнения JavaScript с малым приоритетом
  • задание приоритета выполнения автоматически или в ручном режиме
  • возможность асинхронной загрузки как определенных CSS, так и JavaScript
  • оптимизация всевозможных метрик (Яндекс и др.), аналитик (Гугл, Фейсбук и др.)  (по желанию и при необходимости)
  • оптимизация всевозможных виджетов (Яндекс, Фейсбук, В Контакте и др. )
  • виджеты могут загружаться при попадении их в зону просмотра (lazy load для виджетов)
  • оптимизация всевозможных чатов (Jivosite, Яндекс и т.д)
  • оптимизация карт Гугла и Яндекса (загружаются при попадении в зону видимости - lazy load для карт), и др. карт
  • оптимизация загрузки фреймов (iframe)
  • оптимизация видео-вставок Ютюб, youtube.com
  • оптимизация загрузки и отображения шрифтов, причем, как из внешних источников, так и из CSS, загружаемых с вашего сайта
  • отслеживание дублей CSS, JS и, соответственно, предотвращение их повторной загрузки
  • оптимизация загрузки всевозможных Lightbox (magnific-popup, colorbox, fancybox)
  • другое по необходимости (определяется на основе анализа сайта)

 

Поскольку сперва производится анализ сайта, то невозможно до завершения анализа сайта перечислить все необходимые действия по оптимизации конкретного сайта. Работы по оптимизации производятся с учетом конкретных особенностей сайта. К каждому сайту  - индивидуальный подход!

 

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

 

sitecreator_ru_ko3fmLbRVC.jpg

 

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

 

 

Результат гарантируется!

 

Оптимизация отклика сервера и скорости генерации сервером страниц (отдаваемый HTML) не входит в данную услугу. По оптимизации серверной части пользуйтесь другими услугами.

Как правило, отклик страницы в 1 сек или быстрее не сильно влияет на возможность достижения высоких баллов по оценке Гугла. Т.е. в настоящее время гугл придает наибольшее значение в своей оценке именно оптимизации скриптов JavaScript, CSS, и меньше придает значение скорости отклика сервера, но все в разумных пределах, разумеется.

 

Для разработчиков, оптимизаторов и др. девелоперов возможна индивидуальная скидка до 50%  от начальной стоимости. Да и просто тем, кто заказывает 2-й раз данную услугу также могу предложить скидку.

За купоном на скидку, пожалуйста, обращайтесь в личку или на почту [email protected]

 

sitecreator_ru_EQ7IVF6CZ9.jpg

 

 

Для работы используется профессиональный инструмент:

 

 

Модуль Hi-Optimizer не является панацеей для всех случаев.  Бывают крайне неудачно сделанные сайты (соответственно с оценкой гугла близкой к нулю),  которые без серьезной переделки невозможно оптимизировать, а это только ручная работа с версткой, кодом и т.д. Предлагаю сперва (до заказа услуги или покупки модуля) консультироваться с исполнителем и делать предварительный анализ и прогноз на предмет возможной успешной оптимизации конкретного сайта.

 

На результат могут отрицательно влиять ошибки в коде HTML, имеются ввиду грубые ошибки (непарность парных тегов, незакрытые кавычки и т.п.). Изначально предполагается, что HTML на странице не содержит грубых ошибок, в противном случае возможна некорректная работа hi-optimizer на таких страницах, тестирование hi-optimizer не проводилось на страницах, содержащих грубые ошибки HTML (синтаксические и иные), соответственно автор не несет никакой ответственности за корректную работу таких страниц.

 

Автор данного программного решения не может брать на себя обязательств, что на вашем конкретном сайте в любом  случае можно непременно достичь оценки гугла в 90+ баллов только лишь за счет применения программного решения "Hi-Optimizer". Оптимизатор Hi-Optimizer в первую очередь позволяет выполнять многие рекомендации гугла в плане оптимизации, например, позволяет снимать блокировку основного потока   (сторонними скриптами)  полностью (или, как миниум, существенно уменьшать ее).

 

Выполненные (частично или все) рекомендации гугла по оптимизации и/или увеличение оценки на (минимально) 10 баллов (при первоначальном нахождении в красной зоне, т.е. если стартовая оценка была ниже 50) могут считаться критерием для успешной работы Hi-Optimizer. Конечный результат сильно зависит от индивидуальных особенностей сайта, в первую очередь - от примененного шаблона.

 

Под спойлером подробнее о том какими средствами объективного контроля (от гугла) можно оценить как Hi-Optimizer выполняет оптимизацию по конкретным рекомендациям гугла.
 

Спойлер

 

Оптимизатор Hi-Optimizer в первую очередь позволяет выполнять многие рекомендации гугла в плане оптимизации, например, позволяет снимать блокировку основного потока   (сторонними скриптами)  полностью (или, как миниум, существенно уменьшать ее).  Как именно гугл оценит выполнение конкретной своей рекомендации заранее предсказать невозможно в цифрах, это связано с массой обстоятельств, на которые напрямую Hi-Optimizer не может влиять. Например, Hi-Optimizer не может влиять на скорость отклика сервера, на настройки кеширования файлов, заданные сервером, но эти показатели влияют на общую оценку гугла.  Оптимизатор Hi-Optimizer не влияет напрямую на цифры баллов, но позволяет выполнять рекомендации гугла. Работу оптимизатора можно оценивать по выполнению рекомендаций гугла, как пример, ниже показан результат снижения (или полного устранения) блокировки основного потока сторонними скриптами JavaScript.

 

Ниже показан пример ДО и ПОСЛЕ.   "ДО" основной поток работал 29.9 сек, была блокировка основного потока на 7580 мс, была рекомендация гугла по поводу оптимизации шрифтов.

"ПОСЛЕ" основной поток работает уже всего 13.8 сек (выигрыш 16.1 сек ), рекомендации "уменьшить влияние стороннего кода" больше нет у гугла (т.е. выигрыш 7580 мс), также выполнена рекомендация гугла, касающаяся шрифтов ("настройте показ текста").

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

Желание и ожидание заказчиком непременной минимальной оценки 90+ является лишь желанием закзчика,  это ожидание может сбыться, а может и не сбыться. Никаких 100% обещаний разработчик не дает по непременному взлету до 90+ (особенно с почти нуля: с 5 или 15 стартовых баллов, например ). Низкая стоимость данного программного решения не сопоставима по стоимости с услугами вида "ускоряем до 90+ с обязательством и гарантией" и не подразумевает никаких гарантий в достижении оценки гугла 90+ всегда и везде.  Если нужно достижение в 90+ с обязательством, то это возможно в рамках отдельной договоренности и дополнительной стоимости.

Даже при первоначальной оценке конкретного сайта разработчик Hi-Optimizer может отметить какие именно рекомендации гугла может выполнить оптимизатор Hi-Optimizer, но разработчик не может спрогнозировать точно насколько гугл в баллах оценит выполнение каждой отдельной рекомендации или всех рекомендаций вместе взятых. Можно лишь сделать в лучшем случае прогноз на прирост оценки в несколько десятков баллов если у вас первоначальная оценка, например, ниже 50. Если же у вас на старте оценка уже 80 или 85, к примеру, то тут о приросте в несколько десятков баллов не может быть и речи, т.к. до 100 остается всего 15...20 баллов, и чем ближе к 100, то тем дороже каждый балл, т.е. в данном случае подъем на 10 баллов (например, с 80 до 90) - это уже хороший результат.

 

ДО:

sitecreator_ru_afTwSsHpub.png

 

 

ПОСЛЕ:

sitecreator_ru_CQODjR7R4l.png

 

Это (см. ниже) объективные замеры скорости (не путать с баллами!).   Именно они изменяются после выполнения конкретных рекомендаций гугла.

 

sitecreator_ru_ldbAUamuEK.png

 

 

Hi-Optimizer не может уменьшить количество узлов DOM.  Это решается только изменением верстки в ручном режиме.  Количество узлов DOM влияет на итоговую оценку гугла. Гугл рекомендует не превышать число узлов DOM в 1500 узлов.  Если у вас количество узлов, например, 5000, 10 000 или 15 000 (или еще выше), то рекомендуется снизить собственные ожидания получить оценку в 90+ без изменения верстки. Чем выше количество узлов, то тем проблематичнее делать оптимизацию сайта. Если узлов существенно больше 1500, то принципиальное  достижение 90+ будет под вопросом, особенно если начальная оценка гугла близка к нулю (например, 0...15 баллов)

 

sitecreator_ru_SQ133A7NJh.png

 

Гугл рекомендует ( Lighthouse отмечает как проблемы если показатели выше определенных значений):

Lighthouse flags pages with DOM trees that:

  • Have more than 1,500 nodes total.
  • Have a depth greater than 32 nodes.
  • Have a parent node with more than 60 child nodes.

Гугл рекомендует (иначе гугл отметит невыполнение этих условий как проблему):

  • Иметь не более 1500 узлов.
  • Имеют глубину не более 32 узлов.
  • У родительского узла не должно бытьболее 60 дочерних узлов.

 

 

 

 Какие шаблоны из известных являются сложными для оптимизации?

 

Спойлер

 


Назову лишь один, для которого результат оптимизации бывает далеко не всегда удачным. И удачным можно считать даже прибавку в +20 баллов. Это шаблон Рево...шн
Бывает, что на данном шаблоне получается достичь хороших результатов оптимизации, но не всегда.

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

Код:
<script src="catalog/view/javascript/revolution/js_change.js"></script>

 

Именно за счет данного скрипта javascript происходит окончательное построение всей страницы. По сравнению с дефолтным шаблоном или практически с любым иным шаблоном из-за этой особенности имеем значительное увеличение времени до момента отображения страницы и возможности пользователя начать взаимодействие с ней.

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

 

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

 

sitecreator_ru_qyTlF2sKXi.png
 
 
 
Ввиду указанной особенности отрисовки основного контента после загрузки всей страницы за счет скрипта получаем сильную зависимость времени отрисовки всей страницы от количества узлов DOM, которое определяется количеством товаров на странице и/или количеством всевозможных каруселей с товарами (справедливо если рассматривать суть, но с некоторым упрощением). Если коротко, то чем больше на странице товаров, то тем медленнее будет страница и, соответственно, тем меньше она способна набрать баллов по оценке гугла.
 
Если отключить в браузере JavaScript, то хорошо видно, что данный шаблон не рисует основной контент, вместо него будет пустое поле.

 

 

 

sitecreator_ru_xjMmKfT7Ty.jpg

 

 

 

Реальные сайты, на которых производилась оптимизация:

 

sitecreator_ru_awnZjTCHDO.jpg

 

sitecreator_ru_pgBoSfvBoM.jpg

 

sitecreator_ru_gXhFcnZeWb.jpg

 

sitecreator_ru_MUrC81SXrC.jpg

 

sitecreator_ru_HHfHqxUbXS.jpg

 




  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.