Optymalizacja hostingu dla aplikacji internetowych opartych na treści obejmuje różne strategie poprawy wydajności i wygody użytkowników. Najważniejsze metody obejmują wykorzystanie sieci CDN do efektywnego dostarczania treści, przechowywanie treści w pamięci podręcznej (w tym zasoby statyczne), optymalizację zabezpieczeń, monitorowanie, uwzględnienie opcji skalowalności i minimalizowanie czasu oczekiwania. Wydajne opcje wyszukiwania i integracja z zabezpieczeniami jeszcze bardziej zwiększają możliwości hostingu. Stałe udoskonalanie działań ukierunkowanych na wydajność jest niezbędne, aby sprostać zmieniającym się potrzebom użytkowników.
Hostowanie zasobów statycznych
Zasoby statyczne to pliki, które nie są generowane dynamicznie przez serwer w przypadku każdego żądania. Zasoby statyczne pozostają niezmienione lub są rzadko aktualizowane. Zazwyczaj są one wyświetlane w przeglądarce użytkownika bez renderowania po stronie serwera.
| Typy plików statycznych | |
|---|---|
| zdjęcia; | Obrazy, np. zdjęcia, ikony, ilustracje, grafiki i logo, są plikami statycznymi. Przykładowe formaty to JPEG, PNG, WebP, GIF i SVG. |
| Arkusze stylów | Arkusze stylów (CSS) kontrolują układ, czcionkę, kolory i aspekty wizualne interfejsu użytkownika. Zwykle są statyczne i stosowane do treści HTML w przeglądarce. |
| Dźwięk i filmy | Pliki audio i wideo to zasoby statyczne, które możesz umieszczać w aplikacji lub wyświetlać w odtwarzaczach multimedialnych. |
| JavaScript | Pliki statyczne JavaScript (JS) zawierają kod po stronie klienta, który zwiększa interaktywność aplikacji. Skrypty te są wykonywane w przeglądarce użytkownika oraz obsługują weryfikację formularza oraz dynamiczne wczytywanie treści. Biblioteki JavaScript innych firm, np. jQuery i wtyczki, są uwzględniane jako pliki statyczne, gdy zwiększają funkcjonalność aplikacji internetowej. |
| WASM | WebAssembly (WASM) to pliki, które uruchamiają w przeglądarce maszynę wirtualną opartą na stosie o bliskiej wydajności sprzętowej i można je skompilować na wiele języków. |
Zasoby statyczne są zwykle przechowywane na serwerze WWW lub wyświetlane przez sieci CDN. Programiści mogą stosować takie techniki jak optymalizacja, minifikacja i kompresja, by zmniejszyć rozmiar pliku zasobów statycznych. Poprawia to wydajność strony. Warto też zastosować odpowiednie strategie buforowania, by ograniczyć konieczność wielokrotnego pobierania plików przy ponownych odwiedzinach witryny.
Więcej informacji o CSS i HTML znajdziesz na web.dev.
Buforowanie danych i zasobów
Zapisywanie w pamięci podręcznej aplikacji internetowej opartej na treści obejmuje przechowywanie oraz ponowne wykorzystywanie wcześniej pobranych lub wygenerowanych danych i zasobów. To ważna technika optymalizacji, która pomaga szybko dostarczać treści użytkownikom, zwłaszcza w przypadku często używanych danych i zasobów statycznych. Pamięć podręczna zwiększa wydajność, zmniejsza obciążenie serwera i minimalizuje czas oczekiwania w przypadku aplikacji internetowych opartych na treści.
W tabeli znajdują się opisy różnych typów buforowania.
| Typy | |
|---|---|
| Buforowanie przeglądarki | Przeglądarka użytkownika może zapisywać w pamięci podręcznej zasoby statyczne, takie jak obrazy, arkusze stylów i pliki JavaScript. Gdy użytkownik wróci do tej samej witryny, te zasoby mogą zostać wczytane z lokalnej pamięci podręcznej. |
| Buforowanie po stronie serwera | Aplikacje oparte na treści często korzystają z mechanizmów buforowania po stronie serwera w celu przechowywania treści statycznej, wyników zapytań do bazy danych, a nawet całych stron internetowych. Typowe metody buforowania po stronie serwera to między innymi odwrotne serwery proxy (Nginx, Varnish), pamięci podręczne w pamięci (Redis, Memcached) oraz buforowanie wyników zapytań bazy danych. |
| Buforowanie CDN | Sieci CDN mogą buforować i rozprowadzać zasoby statyczne na serwerach brzegowych znajdujących się w pobliżu użytkowników, co przyspiesza wyświetlanie. |
| Buforowanie zapytań bazy danych | Buforowanie zapytań bazy danych zapisuje wyniki częstych zapytań bazy danych w pamięci lub magazynie pamięci podręcznej. Ten typ poprawia wydajność bazy danych, ponieważ ogranicza konieczność ponownego uruchamiania tych samych zapytań w przypadku podobnych żądań. |
| Buforowanie skryptu service worker | Buforowanie skryptu service worker pozwala aplikacjom internetowym na zapisywanie w pamięci podręcznej zasobów takich jak pliki HTML, CSS czy JavaScript oraz zarządzanie nimi niezależnie od głównego wątku wykonywania strony. Działają one w tle i pośredniczą między aplikacją a siecią. Korzyści obejmują możliwość dostępu w trybie offline i zmniejszoną przepustowość. |
Jak buforować zasoby
Ważne jest zachowanie równowagi między buforowaniem i terminowym aktualizowaniem danych, aby użytkownicy otrzymywali najnowsze treści i zapewniali użytkownikom dobre wrażenia podczas korzystania z aplikacji. Pamiętaj, że nie wszystkie zasoby muszą być przechowywane w pamięci podręcznej. Nie trzeba zapisywać w pamięci podręcznej zawartości dynamicznej, np. stron HTML wygenerowanych przez skrypt po stronie serwera. Zasoby statyczne mogą być przechowywane w pamięci podręcznej przez określony czas lub do momentu zaktualizowania ich na serwerze. Plan implementacji strategii buforowania zależy od wybranego typu buforowania. Możesz na przykład zaimplementować buforowanie przeglądarki, używając nagłówka Cache-Control w odpowiedziach HTTP, lub skorzystać z interfejsu Cache API.
Zalecamy korzystanie z systemu obsługi wersji zasobów zapisanych w pamięci podręcznej. Umożliwia to aktualizowanie zasobów w pamięci podręcznej bez ich unieważniania. Monitoruj wykorzystanie pamięci podręcznej i w razie potrzeby wprowadzaj zmiany. Więcej informacji o pamięci podręcznej znajdziesz na stronie web.dev.
Skalowanie
Skalowanie aplikacji internetowej opartej na treści obejmuje wdrożenie strategicznego planu obsługi zwiększonego ruchu i większego ruchu z danych przy jednoczesnym zachowaniu wydajności i niezawodności aplikacji. Proces skalowania wymaga planowania, monitorowania i elastyczności w celu zarządzania zmiennymi wzorcami ruchu i ilością danych. Podczas skalowania aplikacji internetowej musisz zrównoważyć optymalizację wydajności i zarządzanie kosztami infrastruktury.
System równoważenia obciążenia rozdziela ruch między różne serwery. Dzięki temu będziesz mieć pewność, że aplikacja będzie w stanie efektywnie obsłużyć zwiększony ruch. Możesz zmniejszyć obciążenie swoich serwerów, stosując mechanizmy buforowania. Sieci CDN mogą też przydać się do buforowania zasobów statycznych i rozpowszechniania treści, skracając w ten sposób czas oczekiwania. Możesz też używać autoskalowania, aby w razie potrzeby automatycznie skalować aplikację w górę lub w dół. Autoskalowania mogą zapewnić, że aplikacja ma zasoby potrzebne do obsługi bieżącego poziomu ruchu. Podejście i strategia skalowania wymaga skutecznego monitorowania i dostrajania wydajności. Pamiętaj, aby regularnie analizować dane dotyczące wydajności i wprowadzać w razie potrzeby poprawki w infrastrukturze i kodzie.
Czas oczekiwania
Opóźnienie to czas oczekiwania na siebie, gdy użytkownik wchodzi w interakcję z Twoimi aplikacjami internetowymi. Jest to czas potrzebny na przesłanie żądania internetowego z przeglądarki lub urządzenia użytkownika do serwera WWW i dotarcie odpowiedzi z powrotem do urządzenia użytkownika. Pomiar jest dokonywany zazwyczaj w milisekundach (ms). Opóźnienie ma znaczny wpływ na wygodę użytkowników, ponieważ może je prowadzić do frustracji i rozczarowania.
Czynniki wpływające na opóźnienie:
| Czynniki | |
|---|---|
| Opóźnienie sieci | Na opóźnienia w sieci mogą wpływać odległość między użytkownikiem aplikacji internetowej a serwerem, routing danych oraz jakość połączenia sieciowego. |
| Czas przetwarzania serwera | Czas przetwarzania serwera zależy od złożoności żądania i wydajności serwera. |
| Czas dostawy treści | Czas dostawy treści zależy od lokalizacji serwera, sieci CDN i optymalizacji zasobów. Oznacza czas potrzebny na wczytanie obrazów, arkuszy stylów, skryptów i innych zasobów niezbędnych do wyrenderowania strony internetowej. |
| Strategia ładowania treści | Pobieranie z wyprzedzeniem, asynchroniczne ładowanie treści i leniwe ładowanie wpływa na postrzegane opóźnienie, ponieważ często na pierwszym miejscu trafiają treści o znaczeniu krytycznym. |
Aby skrócić czas oczekiwania, możesz zastosować techniki takie jak buforowanie treści, optymalizacja dostarczania treści, dostrajanie wydajności serwera oraz korzystanie z sieci CDN do minimalizacji RTT.