Szybkość witryny i asynchroniczny JavaScript

asynchroniczny

Chociaż dużo pracuję nad programowaniem, nie klasyfikuję siebie jako prawdziwego programisty. Potrafię programować i przenosić rzeczy na stronie i sprawić, by działało. Prawdziwy programista wie, jak opracować kod, aby można go było skalować, nie zajmować dużej ilości zasobów, szybko się ładować, łatwo modyfikować później i nadal działać.

Trudnym zadaniem dla marketerów jest posiadanie obu plików bardzo szybka strona internetowa i nadal uwzględniaj integracje i elementy społecznościowe, które mogą tworzyć zależności od szybkości ładowania witryny. Jednym z takich przykładów jest przyciski społecznościowe. W firmie Martech mamy przyciski społecznościowe na każdej stronie w witrynie. Więc… jeśli zasoby Facebooka ładują się wolno pewnego dnia, spowalnia to naszą witrynę. Następnie dodaj do tego Twitter, Pinterest, Buffer itp., A szanse na szybkie załadowanie Twojej witryny zostaną zredukowane praktycznie do zera.

Nazywa się to ładowaniem synchronicznym. Musisz zakończyć ładowanie jednego elementu przed ładujesz następny element. Jeśli możesz ładować elementy asynchronicznie, możesz ładować elementy bez zależności od siebie. Możesz radykalnie poprawić szybkość witryny, ładując elementy asynchronicznie. Problem polega na tym, że gotowe skrypty dostarczane przez te firmy prawie nigdy nie są zoptymalizowane do działania asynchronicznego.
asynchroniczny

Możesz sprawdzić, co wpływa na szybkość strony, uruchamiając test na Pingdom:
ładowanie strony pingdom

Asynchroniczny JavaScript umożliwia pisanie kodu, który nakazuje załadowanie elementów po strona jest całkowicie załadowana. Żadnych zależności! Twoja strona ładuje się, a po zakończeniu inicjowany jest skrypt, który wczytuje inne elementy - w tym przypadku nasze przyciski społecznościowe. Jeśli jesteś programistą, możesz przeczytać świetny artykuł, Leniwe ładowanie asynchronicznego kodu JavaScript.

Oto krótki opis, jak to zrobić poprawnie od Emila Stenströma:

(function () {function async_load () {var s = document.createElement ('script'); s.type = 'text / javascript'; s.async = true; s.src = 'http://buttondomain.com /script.js '; var x = document.getElementsByTagName (' script ') [0]; x.parentNode.insertBefore (s, x);} if (window.attachEvent) window.attachEvent (' onload ', async_load); else window.addEventListener ('load', async_load, false);}) ();

W rezultacie, jeśli te integracje stron trzecich są wyłączone lub działają wolno, nigdy nie ma to wpływu na pojawienie się podstawowej zawartości strony. Jeśli przejrzysz źródło naszej strony, zobaczysz, że ładuję wszystkie dodatkowe skrypty społecznościowe wykorzystujące tę technikę. Proces poprawiła szybkość naszej witryny w sekundach - i nie dusi się podczas załadunku. Nie przekonwertowaliśmy wszystkich naszych zależności zewnętrznych na Asynchroniczny JavaScript, ale będziemy.

Co o tym myślisz?

Ta strona używa Akismet do redukcji spamu. Dowiedz się, jak przetwarzane są dane komentarza.