Как ускорить работу вашего сайта.

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

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

Используйте Chrome Timeline или аналоги, и тогда на диаграмме вы увидите все события, и сколько они происходят по времени.

чтобы ускорить DomContentLoaded сделайте следующие вещи:

*добавьте атрибут async для тегов scrypt где это возможно. Перемещение тега script в конец документа не помогает ускорить загрузку контента, т.к. браузер должен обработать скрипт до того как постороит DOM. Все атрибуты async означают что только часть скриптов выполняется синхронно, а исполнение будет отложенно.
пример красиво встроенного яваскрипта со стороннего сайта:

<!-- BAD: blocking external script -->
<script src="//somehost.com/awesome-widget.js"></script></code>

<!— GOOD: remote script is loaded asynchronously —>
<script>// <![CDATA[
var script = document.createElement(‘script’); script.src = «//somehost.com/awesome-widget.js»; document.getElementsByTagName(‘head’)[0].appendChild(script);
// ]]></script>

*используйте менее сложную html-разметку
*не следует использовать более чем одну таблицу стилей
*не злоупотребляайте встроенными стилями
*пусть css идет до яваскриптов
*используйте CDN
*исключите из css неиспользуемые правила стилей

comments powered by HyperComments