
- 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.
- wtorek, 18 lutego 2025 7:01
Tuchola
Piosenki Kabaretu Starszych Panów w wykonaniu chojnickiej grupy Projekt 41 zabrzmią w Tucholskim Ośrodku Kultury
- wtorek, 18 lutego 2025 7:00
Gmina Przechlewo
Gmina Przechlewo nie będzie musiała płacić Krajowemu Ośrodkowi Wsparcia Rolnictwa za działkę w Kleśniku
- 2
- poniedziałek, 17 lutego 2025 16:50
Powiat sępoleński
Jedna osoba została poszkodowana w wypadku na drodze krajowej nr 25 koło Sępólna Krajeńskiego (FOTO)
- poniedziałek, 17 lutego 2025 13:08
Chojnice
Awaria sieci wodociągowej przy ul. Pocztowej w Chojnicach
- poniedziałek, 17 lutego 2025 12:13
Gmina Brusy
W Brusach działa już Hala Widowiskowo-Sportowa. Zajęcia wychowania fizycznego mają tu uczniowie z dwóch szkół
- poniedziałek, 17 lutego 2025 12:09
Gmina Bytów
Podpalił dom byłej partnerki, gdy ta przed nim uciekła. Agresor zatrzymany przez bytowskich policjantów
- poniedziałek, 17 lutego 2025 11:57
Powiat kościerski
Kierował po alkoholu i narkotykach. 23-latek z powiatu kościerskiego zatrzymany przez policjantów
- poniedziałek, 17 lutego 2025 11:47
Chojnice
Czy współpracownik Red Devils Chojnice przywłaszczył wynajęte auto? Prezes klubu mówi o "samowolce" Brazylijczyka
- 20
- poniedziałek, 17 lutego 2025 10:17
Gmina Więcbork
Władze Więcborka rozdały nagrody i wyróżnienia w dziedzinie sportu i kultury za 2024 rok (FOTO)
- 10
- poniedziałek, 17 lutego 2025 10:11
Chojnice
Znana jest już data końca przebudowy ul. Ceynowy wraz z rondami w Chojnicach. "Jesteśmy na finiszu" - mówi starosta (FOTO)
- poniedziałek, 17 lutego 2025 10:07
Woj. pomorskie
W województwie pomorskim rozpoczęły się ferie. Policja przypomina zasady bezpieczeństwa zimą
- poniedziałek, 17 lutego 2025 9:25
Człuchów
Do Człuchowa wraca budżet obywatelski. Przez miesiąc można zgłaszać propozycje, a do podziału jest 150 tys. zł (REPORTAŻ)
- poniedziałek, 17 lutego 2025 7:12
Gmina Miastko
Gmina Miastko zdobyła dofinansowanie do rozbudowy PSZOK-u. Będzie lepszy odzysk surowców
- poniedziałek, 17 lutego 2025 7:11
Powiat tucholski
W Tucholi rusza proces Mariusza N. Mężczyzna spowodował wypadek, wskutek którego zmarło jego kilkumiesięczne dziecko
- poniedziałek, 17 lutego 2025 7:03
Gmina Sępólno Krajeńskie
Ponad dwa kilometry drogi w okolicach Wałdówka, w gminie Sępólno Krajeńskie do remontu
- 32
- niedziela, 16 lutego 2025 20:31
Sport ◆ Chojnice
Memoriał Karola Ćwiklińskiego wygrał tegoroczny mistrz Chojnic. Novo Kuchnie triumfują w dwudniowym turnieju (FOTO)
- niedziela, 16 lutego 2025 10:58
Chojnice
Miał prezentować treści pedofilskie 12-latce. Policja zatrzymała 43-latka z gminy Człuchów
- niedziela, 16 lutego 2025 10:48
Chojnice
Opowiem ci historię, odcinek 162. "Mistrz świętej sprawiedliwości". Dlaczego dawne miasta zatrudniały katów?
- niedziela, 16 lutego 2025 8:37
Chojnice
Bieg na 750-lecie Chojnic. Odbędzie się tu jedna z imprez cyklu Grand Prix Borów Tucholskich
- niedziela, 16 lutego 2025 8:36
Kościerzyna
W Kościerzynie rusza Akademia Małych Odkrywców. Warsztaty odbędą się w pierwszym tygodniu ferii zimowych
- niedziela, 16 lutego 2025 8:36
Gmina Czersk
Budowa zadaszonego boiska przy szkole w Gotelpiu idzie pełną parą
Podcasty Weekend FM
Zobacz również:
Im możesz pomóc:
Sport:
20:31Memoriał Karola Ćwiklińskiego wygrał tegoroczny mistrz Chojnic. Novo Kuchnie triumfują w dwudniowym turnieju (FOTO)
22:43Podwójne zwycięstwo Chojniczanki. Jednego dnia pokonała w sparingach Gryfa Słupsk 2:1 i rezerwy Wisły Płock 3:2 (FOTO)
22:17"Umiejętności nie wystarczają nam na równorzędną grę". Bez sensacji w Lubawie. Constract pokonał Red Devils Chojnice 6:2
16:09Święto "królowej sportu" w Kościerzynie. Wracamy do Pomorskiej Gali Lekkiej Atletyki i rozmawiamy z Jarosławem Ścigałą
9:06Druga drużyna w tabeli kontra druga od końca. Red Devils Chojnice zagrają na wyjeździe z Constractem Lubawa
Ostatnio dodane artykuły:
7:01Piosenki Kabaretu Starszych Panów w wykonaniu chojnickiej grupy Projekt 41 zabrzmią w Tucholskim Ośrodku Kultury
7:00Gmina Przechlewo nie będzie musiała płacić Krajowemu Ośrodkowi Wsparcia Rolnictwa za działkę w Kleśniku
16:50Jedna osoba została poszkodowana w wypadku na drodze krajowej nr 25 koło Sępólna Krajeńskiego (FOTO)
13:08Awaria sieci wodociągowej przy ul. Pocztowej w Chojnicach
12:13W Brusach działa już Hala Widowiskowo-Sportowa. Zajęcia wychowania fizycznego mają tu uczniowie z dwóch szkół
12:09Podpalił dom byłej partnerki, gdy ta przed nim uciekła. Agresor zatrzymany przez bytowskich policjantów
11:57Kierował po alkoholu i narkotykach. 23-latek z powiatu kościerskiego zatrzymany przez policjantów
11:47Czy współpracownik Red Devils Chojnice przywłaszczył wynajęte auto? Prezes klubu mówi o "samowolce" Brazylijczyka
10:17Władze Więcborka rozdały nagrody i wyróżnienia w dziedzinie sportu i kultury za 2024 rok (FOTO)
10:11Znana jest już data końca przebudowy ul. Ceynowy wraz z rondami w Chojnicach. "Jesteśmy na finiszu" - mówi starosta (FOTO)