- Unikaj błędnych żądań
- Unikaj metod „@import”
- Połącz pliki CSS
- Unikaj funkcji „document.write” w HTML
- Scal zewnętrzne pliki JS
- Połącz obrazy w sprite'y CSS
- Odłóż ładowanie JavaScript
- Dlaczego ważne jest opóźnienie ładowania skryptów?
- Włącz kompresję Gzip
- Włącz funkcję podtrzymywania aktywności.
- Umieść małe kawałki CSS
- Osadź fragmenty kodu JavaScript
- Użyj buforowania
- Zminimalizuj CSS
- Minimalizuj zapytania DNS
- Zminimalizuj przekierowania
- Zoptymalizuj kolejność wywoływania stylów i skryptów
- Użyj obrazów o odpowiednim rozmiarze.
- Przykład z osobistego doświadczenia
- Użyj pliku .htaccess
Dom → Pytany? →
Szybkość ładowania stron w witrynie jest bardzo ważnym parametrem nie tylko dla odwiedzających, ale także dla wyszukiwarek. Dzięki szybkości ładowania wyszukiwarka może ocenić jakość witryny. Wdrożenie zaleceń rozważanych w artykule jest możliwe zarówno na etapie tworzenia strony internetowej, jak iw procesie jej dalszej konserwacji. Strona pomocy technicznej po jego rozwoju zadaniem jest być traktowanym z pełną odpowiedzialnością i nie zaniedbać go. Rozważ zalecenia Google, mające na celu optymalizację (zmniejszenie) szybkości pobierania witryny.
Zacznijmy więc:
Unikaj błędnych żądań
Często kod HTML lub CSS może wymagać obrazu lub pliku. W przypadku, gdy żądany obiekt nie zostanie znaleziony lub nie istnieje, szybkość witryny jest znacznie spowolniona, a obciążenie serwera wzrasta, co prowadzi do dużej liczby niepoprawnych żądań dla nieistniejącego obiektu. Jest więcej takich próśb niż możesz sobie wyobrazić.
Poprawianie błędnych zapytań jest znacznie łatwiejsze do znalezienia. Jeśli znajdziesz jakieś nieprawidłowe zapytanie, po prostu usuń niepotrzebny kod z pliku HTML lub CSS lub popraw go.
Niezwykle ważne jest kontrolowanie szybkości ładowania strony i śledzenie połączeń z nieistniejącymi zasobami!
Unikaj metod „@import”
Używanie metod w plikach CSS, takich jak @import, może spowolnić szybkość ładowania stylów, w szczególności stron. Największa trudność polega na sekwencyjnym ładowaniu stylów (jeden po drugim) zamiast korzystania z możliwości ich równoległego (jednoczesnego) ładowania. To dodaje dodatkowe kroki do procesu ładowania witryny.
Przeglądaj wszystkie swoje pliki pod kątem dyrektyw importowych. Mogą wyglądać tak:
@import url („style.css”)
Zastąp je bezpośrednim połączeniem stylów w kodzie HTML:
<link rel = "style.css" href = "style.css" type = "text / css">
Połącz pliki CSS
Każdy plik CSS korzystający ze strony Twojej witryny dodaje czas i zmniejsza szybkość ładowania strony (połączenie → pobieranie, połączenie → pobieranie itp.). Czasami użycie kilku plików stylów jest nieuniknione (na przykład w przypadku, gdy łatwiej jest pracować z projektem witryny przy użyciu kilku plików), ale jeśli to możliwe, konieczne jest połączenie ich w jeden plik.
Aby to zrobić, wykonaj prostą operację kopiowania i wklejania z kilku plików w jeden! Jeden plik CSS będzie zawierał dokładnie te same przydatne informacje dla witryny, ale zwiększy szybkość pobierania!
Po scaleniu plików nie zapomnij usunąć niepotrzebnych połączeń starych plików w kodzie HTML stron.
Unikaj funkcji „document.write” w HTML
Aby wyświetlić coś na stronie za pomocą JavaScript lub połączyć się z zewnętrznym zasobem, możesz użyć funkcji document.write , jednak musisz zdać sobie sprawę, że podczas korzystania z kodu HTML do jego wykonania przeglądarka internetowa wykona nieuzasadnione operacje odczytu -records, które niekorzystnie wpływają na szybkość ładowania stron w witrynie.
Sprawdź cały kod HTML dla dyrektyw document.write, które mogą wyglądać tak:
document.write ('<skrypt src = "script.js"> </ script>');
Zamiast tego po prostu podłącz zewnętrzny skrypt korzystający z takiego połączenia w kodzie HTML strony:
<skrypt src = "script.js"> </ script>
Scal zewnętrzne pliki JS
Pliki JavaScript są bardzo często używane przez łączenie dużej liczby zewnętrznych skryptów.
Podobnie jak w przypadku łączenia plików CSS, musisz połączyć pliki JS w jeden (jeśli to możliwe). Jakość wykonania określonych w nich funkcji nie będzie miała na to wpływu, ale wpłynie pozytywnie na szybkość ładowania stron internetowych.
Jako dodatkowe środki możesz użyć włączenie małych skryptów do treści stron i opóźnione skrypty do pobrania .
Połącz obrazy w sprite'y CSS
Każda witryna korzysta z dużej liczby różnych obrazów. Aby wyświetlić każdą z nich, przeglądarka internetowa wysyła jedno żądanie, w odpowiedzi na które serwer „daje” odpowiedni obraz.
Liczba wywołań na serwerze, a co za tym idzie, szybkość ładowania stron można zmniejszyć, łącząc kilka obrazów w jeden ikonkę CSS (ikonka CSS). Zamiast pobierać dużą liczbę obrazów, Twoja przeglądarka pobierze teraz jedną! I to jest piękno sprite'ów CSS! Oczywiście dotyczy to bardziej połączenia kilku małych obrazów używanych w elementach projektu strony internetowej (tła menu, emotikony, narożniki, ikony itp.).
W tym przypadku, aby użyć pojedynczego elementu z ikonki CSS, trzeba wywołać tę ikonkę, a następnie rozmiar i położenie wymaganego elementu w stosunku do całkowitego rozmiaru ikonki CSS.
Używając przykładu dwóch obrazów (klaksonu i uśmiechu) połączonych w jeden duszek, napiszemy następujący styl CSS, aby pokazać klakson:
.rupor {width: 50px; wysokość: 50px; background: url (images / sprite.png) 0 0px;}
Dla uśmiechu styl będzie wyglądał następująco:
.smile {width: 50px; wysokość: 50px; background: url (images / sprite.png) 0 –50px;}
Odpowiednie fragmenty kodu HTML będą następujące:
Na róg:
<div class = "rupor"> </ div>
I dla uśmiechu:
<div class = "smile"> </ div>
Odłóż ładowanie JavaScript
Odkładanie ładowania JavaScript podczas uzyskiwania dostępu do strony internetowej jest jednym z najważniejszych i najbardziej złożonych problemów. Opóźnione ładowanie skryptów zewnętrznych, jak można się domyślić, pozwoli stronie witryny ładować się znacznie szybciej niż sekwencyjne ładowanie strony, linia po linii kodu źródłowego. Ktoś może powiedzieć, że wystarczy umieścić skrypt wywołujący na końcu strony, a sprawa zostanie rozwiązana. Ale w rzeczywistości tak nie jest.
Tylko rozwiązanie wskazane poniżej pozwoli na pobranie skryptu zewnętrznego TYLKO po pełnym załadowaniu strony i nie wywoła ostrzeżenia „Wstrzymaj ładowanie javascript” w narzędziach Google dla webmasterów. Oto metoda zalecana przez Google:
<script type = "text / javascript">
funkcja downloadJSAtOnload () {
var element = document.createElement („skrypt”);
element.src = "script.js";
document.body.appendChild (element);
}
if (window.addEventListener)
window.addEventListener („load”, downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent ("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</ script & gt
Ten kod „informuje” przeglądarkę, aby poczekała, aż strona zostanie w pełni załadowana, a następnie skrypt script.js zostanie wykonany.
Ważne jest, aby zrozumieć, że nie można umieścić żadnego skryptu JS w tym kodzie, który jest niezbędny do prawidłowego załadowania strony. Konieczne jest podzielenie wszystkich skryptów na dwie grupy. Pierwsza grupa to skrypty do prawidłowego ładowania strony, druga to skrypty, których wykonanie można odłożyć na „po załadowaniu” (na przykład niektóre zdarzenia myszy itp.). I tylko skrypty z drugiej grupy mogą być umieszczone w określonym kodzie.
Dlaczego ważne jest opóźnienie ładowania skryptów?
Tak, po prostu dlatego, że znacząco wpływają na szybkość ładowania stron, co z kolei jest istotnym czynnikiem w rankingu stron według wyszukiwarek.
Włącz kompresję Gzip
Kompresowanie plików HTML i CSS za pomocą kompresji Gzip pozwala zaoszczędzić od 50 do 70 procent ilości informacji pobieranych z serwera WWW. W takim przypadku po wysłaniu żądania przez serwer serwer wyśle skompresowany dokument w odpowiedzi. Automatycznie zmniejszy obciążenie serwera i skróci czas ładowania stron Twojej witryny.
Możesz włączyć kompresję, dodając określony kod do pliku .htaccess znajdującego się w folderze głównym witryny w witrynie hostingowej.
Musisz utworzyć plik .htaccess lub, jeśli już istnieje, dodaj do niego następujący kod:
<ifModule mod_gzip.c>
mod_gzip_on Tak
mod_gzip_dechunk Tak
plik mod_gzip_item_include. (html? | txt | css | js | php | pl) $
mod_gzip_item_include handler ^ cgi-script $
mod_gzip_item_include mime ^ text /.*
mod_gzip_item_include mime ^ application / x-javascript. *
mod_gzip_item_exclude mime ^ image /.*
mod_gzip_item_exclude rspheader ^ Content-Encoding :. * gzip. *
</ ifModule>
Kod ten wskaże serwerowi potrzebę kompresji często używanych plików na stronie i przeniesienia ich do użytkownika w skompresowanej formie.
Jest jeszcze jedna (i prawdopodobnie nie ostatnia) wersja kodu, która ma zostać umieszczona w pliku .htaccess , zaprojektowana do włączania kompresji Gzip (używamy tego kodu na naszej stronie internetowej):
# Kompresuj tekst, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text / plain
AddOutputFilterByType DEFLATE text / html
AddOutputFilterByType DEFLATE text / xml
AddOutputFilterByType DEFLATE tekst / css
AddOutputFilterByType DEFLATE aplikacja / xml
AddOutputFilterByType DEFLATE aplikacja / xhtml + xml
AddOutputFilterByType DEFLATE aplikacja / rss + xml
AddOutputFilterByType Aplikacja DEFLATE / javascript
AddOutputFilterByType Aplikacja DEFLATE / x-javascript
# Lub skompresuj niektóre typy plików według rozszerzenia:
SetOutputFilter DEFLATE
Po włączeniu Gzip na jeden ze sposobów wymienionych powyżej, możesz sprawdzić stopień kompresji stron Twojej witryny. Aby to zrobić, kliknij link i wprowadź adres strony internetowej w polu „Adres strony internetowej”. Rezultatem może być coś takiego:
Zwróć uwagę na procent kompresji - prawie 74%. Zgadzam się, jest to dość poważne zmniejszenie ilości przesyłanych danych.
Włącz funkcję podtrzymywania aktywności.
Aby wyświetlić strony internetowe, przeglądarka musi stale pobierać pewne dane z serwera WWW. Po pierwsze, plik HTML i dodatkowe dane (pliki CSS, obrazy, skrypty) są przesyłane do przeglądarki. Jeśli funkcja podtrzymywania aktywności nie jest włączona, załadowanie strony może zająć dużo czasu: oddzielne połączenie sieciowe zostanie otwarte, aby zażądać każdego pliku. W przypadku włączonej funkcji utrzymywania aktywności między przeglądarką a serwerem tworzony jest rodzaj „rozmowy”, działającej w tym samym połączeniu.
Domyślnie parametr podtrzymywania aktywności jest włączony, ale mogą wystąpić sytuacje, w których witryna nie będzie go jednak używać lub jest wyłączona w ustawieniach hostingu. Aby włączyć utrzymywanie aktywności, musisz dodać nagłówek HTTP do żądań przy użyciu tego samego pliku .htaccess :
<ifModule mod_headers.c> Zestaw nagłówków Connection keep-alive </ ifModule>
Jeśli masz dostęp do pliku konfiguracyjnego serwera Apache , możesz włączyć utrzymywanie aktywności w następujący sposób:
# KeepAlive: czy są trwałe połączenia
# jedno żądanie na połączenie). Ustaw na „Off”, aby wyłączyć.
KeepAlive na
# MaxKeepAliveRequests:
# podczas trwałego połączenia. Ustaw na 0, aby zezwolić na nieograniczoną ilość.
# Zalecamy pozostawienie tego numeru wysoko, aby uzyskać maksymalną wydajność.
MaxKeepAliveRequests 100
#SetAliveTimeout:
# ten sam klient na tym samym połączeniu.
KeepAliveTimeout 100
Umieść małe kawałki CSS
Aby uniknąć ładowania dodatkowych plików z małymi fragmentami stylów CSS, konieczne jest osadzenie tych fragmentów bezpośrednio w kodzie HTML stron witryny. Ładowanie pojedynczego pliku HTML za pomocą osadzonego CSS jest znacznie szybsze niż ładowanie dwóch plików (HTML + CSS).
Aby to zrobić, musisz zarejestrować style w sekcji <head> </ head> kodu HTML strony w następujący sposób:
<style type = "text / css">
...
</ style>
Ta metoda ma zarówno wady, jak i zalety . Na plus jest fakt, że przeglądarka nie musi żądać i pobierać wielu plików. Z drugiej strony - i jest to niewątpliwie minus - style CSS umieszczone w pliku HTML nie są buforowane. Pamięć podręczna, jak wiecie, pomaga również przeglądarce nie robić niepotrzebnych odczytów informacji statycznych, które mogą być stylami CSS. Style umieszczone w kodzie stron witryny są ładowane za każdym razem, gdy przechodzisz ze strony na stronę. Nie ma znaczenia, czy style Twojej witryny są małe. Ale jeśli jest dużo CSS, to oczywiście będziesz musiał oddzielić style od kodu źródłowego HTML.
Osadzanie CSS jest bardzo przydatne podczas tworzenia stron startowych dla witryny, stron docelowych itp., Gdy potrzebujesz prawie błyskawicznego ich wyświetlania.
Osadź fragmenty kodu JavaScript
Osadzanie małych fragmentów kodu JS, analogicznie do osadzania CSS, zmniejsza również liczbę połączeń z serwerem i ma pozytywny wpływ na szybkość ładowania witryny.
Kod osadzania w HTML wygląda tak:
<script type = "text / javascript">
...
</ script>
Użyj buforowania
Gdy przeglądarka wyświetla dowolną stronę witryny, kod, style, skrypty, obrazy, logo i inne zasoby są pobierane. Gdy użytkownik przechodzi z jednej strony na drugą, przeglądarka musi ponownie załadować niezbędne informacje. Ale w większości przypadków nie ma takiej potrzeby: duża część powtarzalnych danych jest już wstępnie załadowana z poprzednich stron witryny. Aby nie musieć ponownie pobierać tych samych informacji (tych, które przeglądarka już „pamięta”), musisz użyć buforowania.
Buforowanie sprawia, że witryna jest wyjątkowo szybka ze względu na brak konieczności wielokrotnego pobierania wczytanych wcześniej informacji.
Aby włączyć buforowanie, musisz dodać następujący kod do znanego nam pliku .htaccess :
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image / jpg „dostęp 1 rok”
ExpiresByType image / jpeg „access 1 year”
ExpiresByType image / gif „access 1 year”
ExpiresByType image / png „access 1 year”
ExpiresByType text / css „dostęp 1 miesiąc”
ExpiresByType text / html „access 1 month”
ExpiresByType application / pdf „dostęp 1 miesiąc”
ExpiresByType text / x-javascript „dostęp 1 miesiąc”
ExpiresByType aplikacja / x-shockwave-flash „dostęp 1 miesiąc”
ExpiresByType image / x-icon „access 1 year”
ExpiresDefault „dostęp 1 miesiąc”
</ IfModule>
Parametry dostępu 1 rok lub dostęp 1 miesiąc ustaw czas buforowania dla wybranego typu danych. Możesz dostosować te wartości samodzielnie według własnego uznania.
Alternatywny kod umożliwiający buforowanie za pomocą pliku .htaccess :
# Przechowuj pliki html i htm przez 6 godzin
<FilesMatch ". (Html | htm) $">
Zestaw nagłówków Cache-Control „max-age = 21600”
</ FilesMatch>
# Buforuj pliki css, javascript i tekstowe przez jeden tydzień
<FilesMatch ". (Js | css | txt) $">
Zestaw nagłówków Cache-Control „max-age = 604800”
</ FilesMatch>
# Pamięć podręczna flash i obrazy na miesiąc
<FilesMatch ". (Flv | swf | ico | gif | jpg | jpeg | png) $">
Zestaw nagłówków Cache-Control „max-age = 2592000”
</ FilesMatch>
# Wyłącz buforowanie plików wykonywalnych
<FilesMatch ". (Pl | php | cgi | spl | scgi | fcgi) $">
Nagłówek odznacza Cache-Control
</ FilesMatch>
W drugim przykładzie maksymalny czas buforowania jest określony w sekundach.
Zminimalizuj CSS
Optymalnie zminimalizowany kod stylu CSS zajmuje mniej miejsca, a co za tym idzie - minimalizuje prędkość pobierania. Nie ma znaczenia, czy używasz stylów osadzonych w kodzie HTML, czy jako oddzielne pliki dołączania.
Wyjaśnijmy na przykładach, co oznacza termin „minimalizacja CSS”.
„Zwykły” kod CSS może wyglądać tak:
ciało {
kolor tła: # ff0000;
}
h1 {
kolor: czerwony;
text-align: right;
}
Ten sam zminimalizowany kod wygląda tak:
body {background-color: # ff0000;}
h1 {color: red; text-align: right;}
I to nie wszystko. Jeśli podejście do minimalizacji jest bardzo „ciężkie”, możesz odmówić przeniesienia do nowej linii (2 bajty ekonomii przy każdym transferze) i nie dodawać średnika na końcu każdego stylu (1 bajt ekonomii na każdym punkcie średnika).
Zmniejszając w ten sposób kod, możesz znacznie zaoszczędzić na jego wolumenie i znacznie zwiększyć szybkość ładowania stron na swojej stronie!
Minimalizuj zapytania DNS
Każdego dnia strony naszych stron stają się bardziej zaawansowane technicznie i funkcjonalne, ale z tego powodu są wolniejsze. Dodawane są odwołania do dodatkowych serwerów, narzędzi statystycznych, czcionek, przycisków społecznościowych itp. W trakcie ładowania strony internetowej przeglądarka internetowa uzyskuje dostęp do dodatkowych hostów w celu uzyskania niezbędnych informacji (wykonuje dodatkowe zapytania DNS). Nawet bardzo szybka strona witryny, ładowana w ułamku sekund, może stać się bardzo powolna z powodu dodatkowych połączeń z zasobami zewnętrznymi.
Jednym z najwyraźniejszych przykładów takich odwołań mogą być przyciski serwisów społecznościowych (Odnoklassniki, VKontakte, Facebook, Twitter, Google+ itp.): Po ich utworzeniu Twoja witryna odbiera połączenia do zewnętrznych stron. Innym przykładem jest użycie (połączenie) Google Web Fonts. Każda czcionka wymaga użycia dwóch zapytań DNS.
Podczas korzystania z dodatkowych funkcji i łączenia zasobów zewnętrznych, ważne jest, aby zachować równowagę między potrzebą ich używania a szybkością ładowania witryny.
Zminimalizuj przekierowania
Istnieje wiele powodów, aby używać przekierowań, ale musisz zrozumieć, że wpływają one również na wydajność witryny i jej szybkość.
Przekierowania oznaczają konieczność dostępu do jednego pliku podczas uzyskiwania dostępu do innego. I są przeprowadzane w wielu kierunkach. Przykład - przekierowanie 301 - stałe przekierowanie z jednego adresu na drugi. Jest to prawdopodobnie jedno z najczęściej używanych przekierowań używanych podczas przekierowywania witryny z www na stronę internetową bez www (lub odwrotnie), aby uniknąć duplikowania indeksowania witryn lustrzanych.
Jak działa przekierowanie: Wyobraź sobie, że zostałeś zaproszony na jeden adres, przyszedłeś tam i drzwi do tego adresu są zamknięte, a ty zostałeś przekierowany na inny adres. W ten sposób działają przekierowania.
Korzystając z przekierowań, przestrzegaj prostych zasad:
- Nigdy nie twórz linków do strony, jeśli wiesz, że istnieje na niej przekierowanie;
- Nigdy nie wykonuj więcej niż jednego przekierowania, aby uzyskać wymagany zasób.
Zoptymalizuj kolejność wywoływania stylów i skryptów
Ważne jest, aby wybrać prawidłową kolejność ładowania stylów i skryptów w kodzie HTML stron witryny. Najpierw musisz określić wewnętrzne deklaracje stylów, a następnie dołączyć zewnętrzne pliki stylów, a następnie skrypty. Google przeprowadził testy, na podstawie których stwierdzono, że taka sekwencja jest niezbędna przy deklarowaniu stylów i skryptów.
Gdy przeglądarka internetowa ładuje stronę, odczytuje kod HTML i zaczyna sekwencyjnie dzwonić do zasobów w kodzie (styl CSS, skrypty, obrazy itp.). Gdy przeglądarka zacznie ładować skrypt, przestać ładować cokolwiek innego, aż skrypt nie zostanie całkowicie odczytany (załadowany). Google twierdzi, wpisz typową stronę internetową od 80 do 90 procent czasu czeka na pobranie z sieci. Aby zminimalizować ten czas, wystarczy poprawnie umieścić wywołania zasobów na stronach i postępować zgodnie z następującymi zasadami:
- Połącz kilka zewnętrznych plików JavaScript w jeden;
- Dołącz zewnętrzny plik CSS przed podłączeniem zewnętrznego pliku JavaScript;
- Nie używaj wewnętrznego kodu JavaScript (w kodzie HTML strony) między wywoływaniem zewnętrznego pliku CSS i łączeniem innych zasobów.
Użyj obrazów o odpowiednim rozmiarze.
Bardzo często webmasterzy na stronach nie myślą o prawidłowych rozmiarach obrazów: do wyświetlania małych obrazów (miniatur) duże obrazy są często używane z wymuszoną instalacją małych rozmiarów za pomocą parametrów szerokość i wysokość .
HTML może oczywiście wyświetlać obrazy o dowolnym rozmiarze. Konieczne jest jednak zrozumienie, że w przypadku zmniejszenia dużego obrazu do miniatury, załadowanie pełnego obrazu zajmie trochę czasu. A to wszystko - dodatkowy czas. W przeciwnym przypadku (wymuszone powiększenie małych obrazów do dużych rozmiarów) jakość jest wyraźnie odczuwalna.
Do właściwego rozmieszczenia obrazów potrzebujesz:
- Używaj obrazów o pożądanym rozmiarze: podczas umieszczania na miniaturach strony użyj miniatur obrazów, w przypadku dużych zdjęć - obrazów o odpowiednim rozmiarze;
- Określ dokładne rozmiary obrazu: na atrybutach szerokości i wysokości znacznika <img> musisz określić dokładne obrazy załadowanych obrazów. W przeciwnym razie przeglądarka może wyświetlić je w zniekształconej formie;
- Nie zaniedbuj atrybutów szerokości i wysokości : jeśli nie określisz tych parametrów, podczas powolnego ładowania informacje na stronie mogą przeskakiwać, przeglądarka utworzy stronę nie raz, ale dwa lub więcej (w zależności od liczby obrazów na stronie): najpierw przeglądarka czytać i umieszczać tekst bez uwzględnienia rozmiaru obrazów, a następnie obrazy zostaną załadowane, „zaklinowane” w tekście i przesunięte w inny sposób. Jeśli wcześniej wskażesz przeglądarce rozmiar obrazu, będzie on już wiedział o zarezerwowanej dla niego przestrzeni i nie będzie musiał zmieniać kształtu strony internetowej wiele razy.
Przykład z osobistego doświadczenia
Podczas audytu jednej z naszych „zaufanych” stron odkryliśmy olbrzymi obraz - rozmiar 4049 × 2699 pikseli. Na stronie został skompresowany przez przeglądarkę, określając wymagany rozmiar. Oryginalny obraz (wypełniony czerwonym), oprócz ogromnych rozmiarów, zajął 5,74 MB (6 023 239 bajtów) na serwerze. Zoptymalizowany obraz (wypełniony zielenią) o rozmiarze 250 × 167 pikseli zaczął „ważyć” tylko 10,5 KB (10 805 bajtów). Spadek o 557 (!) Czas jest oczywisty:
Korzystanie z tych prostych reguł pozwoli szybciej załadować witrynę!
Użyj pliku .htaccess
.htaccess to mały plik, ale jednocześnie bardzo potężne narzędzie, które może oświetlić wiele aspektów i ustawić tryby serwera i witryny. Przekierowania, kompresja, buforowanie, instalacja praw dostępu itd. - wszystko to może być zarządzane przez ten plik. Należy zauważyć, że nie wszystkie firmy hostingowe zapewniają możliwość pełnego zarządzania działaniem serwera przez ten plik. Jednak nawet niewielki błąd podczas edycji pliku może prowadzić do niepożądanych rezultatów, dlatego niezwykle ważne jest, aby być jak najbardziej odpowiedzialnym w procesie tworzenia i modyfikowania pliku .htaccess .
Na wszelki wypadek zaleca się wykonanie kopii zapasowej tego pliku przed zmianą!
.htaccess to plik znajdujący się w folderze głównym (i nie tylko w katalogu głównym) witryny, określa ustawienia serwera i witryny, które są powszechnie używane w plikach konfiguracyjnych serwera WWW. Ten plik jest edytowany za pomocą zwykłego edytora tekstu.
Informacje na temat pracy z plikiem .htaccess można uzyskać w odpowiednich zasobach internetowych.
Według strony www.feedthebot.com
Dlaczego ważne jest opóźnienie ładowania skryptów?Html?
