Sposoby przyspieszenia witryny i skryptów za pomocą CDN

1. Dlaczego prędkość jest tak ważna?
2. Zalety CDN w celu zwiększenia prędkości
3. Jak przyspiesza się CDN
4. Wiele skryptów
5. Geografia
6. Największy CDN na świecie
7. Zakończenie

Projektanci stron internetowych doskonale zdają sobie sprawę, że świetny projekt ma szczególne znaczenie dla witryny. A jeśli ufają każdej koncepcji, która ich zdaniem jest najlepsza i skuteczna, to dla niektórych użytkowników lub nowych użytkowników może to być duży problem. Świetny projekt strony, piękny, funkcjonalny, animowany itd. Może być bardzo, bardzo dużym problemem. Nawet dla projektanta stron internetowych, dla programistów . Po prostu dodaj komponent wizualny, mnóstwo wtyczek, duże fragmenty kodu, wiele zmiennych, warunki i ...

Projektanci i projektanci pracują równie dobrze nad optymalizacją pracy wszystkich tych wspólnych projektów, ale sprawa nie kończy się na zmianie kodu lub kompresji obrazów jpg. Mówimy o szybkości strony, optymalizacji i ustawieniu wymiany i transferu danych.

Wydaje się, że może to tylko pośrednio dotyczyć producentów i projektantów, ale klienci ... są takimi klientami i często zamawiają nie tylko stworzenie witryny, układu, ale także wdrożenie na serwerze, a nawet chcą otrzymać niewielką pomoc. Dzisiaj rozważymy jedną z opcji pracy i optymalizacji gotowego projektu, aby przyspieszyć, ale ... i nie tylko.

W szczególności będzie to kwestia podłączenia CDN, mimo że niektórzy czytelnicy pomyślą: „ wszystko jest jasne, przeczytałem już wiele rzeczy ”. Nikt nie kłóci się, ale czasami warto zebrać wszystko w jednym miejscu i spojrzeć na pytanie optymalizacyjne nieco z drugiej strony.

Dlaczego prędkość jest tak ważna?

O tym, jak ważna jest szybkość ładowania strony w oknach przeglądarek użytkowników, badania zostały przeprowadzone i są w toku. Prawdopodobnie nikt nie będzie zaskoczony takim wnioskiem w dzisiejszych czasach, a my często spotykamy momenty, gdy strony internetowe nagle zaczynają się ładować. Witryny, które nie są wystarczająco szybkie, tworzą negatywną percepcję i wpływ.

W rzeczywistości czas ładowania strony znacząco wpływa na współczynnik konwersji, a to z kolei wpływa na rozwój marki jako całości. W tym samym czasie, gdy czas ładowania staje się coraz wyższy, współczynnik konwersji zmniejsza się wraz z postępem. Dlatego też optymalna prędkość ładowania stron witryny wynosi około 2,4 sekundy.

Zalety CDN w celu zwiększenia prędkości

CDN ma wiele zalet, ale skupimy się na tych punktach, które mogą przyspieszyć ładowanie witryny. Mówiąc najprościej, CDN są znacznie lepiej wyposażone niż większość usług hostingowych, mimo że VPS lub serwer dedykowany jest siecią do obsługi ruchu na stronie. Aby uczynić to trochę jaśniejszym, CDN to zbiór serwerów w centrum danych, które dostarczają witryny użytkownikom końcowym (wszystko w witrynach to: zdjęcia, wideo, tekst, wtyczki itd.).

Wirtualny hosting jest zazwyczaj zoptymalizowany, aby zapewnić stabilne środowisko, w którym witryna może działać w PHP lub na innych popularnych środowiskach hostingowych, CMS itp. Taki system w większości przypadków nie ma na celu optymalizacji szybkości witryny jako całości. W przeciwieństwie do wirtualnego hostingu, głównym celem CDN jest pomoc w szybkim dostarczaniu stron internetowych.

Ale jak CDN może naprawdę przyspieszyć witrynę, co jest w niej tak niezwykłe i atrakcyjne?

Jak przyspiesza się CDN

Aby zrozumieć zalety CDN, pamiętajmy, dlaczego strona może być w ogóle wolna: przeciążenie serwera lub powolne działanie, duże obrazy na stronie, wiele skryptów, skryptów, które nie zostały zoptymalizowane lub po prostu, jest ich wiele; geograficznie zdalna lokalizacja serwerów w odniesieniu do znalezienia grupy docelowej.

Tak, są inne powody, ale nie są tak powszechne. A jeśli ze zdjęciami i wyborem dobrego hostingu nadal możesz zdecydować i pracować, to ostatnie chwile wymagają naszej odrębnej uwagi.

