wejścieJak uczynić strony ładowane szybciej. Pięć sposobów na przyspieszenie strony pobierania strony
Dobry dzień! Z pewnością wszyscy przychodzą do czasu, gdy konieczne jest zwiększenie prędkości pobierania strony witryny z tego powodu, że strona jest ładowana zbyt długi i użytkownikom bez czekania na jego pełny bagażnik, opuścić witrynę. W dzisiejszym nagraniu powiem więcej szczegółów na temat narzędzi, których chcesz użyć, aby zoptymalizować prędkość ładowania witryny i które kluczowe punkty mogą zakłócać strony. Ponadto dowiesz się również, w jakich usługach można zmierzyć prędkość pobierania strony witryny.
Usługi do pomiaru prędkości strony witryny
Z różnych usług, które kiedyś sprawdzałem szybkość pobierania strony witryny, podobała mi się usługa: Pingdom.com, co wyraźnie pokazuje każdą szczegółową stronę i pobieranie prędkości wymaganej strony, na przykład dla strona główna Witryna na blogu, przy wyborze ustawień - "Amsterdam, Holandia" prędkość pobierania witryny wynosi 1,08 sekundy, co nie jest takie złe. 
Poniżej przedstawiono wszystkie niezbędne informacje, które są świadczone przez usługę szybkości połączenia, oczekiwania i odpowiedzi jako serwery osób trzecich, z których dane są wymagane i wewnętrzny serwer. 
Z dostarczonych danych możesz określić najwolniejsze momenty i poprawić prędkość pobierania stron strony, wpływając na te miejsca. Pomoże to wspaniałym narzędziem opracowanym przez Google - Google PageSpeed \u200b\u200bInsights.
Zoptymalizujemy szybkość pobierania stron witryny za pomocą Google PagePeed
W rzeczywistości wszystko jest łatwiejsze niż wydaje się na pierwszy rzut oka, ale chcę świętować moment użyj Google Paptspeed Insights nie jest widoczne ze wszystkich chwil, które mogą pogorszyć prędkość pobierania strony witryny, ale będzie dość odpowiednie, wykonując wszystkie elementy na żądanie usługi, można znacznie poprawić prędkość. Aby uzyskać bardziej szczegółową analizę czynników wpływających na prędkość pobierania witryny, należy użyć przeglądarki Mozilla Firefox z dodatkiem Firebug i wtyczkę PageSpeed \u200b\u200bdla Firefoksa.
Dlaczego Firefox? W przypadku Firefoksa ta wtyczka wygląda bardziej wygodne, nawet treści wyświetlane po analizowaniu wtyczki stron internetowych jest bardziej kompaktowy, więc radzę analizować strony za pomocą Firefoksa.
Tak więc po zainstalowaniu wtyczki i dodanie ognisko w prawym górnym rogu pojawi się przycisk z wizerunkiem chrząszcza.
Przejdź do witryny, analizy, dla której chcesz wykonać, kliknij przycisk za pomocą Beetle. Okno zostanie otwarte przed tobą, której ostatnia karta zostanie nazwana oknem z przyciskiem z przyciskiem. Prędkość strony. Po kliknięciu na karcie. Analizuj wydajność.Musisz kliknąć przycisk i poczekaj, aż strona zostanie przeanalizowana. Ponadto pojawi się listę wszystkich zaleceń, które chcesz wykonać, aby poprawić prędkość pobierania stron witryny. Po krótkiej manipulacji przez zawartość stron blogu osiągnęłam wynik na PagePeed \u003d 94 z 100 możliwych punktów, co jest całkiem dobre, można oczywiście uzyskać i poprawić wynik, ale do tej pory nie ma krytycznego, główne Rzecz jest tym, że wszystkie główne zakłócające momenty wyeliminowane. 
Ale zielone kleszcze szukają, że wszystko jest w porządku, możesz poprawić wskaźnik i osiągnąć wartość ponad 94.
Rozważmy więc podstawowe zalecenia, które chcesz wykonać, aby zoptymalizować prędkość pobierania stron witryny:
Włącz kompresję - Aby skonfigurować kompresję XML, CSS, JS i HTML do formatu GZIP, musisz dodać następujący kod do pliku.htaccess na serwerze witryny FTP:
Podaj obrazy odpowiednimi proporcjami - W plikach CSS należy określić stałą proporcję dla obrazów, zamiast zmiany ich za pomocą CSS.
Użyj pamięci podręcznej przeglądarkiNastępnie pojawia się walidator pamięci podręcznej, a pozycja jest wykonywana. Określ walidator pamięci podręcznej - konieczne jest użycie buforowania z boku przeglądarki, tj. Wymagany klient Dodaj V.Htaccess następujące wiersze Kod:
W tej części kodu jest implementowany buforowanie przez 7 dni, nie zapomnij, że nie zawsze musisz wykonać wymagania wyszukiwarek, jeśli elementy witryny są często aktualizowane, należy skonfigurować buforowanie dla każdego oddzielnie.
Zoptymalizuj obrazy - W celu zmniejszenia rozmiaru stron i odpowiednio zwiększyć prędkość pobierania, należy użyć zasady kopiowania wszystkich obrazów witryny z serwera FTP i pobierania wsadowych do dalszego przetwarzania do usługi HTTP: / /www.smushit.com/, procedura jest wystarczająco długa, jeśli w witrynie serwisowej liczba zdjęć różni się tysięcy. Może być błędne błędy pliki GIF. zostanie przesunięty w JPG lub PNG, a nazwa pliku zmienia się, należy wziąć pod uwagę ten momentJeśli są obrazy format GIF., Lepiej jest załadować je oddzielnie, a następnie reguła ręcznie. Zalecenia:
- Po pobraniu każdego pakietu aktualizuj stronę, w przeciwnym razie obrazy zostaną dodane do bieżącej listy.
- Wszystkie zoptymalizowane pliki są pobierane przez archiwum z tej usługi, więc przed przeciążeniem do serwera muszą zostać usunięte z archiwum.
Depozycja analizy Script Script Script - Możesz uruchomić skrypt na jakiś czas ładowania czasu za pomocą kodu:
Zmniejsz skrypty JS i style CSS - Musisz użyć usługi: http://www.refresh-sf.com/yui/, który usuwa dodatkowe spacje w kodzie, zapisując w ten sposób lokalizację pliku.
Zmniejsz HTML. - Zredukować Strony HTML. Możesz usunąć dodatkowe luki i pomocnicze znaki cytat, które można pominąć w określonych sytuacjach.
Określ rozmiary obrazów - W przypadku wszystkich obrazów, ich wymiary muszą być napisane, nie musisz obniżać ustawienia rozmiaru obrazu, w przeciwnym razie obraz skalowalny skalowalny krzywy lub CMS ucieknie do samodzielnego przepisywania stylów CSS dla obrazów, zwiększają tym samym ich rozmiar.
Określ tytuł Wary: Akceptuj kodowanie - Wszystkie pliki otwarte na buforowanie muszą zwrócić tytuł, wystarczy dodać kod V.HtaCcess na serwerze FTP:
P.S.: Aby zmniejszyć liczbę żądań do plików, konieczne jest zmniejszenie liczby stylów CSS i łączyć je w 1 pliku, JS Skrypty Idealnie również musi scalić się w 1 plik.
Wniosek
Dostarczona lista zaleceń pomoże poprawić szybkość pobierania strony witryny, ale nie zapominaj, że w niektórych punktach może zwiększyć obciążenie na serwerze, na przykład podczas korzystania z kompresji GZIP za pomocą narzędzi serwera i przy użyciu buforowania W boku przeglądarki (klient) konieczne będzie podejście do etapów optymalizacji. Po drugiej stronie i przygotować gZIP Pliki. Sam, a V.Htaccess skonfigurował prawidłowe przetwarzanie, a w zależności od przeglądarki zapewniają użytkownikom kompresywowani lub nieskompresowane pliki.
Nie zapominaj, że poprawa prędkości ładowania strony ma pozytywny wpływ na miejsce SEO, a inne rzeczy są równe, jeśli Twoja witryna wygra w szybkości, będzie wyższa niż konkurenci.
Sukcesy w optymalizacji szybkości stron strony!
Myślę, że nie jest tajemnicą, że prędkość pobierania strony wpływa na wiele czynników. Jeśli ktoś nie jest świadomy, krótko powiedzą, że następuje, że prędkość pobierania wpływa nie tylko wtedy, gdy odwiedzający będzie czekać, gdy witryna zostanie załadowana, ale także na optymalizacji SEO. Po wszystkim, dziś wiele wyszukiwarek, gdy strony rankingowe zaczęły brać pod uwagę prędkość pobierania strony. Dlatego im szybciej twoja witryna zostanie wzmocniona, tym więcej odwiedzających możesz dostać się z wyszukiwarek, a zatem i więcej pieniędzy na nim.
Dlatego w tym artykule postanowiłem złożyć 10 najlepszych wskazówek, w jaki sposób możesz zwiększyć prędkość strony internetowej i witryny jako całości. Artykuł nie twierdzi, że jest geniuszem i zaprojektowany dla początkujących.
Więc chodźmy:
1. Zmniejsz liczbę żądań HTTP
80% pobierania strony koncentruje się na pobieraniu komponentów strony: Skrypty, zdjęcia, pliki CSS, Flash. Specyfikacja HTTP / 1.1 doradza, aby przeglądarki były równoległe obciążone nie więcej niż 2 składniki strony z jednego hosta. Popierając liczbę tych komponentów, zmniejszamy liczbę zapytań HTTP na serwer i jak wynik zwiększa prędkość ładowania strony.
Ale jak zmniejszyć liczbę żądań na serwer bez wpływu wygląd Strony?
2. Umieść pliki CSS na początku strony.
Podłączanie do plików CSS w nagłówku strony Dostajemy stopniowe renderowanie strony, tj. Strona zostanie załadowana stopniowo - najpierw tytuł, a następnie logo na piętrze, nawigację itp. - a to z kolei służy jako doskonały wskaźnik ładowania stron dla użytkownika i poprawia ogólne wrażenie z witryny.
Jeśli umieścisz pliki CSS na dole strony, nie pozwala na stopniowo wielu przeglądarek, nie zezwala na wiele przeglądarek. Jest to wyjaśnione przez fakt, że przeglądarka "nie chce" przecenić elementów, których styl może zmienić po załadowaniu strony. Więc wszystkie pliki CSS zawsze łączą się na górze strony w sekcji głowy.
3. Umieść JavaScript na końcu strony.
Pliki PLYOW JavaScript w dół strony Pozwala przeglądarkę do przesyłania strony z treścią, a następnie rozpocząć pobieranie plików JavaScript. Jeśli Twoja witryna utrzymuje się z czasami i zawiera wszystkie możliwe interaktywne "bzdury", a następnie te pliki JavaScript mogą być nieco i ważyć, mogą je mieć kilkaset kilobajtów, więc przed pobraniem strony, aby zmusić użytkownika, aby poczekać, aż wszystkie pliki Javasctut są załadowane .
Dodatkowo, zewnętrzne pliki pliki blokujące równoległe ładowanie. Specyfikacja HTTP / 1.1 doradza, aby przeglądarki były równoległe obciążone nie więcej niż 2 składniki strony z jednego hosta. Tak więc, jeśli zdjęcia Twojej witryny znajdują się na różnych hostach, otrzymasz więcej niż 2 równoległe pliki do pobrania. A gdy skrypt jest załadowany, przeglądarka nie uruchomi żadnych innych plików do pobrania, nawet z innych gospodarzy.
4. Minimalizuj CSS i JavaScript
Minimalizacja plików to usunięcie wszystkich nieznacznych znaków z kodu w celu zmniejszenia ilości pliku i przyspieszyć jego pobieranie. W zminimalizowanym pliku, wszystkie komentarze i nieistotne przestrzenie, przeszczepy ciągów, zakładki, zakładki są usuwane. Wszystko jest tutaj proste. Im mniejszy rozmiar pliku, tym mniej czasu konieczne będzie przeglądarkę do pobrania. I zminimalizować kod pomoże tym 24 usług online dla kodu optymalizacji kompresji i CSS
5. Użyj podpusty do pobrania równoległego
Jak powiedziałem powyżej, zgodnie z specyfikacją HTTP / 1.1, ograniczenia są nałożone na liczbę jednocześnie pobieranych elementów witryny, a mianowicie nie więcej niż 2 komponentów z jednego gospodarza. Dlatego, jeśli masz dużo grafiki na swojej stronie, lepiej wziąć go na oddzielną subdomenę lub subdomenów. Dla Ciebie będzie to ten sam serwer i dla przeglądarki - inny. Im więcej subdomów, które tworzysz więcej plików Przeglądarka będzie mogła jednocześnie pobrać, a tym szybsza, cała strona witryny uruchomi. Możesz zmienić adres tylko do nowego. Bardzo prosty, ale skuteczny sposób.
6. Użyj pamięci podręcznej przeglądarki
Keching staje się niezwykle ważny dla nowoczesnych stron internetowych, które wykorzystują rozległe połączenie JavaScript i CSS. Faktem jest, że gdy odwiedzający poszedł do Twojej witryny po raz pierwszy, przeglądarka pobiera wszystkie pliki JavaScript i CSS, ładuje również cały harmonogram i błysk, ale poprawnie ustawienie nagłówka HTTP wygasa, wykonasz elementy strony buforowany. Tak więc, gdy odwiedzający ponownie trafia do Twojej witryny lub przechodzi do następnej strony witryny, w pamięci podręcznej jego przeglądarki będzie trochę akta A przeglądarka nie będzie musiała ich ponownie przesłać. Stąd i wygrywając prędkość ładowania witryny.
Dlatego wystawiaj nagłówek HTTP Expires wszędzie tam, gdzie jest to możliwe przez kilka dni lub nawet miesięcy. Aby serwer Web Apache zapewnić odpowiednie zalecenia dotyczące nagłówków HTTP, konieczne jest dodanie do pliku.htaccess, znajduje się w folderze głównym witryny, następujących wierszy:
Ten fragment konfiguracji serwera serwera Apache sprawdza moduł MOD_EXPIR, a jeśli moduł MOD_EXPIRS jest dostępny, zawiera zwrot liczby wygaśnięcia HTTP nagłówków, które ustawiają okres trwałości obiektów wymienionych powyżej w pamięci podręcznej przeglądarek i serwerów proxy równych roku od czas pierwszego rozruchu. Zainstalując takie życie pamięci podręcznej przeglądarki, może być trudne do aktualizacji plików. Dlatego, jeśli zmieniłeś zawartość pliku CSS lub JavaScript i chcesz, aby te zmiany były aktualizowane w pamięci podręcznej przeglądarki, musisz zmienić nazwę samego pliku. Zwykle nazwa pliku dodaje swoją wersję, na przykład w następujący sposób: Styles.v1.css
7. Użyj CDN, aby pobrać popularne biblioteki JavaScript
Jeśli Twoja witryna korzysta z popularnych ram JavaScript, takich jak jQuery, lepiej jest korzystać CDN, aby go podłączyć.
8. Zoptymalizuj swoje zdjęcia
Konieczne jest określenie odpowiedniego formatu zdjęć. Wybór nieprawidłowego formatu obrazu, może znacznie zwiększyć rozmiar pliku.
- GIF - Idealny do obrazów z kilkoma kolorami, takimi jak logo.
- JPEG - są świetne na szczegółowe obrazy duża ilość Kwiaty takie jak zdjęcia.
- PNG to Twój wybór, gdy potrzebujesz wysokiej jakości obrazu z przezroczystością.
Oto kilka. usługi online Aby zoptymalizować obrazy:
9. Nie skaluj obrazów
Nie zmieniaj rozmiaru obrazu za pomocą znacznika szerokości i atrybutów wysokości lub za pomocą CSS. Niniejszym negatywnie wpływa również na szybkość pobierania strony. Jeśli masz obraz o rozmiarze 500x500px i wstaw do witryny, którą chcesz obraz o rozmiarze 100x100px, lepiej jest zmienić rozmiar oryginalnego obrazu za pomocą edytora graficznego Photoshopa lub dowolnego innego. Mniejsza waga obrazu, tym mniej czasu konieczne jest do pobrania.
10. Użyj kompresji GZIP
Jak pokazano badania, kompresja GZIP plik tekstowy "W latach" w 95-98% przypadków zmniejsza czas na przesłanie pliku do przeglądarki. Jeśli przechowujesz zarchiwizowane kopie plików na serwerze (w pamięci serwera proxy lub po prostu na dysku), połączenie w ogóle można wydać 3-4 razy szybciej.
Począwszy od wersji protokołu HTTP / 1.1, klienci WWW wskazują, które typy kompresji obsługują, instalując nagłówek zaakceptowania w żądaniu HTTP.
Akceptuj kodowanie: Gzip, Deflatuj
Jeśli serwer internetowy widzi taki nagłówek w zapytaniu, może zastosować kompresję odpowiedzi przez jedną z metod wymienionych przez klienta. Podczas wydawania odpowiedzi przez nagłówek kodowania treści, serwer powiadamia klienta o tym, jak odpowiedź jest skompresowana.
Kodowanie treści: Gzip
Dane przesyłane w ten sposób są mniejsze niż 5 razy i znacząco przyspiesza ich dostawę. Jednak jest jedna wada: zwiększa się ładunek na serwerze WWW. Ale problem z serwerem może być zawsze rozwiązywany. Więc nie zwracamy na to uwagi.
Aby włączyć kompresję GZIP na swojej stronie, jest to konieczne w pliku.htaccess, aby zarejestrować następujące linie kodu:
Jeśli ta metoda pracował, a następnie doskonale, jeśli nie, możesz spróbować tego tutaj kodu:
Ale znowu, ten kod Nie działa na wszystkich serwerach, więc lepiej skontaktować się z obsługą dostawcy hostingu i wyjaśnić ten problem.
Właściwie, wszystko, co chciałem powiedzieć. W tym artykule starałem się wymienić wszystkie podstawowe sposoby optymalizacji klienta, aby zwiększyć prędkość rozruchową strony internetowej. Oprócz optymalizacji klienta znajduje się również optymalizacja serwera. Ale to ten temat dla oddzielnego artykułu.
Jeśli czegoś brakowało lub masz coś do dodania - napisz swoją opinię w komentarzach poniżej tego posta. Dziękuję za uwagę!
Powolna strona nikogo nie lubi - ani użytkowników, ani wyszukiwarek. Z obecną prędkością Internetu, ludzie nie są już gotowi czekać na pobieranie strony. To nie jest połączenie Dial-APA, gdzie czekanie było nieuniknione. I wyszukiwarki, walki o jakość wyników wyszukiwania, nie chcę wydawać złych użytkowników (w tym przypadku, powolne) witryny. Dlatego z innymi rzeczami są równe, powolne miejsce będzie w ekstradycji niższej niż bardziej wyłupane konkurentom.
Jaka prędkość ładowania jest uważana za normę
Tym szybciej, tym lepiej. Ale średnio, 2-3 sekundy, aby pobrać główną część zawartości strony jest dość normalna.
Z którego zależy prędkość pobierania
W witrynie pobierania biorą udział dwie strony - przeglądarka użytkownika i serwer, w którym znajdują się fizycznie pliki witryn. Wymiana danych występuje między tymi stronami.
Ładowanie witryny z banku może problemy z każdą ze stron i w przedziale między nimi.
- SLOW SERVER: nie może być zatkany losowy pamięć dostępu Lub jądro w procesorze, jak zwykły komputer.
- Slow Silnik (CMS): Jeśli kod został zapisany w niedoświadczonych programistrach bez uwzględnienia jego prędkości.
- Serwer jest daleki od użytkownika: Na przykład serwer z plikami witryn jest fizycznie w Moskwie, a użytkownik przychodzi do witryny z Vladivostok.
- Wiele plików: Aby wyświetlić stronę przeglądarki, musisz pobrać wiele zdjęć, plików, stylów, skryptów i czcionek.
- Heavy Pliki: Plus te pliki ważą dużo.
Wszystkie kroki w celu optymalizacji prędkości witryny mają na celu wyeliminowanie tych problemów.
Jak sprawdzić prędkość witryny
Z zestawu usług online do sprawdzenia prędkości witryny jest najpopularniejsza, może to narzędzie Google PagePeed. Pracuj z nim po prostu - Określ adres strony i kliknij przycisk "Analizuj".
W rezultacie zobaczymy takie wskaźniki (oddzielnie dla komputerów i mobilnych):
- Po tym czasie przeglądarka otrzymuje odpowiedź z serwera i zaczyna rysować treści stron (FCP - First Contentful Farba).
- Po tym czasie użytkownik widzi główną zawartość w przeglądarce (załadowana zawartość DCL).
- Jeśli chodzi o miejsce jest zoptymalizowane pod względem prędkości rozruchu.
- Konkretne zalecenia dotyczące optymalizacji. Klikając na linki "Jak naprawić", widzimy adresy problemowych zdjęć i plików, z którymi musisz coś zrobić (głównie kompresować).
Wskazane jest dostanie się do zielonej strefy - i w bloku prędkości witryny (prędkość strony) i w bloku "Optymalizacja".
Inne dobra obsługa Aby sprawdzić prędkość pobierania, jednak w języku angielskim - pingdom. Charakterystyczna funkcja - to piękna grafika (zwana wodospadem - wodospad) pokazują, które pliki, w jakiej kolejności i ile czasu jest załadowany:
I teraz do punktu:
Jak przyspieszyć witrynę
Krok 1. Optymalizacja obrazu
Nieoptymalizowane zdjęcia są najbardziej "ciężką" częścią witryny. Dlatego praca z obrazami może dać znaczny wzrost prędkości.
Co patrzymy na:
Rozmiar obrazu (szerokość i wysokość)
Jeśli zastrzeliłeś towary i otrzymałeś zdjęcia o szerokości około 5000 pikseli, można bezpiecznie zmniejszyć szerokość do 1600, w większości przypadków wystarczy. Wyjątkiem będą te strony (głównie sklepy internetowe), w których można rozważyć towary z "lupą", ale także nie ma natychmiast ładowania, ale tylko wtedy, gdy osoba postanowiła skorzystać z tego narzędzia.
Waga obrazu (kilobajty)
Obrazy z aparatu mogą (i potrzebują) kompresji w ilości przed wyświetlaniem witryny. Zrób to w Photoshopie (lub innym edytorze obrazu) lub przez usługi online, takie jak TinyPng lub Optimizilla.
Podgląd na duże zdjęcia
Jeśli masz zdjęcia towarów (lub wykonanych pracy) i istnieje stronę z ich listą, rozsądnie powoduje, że małe podglądy (zmniejszone zdjęcia). Następnie lista produktów, działa lub zdjęcia zostaną załadowane szybciej.
Na przykład Sportmaster korzysta z zdjęć towarów w trzech wersjach:
Obraz do listy towarów (waży 7 KB)
Obraz dla karty produktu (waży 18 KB)
Obraz, aby zobaczyć towary z lupą (waży 942 KB)
Wyobraź sobie, jak długo lista towarów zostanie załadowana, jeśli Sportmaster użył tylko zdjęć źródłowych (te, które są 900 z nadmiarem kilobajtu).
Podczas sprawdzania prędkości witryny przez Google Pagespeed otrzymasz gotową listę na zdjęcia, które powinny być zoptymalizowane:
Krok 2. Kompresja GZIP
GZIP jest programem do kompresji plików na serwerze (analogowy archiwum ZIP na komputerze). Z włączeniem serwera GZIP, zanim wyślesz kod strony do przeglądarki (jak również skrypty, style i inne informacje o tekście) Najpierw archiwa te pliki. Przeglądarka otrzyma archiwum i rozpakuj go na komputerze użytkownika. Kompresowane informacje będą przesyłane szybciej między przeglądarką a serwerem.
Jak włączyć kompresję GZIP:
Jeśli masz dostęp do pliku HTCcess, dodaj takie linie do niego (na końcu pliku):
Addoutputfilterbytype deflacja tekstu / html tekst / zwykły tekst / aplikacja CSS / JSON
AddoutTfilterbyType Deflacja aplikacji / JavaScript Aplikacja / Aplikacja JavaScript / X-JavaScript
AddoutTfilterbyType Deflacja tekstu / XML Aplikacja / XML Tekst / X-Component
AddoutTfilterbyType Defluate Aplikacja / X-Font-TTF Aplikacja / X-Font-OpenType Image / SVG + XML
Jeśli nie masz Apache, ale Nginx (kto wie, zrozumie), będziesz potrzebował pliku konfiguracyjnego Nginx.conf. Dodaj kod do sekcji HTTP (...) i uruchom ponownie serwer:
gzip dalej;
gzip_static na;
gzip_comp_level 5;
gzip_min_length 1024;
gzip_proxied dowolny;
gZIP_TYPES Tekst / zwykły tekst / CSS Aplikacja / JSON Aplikacja / X-JavaScript Text / XML Aplikacja / Aplikacja XML / XML + RSS Tekst / Aplikacja JavaScript / JavaScript;
Jeśli nie masz dostępu do konfiguracji HtaCcess lub Server, napisz do hostingu wsparcia technicznego, które musisz włączyć kompresję GZIP.
Jeśli sprężanie działa, a następnie w wynikach sprawdzania pktPeed zobaczysz (w "wliczonych technik optymalizacji"):
Krok 3. buforowanie z boku przeglądarki
Gdy przeglądarka ładuje witrynę, oszczędza niektóre informacje z niego (pliki stylów, skryptów, zdjęć) we własnej pamięci (pamięć podręczna, pamięć podręczna). Następnie na innych stronach tej witryny lub podczas ponownego wprowadzenia bieżącej strony, przeglądarka nie zażąda tych informacji ponownie z serwera (przez długi czas) i ładuje go pamięć własna (który jest szybszy). Dlatego w ustawieniach przeglądarki znajdują się "Clear Cache" przyciski, a wszyscy znamy kombinację klawiszy Ctrl + F5 (odśwież stronę czyszczenia pamięci podręcznej).
Aby użyć pamięci podręcznej przeglądarki, musisz go określić, jakie typy plików z witryny, aby zapisać w pamięci podręcznej. Jak to zrobić:
Poprzez plik HTCCESS (buforowanie plików statycznych przez 10 dni):
WYŁniewiec na.
WygasićDefault "Dostęp plus 10 dni"
ExpiresbyBytype Image / GIF "Dostęp plus 10 dni"
ExpiresbyBytype Image / JPG "Dostęp plus 10 dni"
ExpiresbyBytype Image / JPEG "Dostęp plus 10 dni"
ExpiresbyBytype Image / PNG "Dostęp plus 10 dni"
ExpiresbyBytype Image / SVG + XML "Dostęp plus 10 dni"
ExpiresBytype Tekst / CSS "Dostęp plus 10 dni"
Dla Nginx, dodaj do konfiguracji:
serwer (
...
Lokalizacja ~ *. (JPG | JPEG | GIF | PNG | ICO | CSS | JS | TXT) $ (
root /var/www/user/data/www/site.ru;
Wygasa 10d;
}
...
}
Jeśli nie ma ustawień serwera dostępu, ponownie piszemy do pomocy technicznej i poproś o dostosowanie buforowania plików statycznych.
Podobny do listy zdjęć, Google Pagespeed daje listę zasobów, dla których buforowanie nie jest skonfigurowane i byłoby możliwe:
Należy pamiętać, że możesz skonfigurować buforowanie tylko dla swoich zasobów. Zmień ustawienia pamięci podręcznej, na przykład dla skryptów Yandex.Metrycznych nie będą działać.
Krok 4. Minimalizowanie plików CSS-i JS
Minimalizacja jest niedoborem pliku, usuwając spacje, puste struny, komentarze, użyj krótszych nazw zmiennych itp. Przeglądarka jest nadal z jakim plikiem do pracy - zwykła lub zminimalizowana, i waży taki plik mniej.
Przykład zwykłego kodu:
Prędkościomierz-owijarka (
pozycja: krewna;
}
.Jereometrometer-opakowanie. List (
margin-Top: 80px;
margines lewy: -20px;
padding-Dolna: 85px;
}
Po minimalizacji:
Wrapper prędkościomierza (pozycja: krewna). Poszukiwacz w opakowaniu. List (margines-top: 80px; margines lewy: -20px; Padding-Bottom: 85px)
Popularne wtyczki i biblioteki (jQuery, bootstrap itp.) Zawsze mają zminimalizowane wersje ich skryptów i stylów - podłącz je do witryny. Na przykład zwykła wersja scenariusza jQuery waży 265 KB, a jej wersja sprężona wynosi 85 KB. Czy czujesz różnicę?
Jedyna minus ministerstwo - czytelność pliku zostanie utracona. Jeśli chcesz wprowadzić zmiany skompresowany plik - Trudno to zrobić, osoba pracująca z takim plikiem jest niewygodna (jest jeden stały ciąg). Dlatego dodatkowe wtyczki do CMS są zwykle używane do Ministerii swoich skryptów - automatycznie kompresują pliki CSS i JS przed pobraniem na stronie. A prohibicja może bezpiecznie pracować z regularnymi wersjami plików.
Paptspeed i tutaj uważnie pokazują nam listę plików, których rozmiar można zmniejszyć, minimalizując:
Krok 5. Zamówienie pobierania plików CSS i JS
Przeglądarki mają własne algorytmy na najbardziej szybkie ładowanie strony (nikt nie chce odtwarzać przeglądarki "hamulec"). Dlatego, po otrzymaniu kodu strony, przeglądarka próbuje obliczyć, który z plików wtyczek musisz najpierw rozpocząć przesyłanie. Czasami zdarza się, że przeglądarka osiągnęła już rysunek jakiegoś formularza na stronie, a plik ze stylami nie został jeszcze załadowany - a następnie zatrzyma się.
Aby przeglądarka pobrała pliki witryn w optymalny sposób, wszystkie style (CSS) i czcionki są skonfigurowane na początku kodu strony (w znaczniku
), a wszystkie pliki skryptu (JS) - na końcu strony przed tagiem zamykającym.
...
rel \u003d "arkusz stylów" href \u003d " //fonts.googleapis.com/csss?family\u003dRoboto: 00,400,500 & podzbiór \u003d łacińsko.cyrillic"Type \u003d" Tekst / CSS "\u003e
rel \u003d "Arkusz stylów" href \u003d "/ inc / min / styles.min.css" Type \u003d "Tekst / CSS"\u003e
rel \u003d "arkusz stylów" href \u003d "/ css / main.css" Type \u003d "Tekst / CSS"\u003e
...
...
Następnie przeglądarka załaduje style niezbędne do rysowania i zacznie wyświetlanie strony do użytkownika, w równoległym pobieraniu niezbędnych skryptów (które następnie zapewnią interaktywne - suwaki, zakładki itp.).
Krok 6. Dodatkowe wtyczki lub liczniki
Czasami w kodzie strony znajdują się linki do wtyczek lub modułów, które nie są już używane na stronie. Na przykład, na początku proxigator podłączony jedną wtyczkę do suwaków, a następnie zastąpił ją nową, ale nie usunął starego. Lub pozostań kody z liczników, statystyk, dla których nie szukasz już. Pamiętaj, aby usunąć takie "śmieci" z kodu.
Spróbuj zoptymalizować korzystanie z dodatkowych skryptów. Na przykład, jeśli masz suwaki na trzech stronach witryny, a następnie na wszystkich stronach, użyj tej samej wtyczki dla suwaka - nie musisz podłączać pewnego konkretnego skryptu za każdym razem.
Krok 7. Korzystanie CDN
CDN (sieć dostarczania treści, sieć dostarczania treści) jest siecią z różnych serwerów rozproszonych geograficznie według kraju lub na całym świecie. Każdy z serwerów duplikuje zawartość z głównego serwera (treść jest powielana przez pierwsze żądanie użytkownika i jest przechowywane przez jakiś czas).
Gdy użytkownik, na przykład z Chabarowska, chce załadować coś z CDN, a następnie otrzymuje treści nie z głównego serwera (który może być, na przykład w Moskwie), ale z serwera najbliżej użytkownika (który może być w tym samym khabarowsk). Kraj jest moim rodzimym, więc zapytanie Khabarovsk-Khabarowsk przejdzie szybciej niż prośba Khabarowsk-Moskwy. Pozwól milisekundy, ale w mnożenia do liczby plików i ich rozmiaru może dać dobry wzrost prędkości.
Z reguły CDN jest używany w dwóch przypadkach:
- Ładowanie skryptów osób trzecich. Są to te same jQuery, bootstrap, czcionki internetowe czcionki. Na przykład, możesz określić przeglądarkę, aby pobrać je nie z serwera, ale z serwerów rubli, bootstrap lub innych CDN.
- Ładowanie zdjęć i skryptów z CDN. Duże strony (ozon, avito itp.) Skonfiguruj swój własny CDN za pomocą własnych serwerów lub (częściej) sieci CDN, takich jak Google Cloud lub StackPath. Niektóre CMS obejmowały już wsparcie CDN w swojej funkcjonalności. Na przykład, bitrix ma bezpłatny moduł "przyspieszenie witryny (CDN)".
Krok 8. Zmniejszenie liczby żądań HTTP
Aby przeglądarka zrobi mniej połączeń do serwera (a to jest żądanie HTTP), musisz zmniejszyć liczbę potrzebnych plików. Na przykład, jeśli masz trzy oddzielne skrypty (dla suwaka, dla modalne okna A do wskazówek wyskakujących) można połączyć je w jeden plik, a następnie minimalizować (patrz krok 4).
Ponieważ nie jest całkowicie wygodne, aby połączyć pliki ręcznie (jeśli chcesz zastąpić jedno ze skryptów w przyszłości), zazwyczaj dostosowujesz ich automatyczne fuzję. Większość CMS ma do tego własne wtyczki (na przykład autoptimize dla WordPress).
Zmieszany buforowanie dla przeglądarki (Krok 3) i usuwanie niepotrzebnych skryptów (Krok 6) również zmniejszają liczbę żądań HTTP.
Krok 9. Optymalizacja czcionek
Spróbuj użyć jednej czcionki na całej witrynie. Spowoduje to nie tylko dodanie witryny estetyki, ale także zmniejszyć ilość pobranych plików do wyświetlania czcionek.
Zmniejszono również liczbę plików można odmówić użycia przestarzałych formatów. Wcześniej każda czcionka została załadowana w formacie EOT, TTF, WOFF, SVG, aby uzyskać prawidłowy wyświetlacz w przeglądarkach. Teraz nowoczesne przeglądarki mogą być ograniczone tylko do dwóch formatów - WOFF i WOFF2.
Ponadto popularne czcionki można pobrać z Google Fonts. Najpierw usunie obciążenie z serwera. Po drugie, pliki z czcionkami będą już zoptymalizowane, przesuwa się z ramion w Google (co, widzisz, ładnie).
Krok 10. Redukcja kodu HTML
Oprócz plików w stylu kompresji i skryptów (Krok 4) można skonfigurować minimalizację i kod HTML samej strony. Myślę, że jest istotne dla długich stron - artykułów w blogach, dużych listach towarów itp. Aby skonfigurować, warto szukać odpowiedniej wtyczki dla jego CMS (na przykład Minifier HTML dla Joomla).
Krok 11. Optymalizacja serwera
Jeśli masz serwer dedykowany (twój administrator systemu Może zarządzać jego ustawieniami), możesz spróbować sprostać jego parametry. Na przykład dodaj pamięć RAM lub wymień procesor. Również sysadmin może przeprowadzać "czyszczenie" na samym serwerze - Usuń niewykorzystane i zaktualizuj bieżące moduły.
W przypadku hostingu wirtualnego (bez dostępu do ustawień serwera) możesz spojrzeć w kierunku przejścia do droższych taryf, jeśli są lepsze specyfikacje Serwer.
Krok 12. Optymalizacja skryptów i baz danych
Jednym z etapów pobierania witryny jest generowanie ostatniego serwera kodu HTML, który poda przeglądarkę. Ten kod jest generowany przez silnik witryny (CMS). Jeśli silnik jest napisany into napisany silnik, to może być "zbierać" strona, aby uzyskać niepotrzebne żądania do plików i baz danych za pomocą algorytmów programistycznych "SLOW" itp.
Dlatego przy wyborze CMS dla witryny zaleca się spojrzenie w kierunku popularnych silników (bitrix, otwarty koszyk, WordPress, Modx itp.), Które udowodniło ich szybkość i niezawodność. A ponieważ systemy te są stale sfinalizowane (w tym pod względem prędkości), CMS powinien być regularnie aktualizowany na swojej stronie internetowej.
No Slopokama.
Zadbaj o szybkie pobranie swojej witryny. Pamiętaj, że istnieje wiele konkurentów w wynikach wyszukiwania, a tym szybsza Twoja witryna uruchomi się, tym mniejsze inne witryny, które osoba będzie musiała otworzyć w sąsiednich zakładkach.
Jeśli potrzebujesz pomocy optymalizacji prędkości pobierania witryny - pisz, zobaczmy swoją stronę i powiedzmy, czy można go przyspieszyć.
Czas ładowania witryny jest jednym z najważniejszych wskaźników wpływających na zachowanie użytkowników witryn. Zajmijmy się.
Zmniejszenie prędkości pobierania strony przez 1 sekundę:
- zmniejszenie liczby poglądów o 11%;
- zmniejszenie stawki satysfakcji użytkownika o 16%;
- zmniejszenie konwersji do 6%.
Poniżej znajduje się wykres odzwierciedlający wzrost zainteresowania zamknięte strony. Ze względu na wzrost czasu ładowania witryny.
Kilka dodatkowych sekund czasu ładowania witryny zmniejsza szanse na zainteresowanie odwiedzających i sprzedawać.
Kissmetics przeprowadził badanie o tym, w jaki sposób szybkość pobierania witryny wpływa na zachowanie użytkowników i kupujących:
- 47% użytkowników oczekuje, że strona otwiera się w mniej niż 2 sekundy;
- 40% użytkowników zamyka miejsce, jeśli jest ładowany dłużej niż 3 sekundy;
- 79% kupujących, którzy pozostał niezadowolony z wygody witryny, najprawdopodobniej nie kupi go w przyszłości;
- 44% kupujących internetowych będzie informować swoje znane witryny, które ich nie zadowoliły.
Przyspieszone pobieranie witryny jest szczególnie ważne dla użytkowników przychodzących do witryny z urządzeń mobilnych. A od teraz udział ruch mobilny Ciągle rośnie, a następnie przyspieszenie telefonu komórkowego, musisz dokonać specjalnego akcentu.
Cierpliwość mobilnych użytkowników Internetu
Zwiększ prędkość ładowania witryny jako sposób na zwiększenie konwersji
Czas pobierania witryny wpływa na konwersję. Rozważmy na przykładzie sieci Walmart.
Wskaźnik konwersji zależność od czasu ładowania strony
Tutaj widzimy, że im wyższa prędkość obciążenia strony, tym większa współczynnik konwersji.
Zgodnie z wynikami Walmart ujawnił, że spadek czasu ładowania czasu na sekundę pomaga zwiększyć konwersję do 2%.
Wpływ optymalizacji pobierania witryny na ruchu organicznym
W 2010 r. Google powiedział, że uwzględniłoby szybkość pobierania witryn, gdy ranking wyników wyszukiwania.
Powodem, dla którego potrzebują wyszukiwarki, jest dość oczywiste. Jeśli wyszukiwarka zaoferuje Ci "wolne" witryny, najprawdopodobniej będziesz mniej prawdopodobne, że go użyje.
Dlatego ważne jest, aby zmniejszyć czas pobierania witryny, aby Twoja witryna była w emisji wyższych konkurentów.
Podsumowując powyższe, stwierdzamy, że przyspieszenie strony prowadzi do:
- wzrost konwersji;
- zmniejsz częstotliwość awaryjnej (wskaźnik procentowy odwiedzających, który opuścił witrynę bezpośrednio z linii logowania lub oglądać nie więcej niż jedną stronę witryny);
- podnoszenie w wyszukiwarkach.
20 sposobów na przyspieszenie ładowania witryny
1. Zmniejsz liczbę żądań HTTP
Według badań Yahoo, przez większość czasu przy ładowaniu strony jest wydawane na pobieranie obrazów, plików w stylu i skryptach.
Aby pobrać każdy taki plik, tworzony jest oddzielne zapytanie HTTP. Im więcej takich żądań, tym dłuższy czas przechodzi, aż strona zostanie w pełni pobrana.
Sprawdź, ile wygenerowanych jest żądań HTTP, możliwe jest użycie panelu programisty przeglądarki.
Rozważ proces na przykładzie browser Google. Chrom.
Pierwszym krokiem idziemy na analizowaną stronę, kliknij prawym przyciskiem myszy dowolną pustą stronę i wybierz menu kontekstowe Element "Wyświetl kod". Panel Chrome DevTools otwiera się na dole ekranu. Przejdź do karty Sieć i uruchom ponownie stronę. Widzimy listę wszystkich żądań, statusów ich odpowiedzi i czas pobierania plików.
2. Połączenie i minifice plików CSS i JS
Teraz, kiedy wiemy, ile żądań jest generowanych, możemy przejść do ich ograniczenia.
Najprostszym sposobem na zmniejszenie liczby żądań jest scalanie i minify (kompresuj) HTML, CSS i pliki JavaScript. Bardziej poprawne jest umieszczenie tego zadania do programistów. Jeśli nie ma takiej możliwości, możesz spróbować zrobić to sam.
Otwórz dowolny edytor tekstuWstawianie zawartości wszystkich plików CSS używanych w kolejności, w której są one połączone w szablonie. Następnie przy użyciu dowolnej usługi minifikacyjnej (na przykład CSSminifier), kompresuj kod.
W rezultacie zmniejszamy liczbę zapytań, a symbole (luki, zakładki, przeszczep ciągu, itd.) Są usuwane z końcowego kodu.
3. Wdrożyć asynchroniczne obciążenie CSS i JS
Wszyscy jesteśmy przyzwyczajeni do przesyłania pliku CSS do HTML, wkładając tag
Jednak nie wszystkie elementy kodu są tak ważne, że należy je natychmiast pobrać. Na przykład na stronie znajduje się rzadko stosowany element porównania towarów. Ma sens, aby ładować style i kod JS bezpośrednio w tej chwili, gdy użytkownicy chcą skorzystać z takiej funkcjonalności.
Aby wdrożyć asynchroniczne obciążenie CSS i JS, często jest w stanie tylko z profesjonalnymi programistami. Należymy pamiętać, że musisz oglądać w kierunku przy użyciu wartości wstępnej atrybutu Rel wraz z atrybutem ONLOAD lub załaduj style skryptu JS.
4. Skonfiguruj odroczony kod JavaScript
Aby zrozumieć, że takie odroczone pobieranie kodu JavaScript na starcie, analizujemy, jak zwykle jest. W trybie standardowym Javaspit Pliki przerywają parsowanie dokumentów HTML, aż wszystkie takie pliki zostaną odebrane i wykonane.
Często musimy wstawić szczególnie znaczący widżet portale społecznościowe W piwnicy witryny. Nie ma znaczenia dla nas, czy pojawi się na stronie natychmiast lub kilka sekund.
Aby wdrożyć odroczony obciążenie lub raczej przetwarzanie, taki skrypt, wszyscy musimy zarejestrować tag odwrócenia atrybutu