- piątek, 2 lutego 2024 12:16
Artykuł sponsorowany
Optymalizacja Wydajności Strony Internetowej
Nowoczesna strona internetowa to nie tylko harmonia treści i designu, ale także efektywność działania od strony kodu. W tym artykule zajmiemy się kluczowymi aspektami, takimi jak pobieranie zasobów przez przeglądarkę oraz techniki cache´owania, które mogą znacząco przyspieszyć ładowanie strony. Dowiedz się, jak odpowiednia konfiguracja MIME Type i cache´owanie mogą poprawić wydajność Twojej witryny.
Jak wygląda nowoczesna strona internetowa od strony kodu?
Nowoczesna strona internetowa może składać się z setek elementów, które – złożone – tworzą jej całość. Prawie zawsze są to pliki graficzne i tekstowe, przechowujące kod HTML, CSS oraz JavaScript, a czasem, dodatkowo, plik muzyczny lub wideo. Jeżeli strona nie korzysta z dostępnych w systemie operacyjnym fontów, to przeglądarka również pobiera z serwera odpowiednie pliki, aby wyświetlić tekst w pożądanym stylu.
W jaki sposób przeglądarka pobiera wszystkie niezbędne do wyświetlenia strony zasoby?
Za naszym codziennym surfowaniem po Internecie stoi pewien jasno ustalony sposób komunikacji, który w skrócie nazywa się HTTP (HyperText Transfer Protocol). W wersji 1.1 został wprowadzony już 17 lat temu.
Protokół ten ustala sposób komunikacji między naszym komputerem a serwerem, na którym znajduje się strona internetowa. Jeżeli wejdziemy na dowolny adres, komputer zawsze wyśle zapytanie do serwera, tak, aby otrzymać zasoby niezbędne do wyświetlenia żądanej strony www.
W odpowiedzi serwer zacznie odsyłać do przeglądarki dokument HTML, będący szkieletem strony internetowej. Zawiera on informację o kolejnych niezbędnych plikach. Na przykład: jeżeli przeglądarka, analizując dokument HTML, natknie się na plik CSS, wyśle żądanie do serwera, aby ten plik otrzymać.
Nie rozwodząc się nad technicznymi aspektami, protokół http jest straszną gadułą. Wymaga zapytania serwera o każdy zasób napotkany w procesie przetwarzania struktury strony. Intuicja mówi, że nie jest to najszybszy sposób dostarczania plików i można by np. z wyprzedzeniem wysyłać kilka plików bez zbędnego zadawania pytań. Niestety tego http w wersji 1.1 nie potrafi. Istnieją pewne sztuczki mające przyspieszyć działania protokołu, ale o tym w nadchodzących wpisach.
Protokół HTTP to tylko czubek góry lodowej
Fundamentem jego działania jest inny protokół – TCP (Transmission Control Protocol). To z kolei protokół określający, w jaki sposób informacje są przesyłane przez sieć.
Mówiąc krótko i bez zbędnej technicznej gadki, jeżeli pobieramy z Internetu, np. zdjęcie, to do naszego komputera nie zostaje ono przesłane jako jeden cały plik, tylko jest podzielone na mniejsze części, które są na tyle niewielkie, że można je szybko przesłać. To proces niejawny i w pełni zautomatyzowany. Na docelowym komputerze te pakiety danych są składane z powrotem i w ten sposób plik możemy ponownie otworzyć.
Protokół TCP wysyła segmenty w sposób ostrożny – na początek kilka segmentów, później, gdy otrzyma odpowiedź od odbiorcy, że pakiety dotarły, wysyła kolejną, tym razem większą partię. Ta technika zwana Slow-Start zapobiega przepełnieniu sieci internetowej, uniemożliwiając przesłanie większej ilości danych niż sieć jest w stanie przyjąć.
Jest to najbardziej widoczne w chwili, kiedy zaczynamy pobierać jakikolwiek duży plik z sieci. Nigdy nie ma sytuacji, w której pobieralibyśmy taki plik z pełną prędkością, jaką deklaruje nasz dostawca – transfer musi "się rozkręcić".
Slow-Start niestety bardzo skutecznie ogranicza zalety posiadania szybkiego łącza internetowego w przypadku pobierania stron internetowych. Ponieważ niezbędne zasoby do pobrania nie są zazwyczaj dużych rozmiarów, przeglądarka nie zdąży się rozkręcić, aby skorzystać z pełnej przepustowości łącza.
Dlaczego w ogóle korzysta się z techniki Slow-Start? Otóż 17 lat temu, kiedy protokół powstawał, sieć internetowa nie była tak rozbudowania jak teraz. Nikt się chyba nie spodziewał, do jakich rozmiarów rozrośnie się Internet, dlatego też nie przewidziano możliwości wyłączenia tego.
Większość plików, jakich potrzebuje przeglądarka, żeby wyświetlić stronę internetową, ma możliwość ponownego wykorzystania, czy to w obrębie całego serwisu, czy pojedynczej strony. Dla przykładu: za pomocą jednego pliku CSS można określić wygląd wszystkich elementów strony internetowej. Ten plik jest pobierany przez przeglądarkę na każdej podstronie serwisu.
Gdyby tak pobrać ten plik tylko przy pierwszym wejściu na stronę i przechowywać gdzieś na naszym komputerze… Oznaczałoby to, że nie będzie trzeba tego pliku pobierać ponownie przy przejściu na kolejną podstronę.
I takie rozwiązanie jak najbardziej istnieje – nazywa się właśnie cache´owaniem.
Przechowywanie podręczne – pamięć podręczna (ang. cache) jest pewną formą buforowania, której celem jest poprawa efektywności realizacji operacji. Polega na gromadzeniu kopii danych w pamięci w celu poprawy efektywności ich przetwarzania
Pamięć podręczna (ang. cache) – mechanizm, w którym część spośród danych zgromadzonych w źródłach o długim czasie dostępu i niższej przepustowości jest dodatkowo przechowywana w pamięci o lepszych parametrach. Ma to na celu poprawę szybkości dostępu do tych informacji, które przypuszczalnie będą potrzebne w najbliższej przyszłości.
Informację na temat możliwości cache´owania konfiguruje się zazwyczaj po stronie serwera. W moich rozważaniach skupimy się na najpopularniejszym chyba systemie serwerowym, jaki oferują hostingodawcy – Apache. Istnieją oczywiście inne rozwiązania umożliwiające hosting stron internetowych jak nginx, jednak w naszym przypadku oprzemy się właśnie na Apache.
Za pomocą małego pliku o nazwie .htaccess mamy możliwość edytowania konfiguracji Apache dla poszczególnej strony www. Opcję tę musi włączyć hostingodawca, jednak z własnego doświadczenia wiem, że zazwyczaj domyślnie możliwość takiej konfiguracji jest włączona.
Istnieje też kilka technik pozwalających na określenie zasad, na bazie których ma działać cache´owanie w przeglądarce, ja jednak skupię się na sposobie najbardziej wygodnym, w mojej ocenie, dla deweloperów – czyli technice, która określa, jakiego typu jest dany plik (MIME Type) na serwerze oraz w zależności od typu ustala, jak długo ma być ważny. Ale po kolei.
Co to jest MIME type?
Media type, lub zwany inaczej MIME type (…) jest identyfikatorem formatu plików. Identyfikatory te w sposób ogólny mają stanowić podpowiedź jaki typ danych zawiera plik. Taki typ składa się z 2 części – atrybutu określającego ogólny typ danych oraz wartości, która definiuje konkretne rozszerzenie pliku. Pierwotnie stworzony z myślą o załącznikach w mailach z powodzeniem został wykorzystany również w innych zastosowaniach.
Typów MIME jest tyle, ile jest rozszerzeń plików (blisko 2 tysiące), jednak tylko garstka rozszerzeń jest na co dzień wykorzystywana przy budowie stron internetowych.
Krok pierwszy
W pliku .htaccess za pomocą dowolnego edytora tekstu dodajemy następujący kod:
AddType text/html html
AddType text/css css
Co konkretnego wykonaliśmy? Powiedzieliśmy serwerowi, że plik html na serwerze ma być uznawany za plik tekstowy przechowujący kod html. Druga linijka kodu robi to samo, ale w tym przypadku pliki .css będą uznawane za pliki tekstowe przechowujące kod CSS.
W rzeczywistości podstawowe pliki, takie jak .html, .jpg, .gif, .css, w standardowej konfiguracji serwera posiadają już poprawnie skonfigurowane typy MIME. Jednak, dla porównania, pliki fontów pobierane przez przeglądarki już takich oznaczeń w domyślnej konfiguracji mogą nie posiadać, dlatego warto przy okazji skonfigurować wszystkie typy, z jakich możemy w przyszłości skorzystać.
Krok drugi
Dla danego typu MIME należy określić, jaki ma on termin ważności. Tutaj też warto rozważyć, które pliki i z jaką częstotliwością się zmieniają. Jeżeli chodzi o pliki graficzne, w tych zazwyczaj nie widać zmian. Co najwyżej występuje plik o innej nazwie w tym samym miejscu. Pliki CSS nie zmieniają się po odpaleniu serwisu. Mogą występować pewne modyfikacje, ale mają one charakter okresowy, np. co pół roku, kiedy poprawiamy jakiś element strony lub dodajemy coś nowego. Natomiast pliki z rozszerzeniem html mają tendencję do ciągłej zmiany (jak np. strona z najnowszymi wiadomościami ze świata) i takich plików nie powinniśmy cache´ować, jeżeli zależy nam na tym, by użytkownik zawsze widział najnowsze wiadomości.
Żeby określić "datę ważności", należy w pliku .htaccess dodać następującą linijkę kodu:
ExpiresByType text/html "access plus 0 seconds"
ExpiresByType text/css "access plus 1 year"
Za pomocą tego kodu serwer będzie traktować pliki html jako zawsze przeterminowane – przy każdym zapytaniu o dany plik, serwer prześle plik do użytkownika.
Natomiast plik CSS będzie ważny przez rok od momentu pobrania zasobu przez przeglądarkę. W przypadku ponownego zapytania o ten plik, serwer wyśle odpowiedź: "Hej, ten plik już kiedyś pobrałeś, nadal go masz, więc skorzystaj ze swojej kopii!".
Bardziej technicznie mówiąc: zostanie zwrócony kod 304 not modified, w odróżnieniu do nie cache´owanych zasobów, dla których zazwyczaj zwracany jest kod 200 OK (przesłano zawartość pliku).
No dobra, ale co nam to daje?
Dobrze skonfigurowany serwer sprawia, że przy kolejnym wejściu na niego nie będzie trzeba ściągać całej zawartości strony. Dla przykładu: ta strona, którą właśnie czytasz, składa się z około 125 zasobów pobieranych przez przeglądarkę. Jeżeli nie jest to twój pierwszy artykuł na tym blogu, to jest szansa, że kiedy tutaj się znalazłeś, przeglądarka musiała pobrać na nowo tylko 27 z 125 plików, ponieważ pozostałe były w pamięci podręcznej komputera.
Optymalizacja kodu strony internetowej to nie tylko kwestia estetyki, ale także szybkości ładowania co wspomaga pozycjonowanie strony https://widzialni.pl/pozycjonowanie/. Wykorzystanie cache´owania i właściwa konfiguracja MIME Type może zredukować czas ładowania witryny, poprawiając tym samym doświadczenie użytkownika. Pamiętaj o tych kluczowych elementach, gdy planujesz lub analizujesz strukturę kodu swojej strony internetowej, by zapewnić nie tylko atrakcyjny wygląd, ale także efektywną działalność od strony technicznej.
- piątek, 26 lipca 2024 22:35
Sport
Chojniczanka uległa w pierwszym wyjazdowym meczu nowego sezonu Resovii Rzeszów
- piątek, 26 lipca 2024 18:56
Gmina Nowa Karczma
Wypadek na drodze wojewódzkiej 221 w Nowej Karczmie. Ciężarówka zahaczyła o motorowerzystę
- 10
- piątek, 26 lipca 2024 11:22
Chojnice
Cmentarz Ofiar Zbrodni Hitlerowskich w Chojnicach czeka częściowa renowacja (FOTO)
- piątek, 26 lipca 2024 10:32
Gmina Więcbork
Rozpoczyna się kulminacyjny weekend tegorocznych Dni Więcborka
- 10
- piątek, 26 lipca 2024 9:25
Gmina Brusy
Weekend w Brusach. Nadajemy na żywo z centrum miasta, gdzie dziś (26.07) pierwsze koncerty w ramach Międzynarodowego Festiwalu Folkloru
- piątek, 26 lipca 2024 7:07
Artykuł sponsorowany
Najlepsze metody nauczania matematyki stosowane przez korepetytorów
- piątek, 26 lipca 2024 7:07
Gmina Chojnice
Przed nami 15. Jarmark Ekoturystyczny "Czym chata bogata" w Charzykowach
- 5
- piątek, 26 lipca 2024 7:06
Chojnice
Trwają prace przy budowie boiska wielofunkcyjnego przy ul. Żwirki i Wigury w Chojnicach
- piątek, 26 lipca 2024 7:06
Powiat sępoleński
Władze powiatu sępoleńskiego podpisały umowę na remont ponad 12 kilometrów dróg
- piątek, 26 lipca 2024 7:00
Gmina Stara Kiszewa
W Olpuchu, w gminie Stara Kiszewa, odbędzie się jutro (27.07.) festyn strażacki. Dochód będzie przeznaczony na zakup sprzętu dla tutejszego OSP
- piątek, 26 lipca 2024 7:00
Gmina Brusy
Dziś (26.07) w Brusach odbędzie się koncert "Muzykobranie". Na scenie wystąpią m.in. Lui Gawrońska i Lanberry
- piątek, 26 lipca 2024 7:00
Sępólno Krajeńskie
Dzisiaj (26.07) w Sępólnie Krajeńskim wystąpi Iwona Węgrowska
- 3
- czwartek, 25 lipca 2024 21:29
Gmina Debrzno
"Nie chodziło o uporządkowanie lasu. Miałem pozyskać kłody" - na procesie byłego burmistrza Debrzna zeznawał szef ekipy drwali
- 4
- czwartek, 25 lipca 2024 17:04
Chojnice
Kolizja na ulicy Podlesie w Chojnicach. Osobówka wjechała do lasu, a kierowca trafił do szpitala
- 37
- czwartek, 25 lipca 2024 15:40
Chojnice
"Za swoją misję uznała pomaganie innym". Rodzina i przyjaciele pożegnali "Chojniczankę Stulecia" Ludomiłę Paczkowską
- czwartek, 25 lipca 2024 11:16
Sępólno Krajeńskie
Władze Sępólna Krajeńskiego rozstrzygnęły przetarg na rozbudowę żłobka
- 2
- czwartek, 25 lipca 2024 10:21
Powiat tucholski
Pasjonaci kolei w porozumieniu z PKP PLK przywracają przejezdność na linii 241. "My na sucho po prostu sami wymieniamy te podkłady"
- czwartek, 25 lipca 2024 10:18
Powiat sępoleński
Będzie wymiana źródeł ciepła w sali gimnastycznej LO w Więcborku oraz w Domu Dziecka w Małej Cerkwicy
- czwartek, 25 lipca 2024 10:15
Chojnice
Burmistrz Chojnic zlecił sprawdzenie przyłączy kanalizacji deszczowych i sanitarnych m.in. na ul. Sobierajczyka
- 6
- czwartek, 25 lipca 2024 9:52
W Człuchowie wystartowała jubileuszowa edycja Polish Boogie Festiwal (FOTO)
Podcasty Weekend FM
Zobacz również:
Im możesz pomóc:
Sport:
22:35Chojniczanka uległa w pierwszym wyjazdowym meczu nowego sezonu Resovii Rzeszów
15:49Wielki sukces młodzieżowych żeglarzy na mistrzostwach świata. Złoto zdobyli między innymi zawodnicy ChKŻ Chojnice
23:36Wymarzony start Chojniczanki w nowym sezonie. Drużyna wygrała z Rekordem Bielsko-Biała
16:34"Jesteśmy dobrze przygotowani, cieszy brak urazów". Kierownictwo Chojniczanki Chojnice podsumowuje przygotowania do sezonu
9:26Maksymilian Tkocz kolejnym wzmocnieniem Chojniczanki. Do klubu przejdzie z Wisły Puławy
Ostatnio dodane artykuły:
18:56Wypadek na drodze wojewódzkiej 221 w Nowej Karczmie. Ciężarówka zahaczyła o motorowerzystę
11:22Cmentarz Ofiar Zbrodni Hitlerowskich w Chojnicach czeka częściowa renowacja (FOTO)
10:32Rozpoczyna się kulminacyjny weekend tegorocznych Dni Więcborka
9:25Weekend w Brusach. Nadajemy na żywo z centrum miasta, gdzie dziś (26.07) pierwsze koncerty w ramach Międzynarodowego Festiwalu Folkloru
7:07Przed nami 15. Jarmark Ekoturystyczny "Czym chata bogata" w Charzykowach
7:06Trwają prace przy budowie boiska wielofunkcyjnego przy ul. Żwirki i Wigury w Chojnicach
7:06Władze powiatu sępoleńskiego podpisały umowę na remont ponad 12 kilometrów dróg
7:00W Olpuchu, w gminie Stara Kiszewa, odbędzie się jutro (27.07.) festyn strażacki. Dochód będzie przeznaczony na zakup sprzętu dla tutejszego OSP
7:00Dziś (26.07) w Brusach odbędzie się koncert "Muzykobranie". Na scenie wystąpią m.in. Lui Gawrońska i Lanberry
7:00Dzisiaj (26.07) w Sępólnie Krajeńskim wystąpi Iwona Węgrowska