Wiele skryptów

Kiedy zaczynamy pracę jako projektant stron internetowych lub zecer, wydaje się, że ... „ jak piękne jest wszystko ”. Możesz zainstalować oddzielne skrypty, widżety, odebrać to i tamto, a praktycznie nie musisz nawet pisać kodu, ponieważ są gotowe szablony. Cieszymy się wyimaginowaną wolnością, testujemy i instalujemy i ... strona zwalnia, witryna jest przeciążona. Niech spowolnienie nastąpi przez ułamek sekundy, ale istnieje i gromadzi się.

A nawet „zatwardziali” profesjonalni projektanci czasami wpadają w tę pułapkę z tego powodu, że próbują użyć dziesiątki różnych wtyczek i przetestuj ich funkcjonalność pod kątem zgodności z najbardziej wyrafinowanymi wymaganiami klientów. W rezultacie w pracy występują efekty uboczne, które nie są tak proste i szybko rozwiązane poprzez usunięcie skryptu.

W rzeczywistości każda wtyczka instalowana na stronie dodaje pliki Javascript, pliki CSS i wymaga lepszej wydajności witryny. Podczas testowania wydajności można to zauważyć dzięki dużej liczbie żądań do tych plików.

Na przykład można zobaczyć liczbę już istniejących żądań do witryny za pomocą „kodu elementu” w Operze. Trzy typy witryn i inna liczba żądań, nasycenie skryptów itp.

Im mniejszy, tym lepiej. Kompresuj, scalaj, zmniejszaj kod skryptu, włącz HTTP / 2, a najlepiej utrzymuj witrynę z dala od ciężkich wtyczek.

W tym przypadku CDN nie pomaga zdecydować, które wtyczki należy zapisać, a które usunąć, CDN może faktycznie wykonać kompresję w locie i zminimalizować skrypty, aby ogólny rozmiar zawartości witryny był mniejszy, a tym samym szybszy w działaniu.

Trzecim bardzo ważnym zaleceniem jest włączenie HTTP / 2. Szczegółowo o zaletach protokołu HTTP / 2 będziemy rozmawiać osobno w przyszłości, ale teraz zwrócimy uwagę na fakt, że protokół został napisany (2015, obsługiwany przez wszystkie przeglądarki) specjalnie w celu optymalizacji czasu ładowania stron internetowych, w szczególności tych, które mają wiele różne zasoby do konserwacji. W związku z tym pośrednie przejście do protokołu danych wpływa na pozycję witryny.

Większość usług CDN pozwala szybko i łatwo podłączyć HTTP / 2 do strony internetowej (chociaż możesz to zrobić bez niej), co powoduje natychmiastowy wzrost prędkości.

Geografia

Świetnie, jeśli tworzysz projekt dla lokalnej publiczności. Ale jeśli witryna jest przeznaczona dla użytkowników międzynarodowych? Znalezienie dobrego hostingu i serwera staje się trudne. CDN ma sieć setek serwerów w dziesiątkach miejsc na całym świecie. Serwery te kopiują zdjęcia i zasoby statyczne, takie jak Javascript i pliki CSS, do siebie. Gdy użytkownik wejdzie na twoją stronę internetową, ciężkie zasoby zostaną pobrane z tego serwera, który fizycznie znajduje się jak najbliżej tego użytkownika. Oczywiście znacznie zmniejsza to problem odległości i daje stronie wielkie korzyści podczas pobierania.

Największy CDN na świecie

Do tej pory prawie wszystkie duże firmy używają optymalizacji CDN. Bez niego przyspieszenie pracy dużych portali informacyjnych jest po prostu niemożliwe. Jeśli chodzi o najbardziej zwykły sklep internetowy lub osobistą witrynę, kawiarnię, blog, CDN jest również wygodny i nigdy nie jest zbędny, zwłaszcza, że ​​istnieją możliwości jego podłączenia bez konieczności wydawania pieniędzy. Oznacza to, że utworzenie tej samej strony portfolio może być niesamowicie „fajne” z wizualnego punktu widzenia.

Większość dostawców usług CDN oferuje bezpłatny plan, który zapewni niezbędną funkcjonalność buforowania, którą omówiliśmy powyżej. Z reguły oprócz optymalizacji treści otrzymujesz również wsparcie zapewniające bezpieczeństwo witryny. Z biegiem czasu, gdy witryna będzie rosła, pojawi się logiczna sytuacja, jeśli chodzi o potrzebę zapewnienia innych funkcji i funkcjonalności. Następnie możesz przejść do opłaconych stawek.

