Больной вопрос: скорость загрузки или что с TTFB?

[eashla]

Добрый день!
У меня пожалуй один из самых популярных вопросов любого вебмастера "Почему мой сайт так долго грузиться?". Я не стал исключением  .... Сразу оговорюсь - для того что бы ускорить свой сайт я делал всё что в моих силах, но когда дело заходит до иерархии загрузки или вещей, которые нельзя быстро проверить (скорость и правильность работы сервера, DB и других магий), то я вхожу в тупик. Честно хочется разобраться в этом, но сколько не пытался - никакие мои телодвижения не приводили к результату в данном случае. Поэтому прошу вашей помощи -  оцените скорость загрузки, поделитесь вашим мнением. Прошу дать рекомендации по ускорению детища:

(нажмите чтобы показать/скрыть)

https://kumantsova.com/

Сайт висит на простом тарифе у мастерхоста

Даже предоставлю ссылочки на мерилки, что бы не искать:

(нажмите чтобы показать/скрыть)

https://www.webpagetest.org
https://gtmetrix.com

Спасибо за ваше внимание! Очень жду отклика 

[Assessor]

Посмотрел в отладчике Хрома морду сайта, она грузится 4,5 - 5 сек (у меня Я.Метрика подтормаживает).
отключил показ картинок: -> сайт стал грузиться 3,72 сек
отключил выполнение яваскриптов -> сайт стал грузиться 1,85 сек
А скриптов у вас много и грузятся с разных мест:
https://cdn. ampproject.org/v0/amp-analytics-0.1.js
https://cdn. jsdelivr.net/hammerjs/2.0.3/hammer.min.js
https://mc. yandex.ru/metrika/tag.js
https://connect. facebook.net/en_US/fbevents.js
https://stats.g. doubleclick.net/dc.js
https://vk. com/rtrg?p=VK-RTRG-124070-gfM4s
и ещё куча своих скриптов.
Если я всё правильно понимаю, у вас
 1 секунду съедают скрипты,
 1 секунда картинки
 2 сек хостинг отдает html-код страниц

И у Вас файлы стилей (и страницы сайта) не поддерживают "Кэширование на стороне клиента" (заголовки If-modified-since - Last-modified), поэтому на каждой странице файл CSS грузится заново.

Посмотрите рекомендации для вашего сайта в Google PageSpeed Insights и попробуйте их реализовать.

PS: Я бы сделал копию морды сайта (сохранить как html из браузера) с залил её на хостинг в корень сайта как test.html Тогда при тестировании скорости загрузки страницы kumantsova.com/test.html будет исключена работа php и обращения к БД. Если эта test.html будет отдаваться 2 сек - значит явно тормозит сам хостинг.

[eashla]

PS: Я бы сделал копию морды сайта (сохранить как html из браузера) с залил её на хостинг в корень сайта как test.html Тогда при тестировании скорости загрузки страницы kumantsova.com/test.html будет исключена работа php и обращения к БД. Если эта test.html будет отдаваться 2 сек - значит явно тормозит сам хостинг.

сделал - действительно на 2 секунды снизилась скорость

(нажмите чтобы показать/скрыть)

kumantsova.com/test.html

Так же получил ответ от мастерхоста по запросу об скорости обработки и отправки (подкрепил фото)

Что скажите по этим данным?

[Assessor]

Снизилась на 2 сек - это время работы движка Вордпресса (PHP + MySQL) по созданию страницы. Его можно свести к 0, если поставить плагин кэширования страниц, какой из них самый хороший я не знаю.

Ваша страница test.html загружается ~2.5 сек. Я копировал её на свой хостинг, с него она тоже грузится 2.5 сек (правда, картинки и яваскрипты грузились с вашего сайта).
Получается к вашему хостингу пока претензий нет, у меня - такой же.

С отключенными яваскриптами, картинками и отключенной загрузкой шрифтов с Google минимально что я смог получить для страницы test.html - 1,5 сек. Уменьшить её тоже можно, если оптимизировать картинки (в Google PageSpeed Insights есть ссылка скачать оптимизированные картинки и CSS).

Там по ссылке Google PageSpeed Insights и поста выше рекомендуется "Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы". Попробуйте сделать это, что именно надо сделать там в раскрывающемся спойлере.

А вообще, в Хроме комбинация клавиш Ctrl+Shift +J потом выбираете tab: "Timeline" и перегружаете страницу. Там всё показывается что сколько грузится по времени. В FireFox по-моему такая же комбинация клавиш

[eashla]

Количество блокирующих скриптов на странице: 4. Количество блокирующих ресурсов CSS на странице: 1. Они замедляют отображение контента.
Все содержание верхней части страницы отображается только после загрузки указанных далее ресурсов. Попробуйте отложить загрузку этих ресурсов, загружать их асинхронно или встроить их самые важные компоненты непосредственно в код HTML

Можете сказать, как это сделать ? Как задать порядок загрузки или асинхронную загрузку для моих скриптов ?
Или кто с этим может справиться - php программист или верстальщик ?

[Assessor]

Все "чужие" скрипты можно подгружать и выполнять асинхронно:
<script async src="//facebook.com/facebook.js" ...
Асинхронный код Я.Метрики лучше взять из вашего аккаунта, Яндекс предоставляет такой код.

Плохо, что у вас все Метрики, скрипты фэйсбуков и прочие спрятаны внутри ваших собственных скриптов. Придётся их вычленять.

Также, надо разобраться как технически вы грузите внешние скрипты. Если вы это делаете на jQuery - браузер будет каждый каждый раз один и тот же скрипт на разных страницах загружать заново, по полному циклу, не используя кеш. Почитайте Асинхронная загрузка javascript файлов. Ускорение и оптимизация процесса, увеличение производительности на Хабре, погуглите. Я физически не смогу искать за вас, перепечатывать пол Интернета в этот топик  И объяснять как оно работает.

В целом проблемные места выявлены, и можно заняться их оптимизацией. php-программист или верстальшик? В общем, ни тот ни другой. Но наши php-программисты и верстальщики имеют широкий профиль, и зачастую умеют работать с яваскриптами.
С базовыми знаниями html можно справиться и самому.

[Leekun]

Assessor, ответы у вас толковые ) только ссылка в смайлике портит все впечатление )

[eashla]

Assessor, спасибо за направление - мне это и нужно было, что бы понять, что изучать. Все скрипты я гружу через GTM (google tag manager). Может быть его можно заставить как то асинхронно грузить всё содержимое контейнера ? Буду изучать данный вопрос - в любом случае спасибо вам!

[Assessor]

Если будете заниматься самостоятельно:

Код:

Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.

Код:

Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
если на странице имеем несколько скриптов:

Код:

Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
при атрибуте async скрипт выполняться сразу, как загрузится. То есть, порядок выполнения скриптов будет зависеть от скорости их загрузки, и 2.js может исполниться раньше 1.js. Для счетчиков, Метрики, рекламных объявлений порядок исполнения не важен.

при атрибуте defer скрипты загружаются асинхронно, но сохраняют порядок исполнения, как размещены в html-коде.
Этот атрибут рекомендуется применять при подключении нескольких JS файлов, при условии что один скрипт зависит от другого и Вам важна последовательность их выполнения.

Я бы начал с кэширования страниц сайта (через плагин WP). Уменьшите время загрузки страницы почти в 2 раза. А потом возился со скриптами, там ковыряться надо аккуратно и не спеша. И делайте бэкапы файлов, которые правите.