Скажем, у меня есть клиентское приложение React, созданное ReactDOM,
<body>
<div id="root"></div>
<script src="/mybundle.js"></script> <!-- rendering happens here -->
<script async src='https://cdn.third-party.com/segment.js'></script>
<script async src='https://cdn.third-party.com/google_analytics.js'></script>
<script async src='https://connect.facebook.net/en_US/fbevents.js'></script>
<script async src='https://connect.facebook.net/en_US/sdk.js'></script>
<!-- etc.. various other 3rd party trackers and crap we have to load -->
</body>
Насколько я понимаю, эти сторонние библиотеки будут задерживать событие onload
, пока их различные сценарии не загрузятся, даже если async
указано.
Это задержит рендеринг моего приложения реагирования?
Я проверил это, и наша первая значимая краска происходит примерно на 2 секунды быстрее на дросселированном компьютере, если я удаляю весь сторонний javascript.Все эти библиотеки утверждают, что они не замедляют работу вашего сайта, но экспериментально они определенно делают это.
Производительность с сторонними библиотеками,
Производительностьсо всеми удаленными сторонними библиотеками,
Есть ли способ загрузить эти сторонние библиотеки без ущерба для производительности моего приложения, отображаемого на одной странице, для клиента?
Я знаю ... 2,75 секунды все еще ужасно медленны.Я пытаюсь найти быстрые выигрыши, прежде чем приступить к серьезной переписке.