Ale jeśli zwrócimy się do tych CDN, które są reprezentowane na świecie, zwracamy naszą uwagę na:

Incapsula - jeden z wiodących dostawców systemów zabezpieczeń opartych na chmurze, który oferuje również możliwości przyspieszenia witryn. Ma darmowy plan z podstawowym zestawem funkcji, który jest odpowiedni dla bloga lub małej witryny. Na przykład buforowanie, kompresja, optymalizacja skryptów i obrazów, ochrona przed botami spamowymi, captcha, komentarze spamowe, obsługa IPV6, monitorowanie, statystyki w czasie rzeczywistym, raporty tygodniowe.

Jednak dla biznesu lub e-commerce będzie wymagać bardziej złożonych i funkcjonalnych planów z ochroną przed DDoS, obsługą Web Application Firewall itp.

Serwery Incapsula znajdują się w 30 centrach danych na całym świecie i odpowiednio zapewniają szybkie pobieranie danych prawie wszystkim użytkownikom. Do tej pory z usług dostawcy korzysta ponad 500 000 witryn, w tym Siemens, Wix, T-Mobile, Moc, Hitachi i inne.

Cloudflare - Kolejny ważny gracz na rynku witryn bezpieczeństwa i przyspieszenie ich ładowania. Jego usługi są używane przez ponad 4 miliony witryn, a serwery znajdują się w 118 centrach danych.

Oferują także darmowy plan z możliwością buforowania danych, asynchronicznym pobieraniem Javascript, HTTP / 2 i SPDY, WebSockets, ochroną DDoS, antyspamem i innymi. Konfiguracja jest prosta i łączy się wystarczająco szybko. Ale jeśli wymagana jest optymalizacja mobilna, wyższy poziom bezpieczeństwa będzie musiał przełączyć się na płatne taryfy.

Ponieważ CloudFlare jest najpopularniejszym rozwiązaniem do optymalizacji witryn, używają go również firmy takie jak Reddit, Mozilla, Feedly, Yelp, StackOverflow i Google, Microsoft, Qualcomm.

jsDelivr - ponieważ nazwa jest już jasna, zwalnia biblioteki JavaScript, jQuery, czcionki, CSS i wiele innych rzeczy, które mogą spowolnić ładowanie witryny. Obsługuje również pliki z Cloudflare, Keycdn, Quantil i MaxCDN. Funkcja jsDelivr polega na tym, że można przesyłać wiele plików za pomocą pojedynczego żądania HTTP i nie ma ograniczeń ruchu.

Z jego usług korzystają agencje prasowe New-York Times, NBC News, a także Mozilla.

Oczywiście, oprócz tych trzech, najbardziej znanych, istnieją również takie platformy jak Datapath (z obsługą optymalizacji pracy w chmurze Office 365, Azure, Google Cloud), Photon z jetpack i Netlify . I tak, mogą wyglądać na coś skomplikowanego i „oszukanego”, ale w rzeczywistości rozwiązują najbardziej wyjątkowe zadania, nawet jeśli masz bardzo zwykłą małą stronę internetową z mnóstwem efektów, animacji, zdjęć i innych rzeczy.

Połączenie CDN jest zwykle wykonywane w formie wtyczki, która przepisuje adres URL statycznych zasobów, zastępując adres cdn. example.com, gdzie cdn to adres podany po połączeniu z systemem.

Zakończenie

Jak zauważyliśmy powyżej, połączenie CDN nie jest tak trudne i kosztowne, jak mogłoby się wydawać. Ale jednocześnie zarówno projektant, jak i projektant layoutu mogą być pewni, że nawet jeśli wykonają całą pracę związaną z optymalizacją strony (skrypty, obrazy, wideo itp.) W zależności od nich, CDN może dodatkowo zwiększyć szybkość ładowania witryny . A to z kolei doprowadzi do poprawy UX, konwersji, popularności, rozwoju marki i profesjonalizmu. I jeszcze więcej, pozwoli używać i najnowsze wersje bibliotek, silników , nasycić stronę animacjami, efektami, dodać wymagającą VR i wysokiej jakości panoramy i tak dalej.

Oprócz konfigurowania i wdrażania witryny na serwerze występują również problemy z bezpieczeństwem, dlatego CDN może czasami pomóc w tym problemie.

Nie ma znaczenia, jak dobrze jesteś projektantem layoutu i jak dobrze piszesz skrypty i konfigurujesz biblioteki. W każdym razie strona może zwolnić, może być przeciążona (nawet jeśli sam napiszesz kod i nie używasz CMS). Oznacza to, że korzystanie z CDN nie będzie zbyteczne podczas pracy na jakimkolwiek typie witryny.