Optymalizacja PageSpeed ​​dla lepszych rankingów

1. Pierwszy krok: Rozpoznaj, gdzie możliwa jest optymalizacja szybkości strony Aby sprawdzić status...
2. Inne narzędzia do optymalizacji czasu ładowania
3. Chcesz teraz zwiększyć wydajność strony?
4. 1. Optymalizacja szybkości stron poprzez buforowanie serwera
5. 2. Optymalizacja szybkości stron poprzez buforowanie przeglądarki
6. Buforowanie przeglądarki przez mod_headers
7. Buforowanie przeglądarki przez mod_expires
8. Buforowanie przeglądarki i zmiany w witrynie
9. 3. Optymalizacja szybkości stron dzięki minimalizacji żądań HTTP
10. 4. Unikaj niepotrzebnych przekierowań
12. 6. Kompresuj CSS i JavaScript
13. 7. Użyj kompresji gzip
14. 8. Optymalizacja prędkości stron dzięki ładowaniu asynchronicznemu
15. Asynchroniczne ładowanie JavaScript
16. 9. Użyj subdomen, aby uzyskać więcej żądań HTTP
17. 10. Zoptymalizuj szybkość swojej strony, korzystając z sieci dostarczania treści (CDN)
18. 11. Popraw czas reakcji serwera
19. 12. Unikaj złych żądań
20. 13. Używaj CSS3 zamiast grafiki dla przycisków, ikon i tła
21. 14. Użyj obrazów o prawidłowych wymiarach
22. 15. Użyj właściwego formatu pliku dla zdjęć
23. 16. Zmniejsz informacje o zdjęciu na zdjęciach
24. 17. Usuń dane EXIF ​​i metatagi
25. 18. Najpierw pomyśl o swoich użytkownikach telefonów komórkowych
26. Podnieś następny poziom

Pierwszy krok: Rozpoznaj, gdzie możliwa jest optymalizacja szybkości strony

Aby sprawdzić status quo, Google udostępnia Ci potężne narzędzie: PageSpeed ​​Insights ,

Google zapewnia możliwości optymalizacji w tym narzędziu, które pomogą Ci znacząco zwiększyć szybkość Twojej witryny.

Szczególnie dobrze: Google już pokazuje różne propozycje optymalizacji dla urządzeń przenośnych i komputerów - jeśli już zoptymalizowałeś witrynę dla użytkowników mobilnych, otrzymasz jeszcze więcej przydatnych wskazówek na temat komputera.

Wyniki PageSpeed ​​Insights można znaleźć za pośrednictwem witryna internetowa lub przez Dodatek przeglądarki (Firefox / Chrome) używać za darmo.

Co naprawdę oznacza PageSpeed?

Chociaż w tym artykule bardzo koncentrujemy się na temacie szybkości stron w klasycznym znaczeniu, chcielibyśmy dać wam tutaj nieco szerszy dostęp do tematu.

Jak naprawdę mierzyć szybkość strony - wskaźniki wydajności zorientowane na użytkownika

Szybkość ładowania strony jest ważna, to wykluczone. Ale jak właściwie odpowiadasz na pytanie dotyczące szybkości aplikacji lub strony? Czy moja strona ładuje się szybko, czy nie? Co w ogóle oznacza „szybki”? Pokażemy Ci wskaźniki, które skupiają uwagę użytkownika, ponieważ ostatecznie chodzi o to, kiedy znajdzie aplikację lub stronę internetową, która będzie szybka.

Na Blog Google Developers pokazuje Philipa Waltona Powszechne powiedzenie „Moja aplikacja ładuje się w X.XX sekundach” prawie nie odzwierciedla rzeczywistości. Czas ładowania zależy z jednej strony od bardzo indywidualnych czynników, takich jak urządzenie lub połączenie z Internetem. Z drugiej strony czas ładowania nie opisuje pojedynczej chwili, ale powinien być uważany za znacznie bardziej zróżnicowany. Poniższe pytania ilustrują, które poziomy są rejestrowane przez użytkownika podczas ładowania strony / aplikacji:

• Czy coś się dzieje? Czy nawigacja zaczyna się pomyślnie? Czy serwer odpowiada?
• Czy to już jest użyteczne? Czy uruchomiono wystarczającą ilość treści, która może zaangażować użytkowników?
• Czy pokazany jest użyteczny? Czy użytkownicy mogą już wchodzić w interakcję ze stroną (linkami, polami tekstowymi itp.) Lub czy nadal trzeba ją ładować?
• Czy to przyjemne? Czy interakcje przebiegają płynnie i bez opóźnień?

Philip Walton sugeruje kilka wskaźników:

Pierwsza farba (FP)

Czytanie „Pierwsza farba” odpowiada na pytanie użytkownika „Czy coś się stało?”. Chodzi o pierwszą chwilę, w której pierwsze piksele pojawiają się na ekranie, a więc po raz pierwszy pojawia się dowolny kolor. Więc coś się dzieje.

Pierwsza zadowalająca farba (FCP)

Dzięki tej zmierzonej wartości jest już krokiem bardziej konkretnym: nie chodzi już tylko o dowolny kolor, który pojawia się na ekranie, ale o pierwszą treść, czyli pierwszy tekst lub pierwszy obraz. Jak długo trwa wyświetlanie pierwszej treści tekstowej / obrazkowej?

Pierwsza znacząca farba (FMP) i czas elementów bohatera

Oto pytanie „Czy to jest użyteczne?”. Czy treść jest już użyteczna? Każda strona zawiera różne przydatne / ważne treści. Najważniejsze treści strony nazywane są również „Treścią bohatera”. Na przykład na stronie pogody byłby to aktualny raport pogodowy dla określonej lokalizacji. Jeśli zawartość tego bohatera ładuje się szczególnie szybko, użytkownik prawie nie zauważy, że coraz mniej ważna treść jest dodawana stopniowo.

Długie zadania

Jeśli przeglądarka odpowiada na żądanie użytkownika, robi to przez przetwarzanie kolejnych zadań jeden po drugim. Wykonanie niektórych z tych zadań trwa dłużej. Kolejne zadania muszą następnie czekać na to, co użytkownik postrzega jako opóźnienie.

Czas na interakcję (TTI)

Metryka „Czas na interakcję” odnosi się teraz do czasu, który strona jest nie tylko wizualnie widoczna, ale także gotowa do interakcji z użytkownikiem.

Aby jeszcze lepiej zrozumieć wyświetlane wartości, poniższa klasyfikacja Philipa Waltona pomaga:

• Czy coś się dzieje? First Paint (FP) / First Contentful Paint (FCP)
• Czy to już jest użyteczne? Pierwsza znacząca farba (FMP) / Czas elementu bohatera
• Czy pokazany jest użyteczny? Czas na interakcję (TTI)
• Czy to przyjemne? Brak długich zadań

źródło: Google Developers

Jak dokładnie możesz zmierzyć wymienione wartości na urządzeniach użytkowników, wyjaśnia post na blogu Google szczegół.

Aby uzyskać więcej wskazówek dotyczących optymalizacji strony, odwiedź naszą 121WATT blogu.

Inne narzędzia do optymalizacji czasu ładowania

Zanim przejdę do konkretnych wskazówek dotyczących optymalizacji strony, chciałbym podzielić się jeszcze kilkoma Narzędzia marketingu online nazwa, której używamy w naszej codziennej pracy:

Chcesz teraz zwiększyć wydajność strony?

Najpierw uwaga dla wszystkich deweloperów : Optymalizacja stron nie jest projektem - to proces. Każde nowe rozszerzenie, każdy nowy skrypt i każda zmiana na serwerze wymaga ponownego sprawdzenia wydajności strony. Bardzo ważne jest, aby wcześniej sprawdzić na serwerze testowym, jaki wpływ te zmiany będą miały później na stronie internetowej na żywo.

Jeśli jesteś sprzedawcą , pamiętaj, że wszelkie pragnienia związane z deweloperem mogą mieć wpływ na szybkość witryn. Nawet jeśli Mark Zuckerberg osobiście pisze kod do twojego projektu.

1. Optymalizacja szybkości stron poprzez buforowanie serwera

Dzięki buforowaniu możesz zapisać swój serwer WWW i bazę danych, ponieważ serwer musi zażądać i obliczyć mniej danych z bazy danych.

Tej metody można użyć do zapisania zasobów, ponieważ wynik wywołań po pierwszym żądaniu pozostaje w pamięci serwera.

Gdy wywoływana jest strona, która znajduje się już w pamięci podręcznej serwera, przeglądarka uzyskuje dostęp do pamięci podręcznej serwera, pomijając złożone i żądne zasobów zapytanie strony w tle.

Pamięć podręczna serwera nie powinna być mylona z pamięcią podręczną przeglądarki. Buforowane dane nie są przechowywane na urządzeniu, na którym znajduje się przeglądarka, jak w przypadku buforowania przeglądarki, ale, jak stwierdzono, na serwerze.

Uwaga : Jeśli dane na Twojej stronie zostaną zmienione, pamięć podręczna serwera musi również zostać usunięta i odbudowana. Nie przechowuj również swoich formularzy kasowych, co może być bardzo trudne w procesie konwersji.

Jeśli używasz WordPress, możesz to zrobić Wtyczka WP Rocket Służy do łatwego i szybkiego konfigurowania buforowania.

2. Optymalizacja szybkości stron poprzez buforowanie przeglądarki

Ta metoda buforowania ma pozytywny wpływ na czas ładowania witryny, gdy użytkownicy wracają.

W pamięci podręcznej przeglądarki elementy strony internetowej, które nie zmieniają zazwyczaj obrazów, JavaScript i CSS, są przechowywane w pamięci przeglądarki na urządzeniu odwiedzającym. Podczas ponownego odwiedzania witryny nie będziesz musiał ponownie ładować. Czas oczekiwania jest znacznie krótszy.

Możesz włączyć buforowanie przeglądarki, używając rozszerzenia dla swojego systemu CMS lub ręcznie, używając .htaccess Aktywuj plik.

Jeśli używasz WordPress, te wtyczki pomogą Ci:

Ręczne konfigurowanie buforowania przeglądarki jest nieco bardziej skomplikowane.

Po pierwsze, musisz się upewnić, że mod_headers lub mod_expires wykonują swoją pracę na serwerze, więc są włączone.

Buforowanie przeglądarki przez mod_headers

W przypadku mod_headers poprawny wpis w .htaccess wygląda tak:

W nawiasach ustawia się tutaj typy plików, które mają być buforowane.

Wiek = 2592000 ustala czas buforowania w sekundach. W tym przypadku 30 dni.

Buforowanie przeglądarki przez mod_expires

W tym wariancie dodajesz ten kod do pliku .htaccess:

Jak widać z kodu, możliwe jest określenie czasu trwania buforowania dla każdego typu pliku. Możesz więc pracować z takimi wartościami, jak:

• 1 miesiąc
• 2 tygodnie
• 3600 sekund

Buforowanie przeglądarki i zmiany w witrynie

Ale co, jeśli zmienisz coś na swojej stronie, ale będzie ona przechowywana w przeglądarce przez kilka tygodni?

Możesz to zrobić MD5 hash obejść problem. Wszystkie pliki należące do typu buforowanego zostaną dodane z unikalnym ciągiem. Jeśli taki plik się zmieni, zostanie dodany nowy skrót. W rezultacie ten plik jest rozpoznawany jako nowy i ponownie żądany przez serwer.

3. Optymalizacja szybkości stron dzięki minimalizacji żądań HTTP

Gdy jeden z odwiedzających Twoją stronę odwiedza jedną ze stron internetowych, wysyła się żądanie do serwera. W odpowiedzi serwer udostępnia kod HTML strony internetowej. To znowu odnosi się do pojedynczych plików. Arkusz stylów (CSS), JavaScript (JS), obrazy - wszystkie są wywoływane za pomocą protokołu HTTP (Hypertext Transfer Protocol).

Przeglądarki mogą wykonywać od 2 do 8 żądań jednocześnie i dla każdej domeny. Więc istnieje górny limit. Jeśli zostanie przekroczona, pozostałe połączenia muszą poczekać, aż pozostałe zostaną zakończone. Im dłużej trwa, tym dłużej trwa wyświetlanie całej strony internetowej.

Zadanie : Zapisz żądania serwera na domenę. Nie podawaj więc swojego HTML kilku małych plików CSS, ale podsumuj to, co należy podsumować. Dotyczy to również plików JavaScript.

Jednak podsumowanie również ma wady. Jeśli podsumujesz CSS, potrzebujesz dokładnego planu. Jeśli wystarczy załadować pojedynczy plik CSS, wiele plików może wymagać scalenia w jeden. Oznacza to również, że załadujesz CSS strony FAQ również na stronie zespołu. W końcu możesz mieć tylko jeden plik, ale jeden z dużą ilością zbędnych informacji.

Oczywiście istnieją tutaj koncepcyjne obejścia. Można więc tworzyć pliki CSS reprezentujące typy stron, które są dość podobne, a tym samym unikać nadmiarowości.

Jednak temat „górny limit żądania” jest wkrótce przestarzały , ponieważ HTTP / 2 znajduje się w blokach początkowych. Eliminuje to konieczność łączenia plików CSS i JavaScript, ponieważ górny limit zapytań nie jest już tutaj istotny. W rezultacie opisane powyżej podejście optymalizacyjne jest odwrócone. Teraz twój serwer powinien co najwyżej zapewniać pliki o większych rozmiarach, ponieważ oczywiście zawierają one znacznie mniej zbędnych informacji. Więc tylko CSS, który jest naprawdę używany na tej stronie.

Ale twój serwer i przeglądarka odwiedzającego Twoją stronę muszą zrozumieć HTTP / 2. Nowoczesne przeglądarki mogą to zrobić w najnowszych wersjach. Po stronie serwera jest obecnie możliwe w Niemczech, ale tylko kilku hosterów. Jest tak również dlatego, że ostateczna specyfikacja HTTP / 2 nie jest dostępna do tej pory. W wielu miejscach nadal oznacza: poczekaj i zobacz .

Na szczęście Google już rozumie HTTP / 2. A dla starszych przeglądarek HTTP / 2 jest całkowicie kompatybilny wstecz.

4. Unikaj niepotrzebnych przekierowań

Mówimy o oszczędności czasu w zakresie milisekund i nanosekund. Ale po pierwsze, chcemy być tak szybko, jak to możliwe, a po drugie, wiele połączonych przekierowań może dodać do całkiem niezłego grosza, który łamie nasze odwiedzającym naszą stronę.

Oto przykład:

Blog 121WATT upadł na początku 121watt.de/blog , a potem wstałem blog.121watt.de przeniósł się do ponownego otwarcia po kilku latach 121watt.de/blog biegać. W pewnym momencie wprowadziliśmy https, który rozszerzył nasze adresy URL w dzienniku o literę „s”.

Mamy już trzy przekierowania do starego, ale wciąż istniejącego posta na blogu, które zajmują czas serwera.

Antidotum nazywa się „dokumentacją”. Kompletna, sumienna i łatwa do zrozumienia dokumentacja. Ogólnie rzecz biorąc, dobrym pomysłem podczas uruchamiania strony internetowej staje się niezbędna optymalizacja strony na potrzeby przekierowań.

A jak wyeliminować taki hamulec linkowy? W końcu to nie jest trudne. Technicznie możesz ominąć przekierowane połączenie, wykonując skrót. Od oryginalnego linku do bieżącego łącza. Aby jednak zachować nasze linki zwrotne z dowolnego poprzedniego adresu URL, każdy z tych adresów URL powinien wskazywać bezpośrednio na bieżący link.

5. Pobierz zawartość za pośrednictwem AJAX

Gdy wywoływana jest długa strona internetowa, ładowanych jest wiele danych. Żądanie dostarczenia strony jest wysyłane na serwer, a serwer dobrze reaguje na całą stronę, więc wszystkie dane, które tworzą.

To może być mnóstwo kodu, który wraca. Na przykład w nasze strony seminaryjne ,

Teraz są ludzie, którzy nie patrzą na twoją stronę do samego końca. Może dlatego, że znaleźli informacje, których szukali na początku, ponieważ podjęli decyzję o wcześniejszym zakupie lub nawet dlatego, że nie znaleźli tego, czego szukali.

Jeśli chodzi o optymalizację szybkości strony, możesz teraz ładować tylko zawartość, która będzie wyświetlana przez AJAX w zależności od pozycji przewijania.

Najbardziej znanym przykładem i pionierem w tej dziedzinie był Pinterest , Tutaj prawie niemożliwe było załadowanie wszystkich postów na dany temat naraz. Następujące punkty zostały ponownie załadowane, gdy przeglądarka strony przewinęła się do samego końca. Buzzword: inifnite scrolling.

Animacja opłat była wtedy częścią doświadczenia. Dzisiaj zapisywałbyś je, przeładowując części strony, które nie są jeszcze w polu widzenia użytkownika.

Nawiasem mówiąc, przeładowanie przez AJAX jest szczególnie warte na smartfonach. Nawet przy normalnych długich bokach. Ponieważ wyświetlacze są tak wąskie, że nawet krótkie strony mogą szybko stać się bardzo długimi stronami.

6. Kompresuj CSS i JavaScript

Dowolny wywoływany plik CSS, HTML lub JS musi zostać załadowany. Im jest mniejsza, tym szybciej działa.Możesz zmniejszyć ilość danych, kompresując je.

Działa to najlepiej, zapisując znaki. Krótki kod zajmuje mniej miejsca niż długi kod. Dlatego cały kod minifikowany usuwa wszystkie komentarze, wszystkie znaki nowej linii i większość spacji.

Oczywiście nikt nie robi tego ręcznie. Rozsądny programista front-end pozostawia to zadanie Taskrunnerowi. Te zestawy narzędzi, na przykład chrząknięcie , łyk lub WebPACK zapewnia wiele możliwości automatyzacji powtarzających się zadań programistycznych. Między innymi tylko kompresja JavaScript i CSS.

Oto jak kompresja wpływa na plik JS.

W tym przykładzie rozmiar pliku naszego pliku JavaScript może zostać zmniejszony o 25%. W przypadku większych plików procentowe oszczędności mogą być nawet wyższe. Pisząc ten artykuł, nasz programista Robert zminimalizował plik JS o rozmiarze 238 KB do 35 KB. Odpowiada to redukcji o ponad 85% .

W JavaScript możesz także przycinać nazwy zmiennych. Najkrótsza nazwa jest oczywiście jednocyfrowa. Ale nie możesz tego źle zaprogramować. Zmienne mówiące są zawsze lepszym wyborem.

Dlatego zmienne są skracane przez powyższy Taskrunner po zaprogramowaniu. To zapisuje dodatkowe dane.

7. Użyj kompresji gzip

Gzip kompresuje pliki. Twój rozmiar pliku zostanie zmniejszony. W rezultacie pliki te mogą być również przesyłane szybciej.

Aktywacja gzip na serwerach WWW jest w rzeczywistości standardem. Mimo to warto sprawdzić, czy metoda kompresji jest rzeczywiście włączona, co pomaga w optymalizacji szybkości strony.

Tutaj dowiesz się więcej o Aktywacja GZip ,

8. Optymalizacja prędkości stron dzięki ładowaniu asynchronicznemu

Strona internetowa jest zawsze ładowana podczas ładowania w kolejności, w której elementy do załadowania pojawiają się w kodzie. Jeśli element w tej sekwencji nie został jeszcze w pełni przetworzony, następujący element nie może zostać przetworzony i dlatego nie jest jeszcze wyświetlany.

Pozycjonowanie plików CSS i JS w HTML było zatem przez długi czas określane przez właściwości ładowania synchronicznego: CSS w <head>, JS na końcu <body>.

• CSS jest ładowany na początku, dzięki czemu przeglądarka wie, jak wyświetlić Twoją stronę. Gdybyś miał połączyć swoje pliki CSS w dolnej części kodu HTML, HTML zostałby najpierw załadowany bez stylów, tj. Brzydki jak noc ciemna, a następnie stylizowany jako pierwszy.
• JavaScript jest inny. Wspiera zachowanie Twojej witryny, a nie wygląd. Ponieważ użytkownik potrzebuje informacji na stronie internetowej w razie wątpliwości, JavaScript, a tym samym funkcje strony internetowej są ładowane na końcu z synchronicznym ładowaniem.

JavaScript i CSS, jednak można również ładować asynchronicznie. Ale zanim pójdziemy w głąb Ścieżka renderowania krytycznego Wyjaśnię pokrótce, dlaczego należy ładować JavaScript asynchronicznie.

Asynchroniczne ładowanie JavaScript

Podczas asynchronicznego ładowania JavaScript nie ma znaczenia, czy pliki JS znajdują się na górze, czy na dole HTML.

Dlaczego?

Ładowanie asynchroniczne przechodzi przez kod od góry do dołu i ładuje komponenty w zwykły sposób w kolejności, w jakiej pojawiają się w pliku HTML. Różnica polega na tym, że ładowany plik nie musi być w pełni załadowany, zanim reszta może zostać załadowana. Rozpoczyna ładowanie i ładuje w tle, podczas gdy następne wiersze kodu są przetwarzane kawałek po kawałku.

Zaleta: niektóre skrypty - na przykład do śledzenia witryny - powinny być ładowane na lepsze już na początku. Ładowanie asynchroniczne uniemożliwia blokowanie reklamy witryny.

9. Użyj subdomen, aby uzyskać więcej żądań HTTP

Czy pamiętasz, że przeglądarka może przetwarzać do 8 żądań jednocześnie? Możesz poradzić sobie z tym problemem za pomocą małej sztuczki. Ponieważ to ograniczenie dotyczy tylko poziomu domeny. Jeśli więc możesz załadować dodatkowe skrypty i pliki z innych domen, możesz załadować 8 dodatkowych plików na domenę.

Można zatem załadować pliki CSS i JS przez jedną lub więcej subdomen. Dlaczego?

Powiedzmy, że twoja strona składa się z 28 plików. HTML, CSS, JS i różne zdjęcia. Dla uproszczenia załóżmy, że wszystkie te pliki mają ten sam rozmiar. Na przykład 15 kb.

Jeśli wszystkie 28 plików znajdowało się w głównej domenie, przeglądarka użytkownika mogłaby załadować je w 4 krokach: 8, 8, 8, 4.

Jeśli ładowanie pliku trwało łącznie 50 milisekund, pliki teoretycznie zostaną załadowane w ciągu 200 milisekund .

Jeśli wszystkie pliki zostały przesłane do głównej domeny i 3 subdomen, przeglądarka użytkownika może pobrać 28 żądań jednocześnie. Teoretyczny czas ładowania wszystkich 28 plików: 50 milisekund .

Oczywiście ten przykład ilustruje jedynie relacje między przeglądarkami, plikami i domenami. Dystrybucja strony internetowej zawierającej 100 plików do załadowania na więcej niż 12 subdomenach w celu osiągnięcia możliwie najkrótszych czasów ładowania jest nie tylko kłopotliwa, ale także zbyt czasochłonna do administrowania.

Czasami pomaga umieścić wszystkie obrazy w domenie bilder.deinedomain.de. JavaScript i CSS powinny w większości przypadków istnieć tylko jako jeden plik.

Wszystko to brakuje w HTTP / 2. W tym przypadku żądania dla domeny nie są już ograniczone.

10. Zoptymalizuj szybkość swojej strony, korzystając z sieci dostarczania treści (CDN)

CDN umożliwia ładowanie elementów witryny bez obciążania własnego serwera. Działa to ze skryptami, obrazami, CSS i wszystkimi innymi elementami, które muszą być ładowane przez żądanie HTTP.

Jedną z zalet jest zapisywanie żądań HTTP na własnym serwerze. Po drugie, CDN działają regionalnie. Więc kiedy klient ładuje przedmioty w Niemczech, są one ładowane z lokalizacji w Niemczech, a nie w USA lub na Filipinach. Szybkość wzrasta więc ponownie dzięki krótszym ścieżkom transmisji.

Jest wielu dostawców CDN. Dla małych i dla dużych projektów. Są wtedy tanie lub drogie.

W 121WATT używamy MaxCDN ,

Czy chciałbyś uzyskać więcej SEO? Następnie znajdziesz tutaj nasze następne terminy dla naszej struktury SEO lub seminarium technicznego SEO:

11. Popraw czas reakcji serwera

Po wywołaniu Twojej witryny serwer sieciowy musi odpowiedzieć danymi. Im szybciej odbierane są poszczególne żądania, tym szybciej strona jest w pełni załadowana.

Ten punkt jest bardzo ważny. Ponieważ bez względu na to, jak przykładne są inne punkty tego artykułu: Jeśli serwer nie reaguje szybko, strona będzie wolna.

A jak szybki jest „szybki”? Google pisze w Insightach PageSpeed, że wartość powinna wynosić poniżej 200 ms , Dopiero wtedy Google-Bot odwiedza ten adres URL w sposób ciągły i regularnie.

Zawsze możesz zoptymalizować czas odpowiedzi serwera, administrując serwerem, lub możesz zapłacić hosterowi więcej pieniędzy, aby to zrobić za ciebie.

Ułatw to i wybierz drugi wariant, jeśli możesz.

Więcej wskazówek na krótszy czas reakcji można znaleźć w tym artykule ,

12. Unikaj złych żądań

Jeśli Twoja strona internetowa zostanie wywołana, a serwer WWW otrzyma żądanie dostarczenia pliku, powinien również dostarczyć. Jeśli nie zostaną znalezione pojedyncze elementy, takie jak obrazy, JavaScript lub CSS, wcześniej płynna komunikacja między klientem a serwerem staje się gorącą dyskusją na temat brakujących treści. To wiąże zasoby, na przykład, niepotrzebne DNS Widoki być uruchomione.

Możesz łatwo naprawić brak żądanych plików przez:

1. Spraw, aby brakujący plik był ponownie dostępny tam, gdzie był pierwotnie
2. Przekieruj do nowej nazwy pliku lub lokalizacji, w której można znaleźć plik

Ale najpierw musisz odkryć prośby o kąpiel. Możesz to zrobić ponownie Użyj krzyku żaby ,

404 błędów na stronie, które zostały ujawnione w Screaming Frog

13. Używaj CSS3 zamiast grafiki dla przycisków, ikon i tła

Tak - ta wskazówka jest stara. Ale nie wierzysz, ile razy nadal jest ignorowany.

Kilka lat temu grafika musiała zostać zintegrowana ze stronami internetowymi jako obrazy, tj. PNG lub JPG. Oprócz bycia na makabrycznych technikach Drzwi przesuwne musiałem uciekać się do tworzenia przycisków o dynamicznej szerokości, zawsze trzeba było ładować obrazy.

Nawet najmniejszy obraz ma wiele linii kodu. Aby to zilustrować, wystarczy raz otworzyć mały obraz za pomocą edytora tekstu.

Szybsze i bardziej eleganckie jest tworzenie wszystkich nie-fotograficznych elementów graficznych za pomocą CSS. Klasyki to przyciski. Jeśli są tworzone w CSS3, składają się one z bardzo niewielu linii kodu.

Oprócz zapisanej grafiki czasu ładowania, która została wygenerowana przez CSS, oczywiście wszędzie. Czy na normalnym monitorze wyświetlającym 72 dpi, czy na wyświetlaczu Retina o rozdzielczości 220 dpi.

14. Użyj obrazów o prawidłowych wymiarach

Wymiary obrazu powinny być zawsze mierzone przy największej reprezentacji odpowiedniego ekranu po twojej stronie. Porozmawiajmy o responsywnym projekcie, w którym obraz jest wyświetlany na pulpicie z 1000px x 1000px, ale na telefonie, ale znacznie mniejszym, obraz musi nadal istnieć w 1000px x 1000px.

Wadą tej procedury jest jednak: obraz jest zawsze ładowany w pełnym rozmiarze. Responsywne lub nie. Rozwiązaniem są narzędzia takie jak imgix , Tutaj twoje obrazy są hostowane i renderowane na podstawie rozmiaru i wyników rzutni. Więc jeśli ktoś patrzy na twoją stronę na smartfonie, obraz jest dostarczany tylko w odpowiednim rozmiarze. To oszczędza miejsce.

Możesz także użyć elementu <picture>. Ten element HTML5 umożliwia oferowanie różnych wersji obrazu. Te wersje są oparte na różnych rozmiarach rzutni, które możesz określić samodzielnie:

15. Użyj właściwego formatu pliku dla zdjęć

Zasadniczo tylko trzy formaty plików są istotne dla zdjęć na stronach internetowych: .jpg, .png i .gif. Po co jednak korzystać?

Jako zasada:

• .jpg dla zdjęć i grafiki w tle
• .png, .gif lub .svg dla grafiki układu

Ale PNG nie jest równy PNG. W większości przypadków PNG-8 jest dobrym wyborem, ponieważ format ten łączy bardzo mały rozmiar pliku z w większości wystarczającym spektrum kolorów.

W przypadku grafiki - szczególnie nie dla zdjęć - użycie wektorowego formatu SVG ma bardzo sensowny sens. Pliki te są bardzo małe, ale nieskończenie skalowalne. Mogą być one również wyświetlane na wyświetlaczach Retina bez utraty jakości.

16. Zmniejsz informacje o zdjęciu na zdjęciach

Tak, poprawnie przeczytałeś. Mimo że naszym celem jest, aby odwiedzający nasze strony byli zachwyceni optycznymi rozkoszami, powinniśmy oczyścić nasze obrazy za pomocą niezauważalnych informacji o obrazie.

Na przykład grafika może zostać skompresowana do akceptowalnego poziomu w Photoshopie, a następnie ponownie edytowana przez narzędzie, takie jak kraken.io lub PNGGauntlet uwolnić się od innych zbędnych elementów.

17. Usuń dane EXIF ​​i metatagi

Większość zdjęć zawiera metadane, takie jak EXIF ​​i meta tagi. Informacje te zabierają miejsce i nie oferują żadnej wartości dodanej na stronie internetowej. Więc gdzie iść? Po prawej: w koszu. Na przykład serwis internetowy pomaga nam tutaj tinypng ,

18. Najpierw pomyśl o swoich użytkownikach telefonów komórkowych

Reguła komputerów stacjonarnych dobiegła końca. Nowa strona internetowa musi zadowolić mobilnych użytkowników. Jeśli więc tworzysz stronę internetową, powinieneś pomyśleć o tych, którzy siedzą w kawiarni na chodniku ze złymi połączeniami i małą cierpliwością i chcą odwiedzić Twoją witrynę.

Osoby te mają przed sobą mniejszy ekran, obsługują telefon palcem, a nie myszą i mogą mieć do dyspozycji połączenie EDGE.

Kiedy myślisz o tych ludziach, zdajesz sobie sprawę, że prędkość musi być twoim głównym celem. Ponieważ jeśli jesteś wolny, Twoja witryna nie jest przyjazna dla urządzeń mobilnych. Jeśli nie jest przyjazny dla urządzeń przenośnych, Google nie uważa go za indeksowalny w wyszukiwarce mobilnej (!). Dzięki temu, w zależności od branży, możesz łatwo stracić ponad 50% swoich klientów.

Podnieś następny poziom

Optymalizacja PageSpeed ​​nie jest nauką rakietową pomimo tego nagłówka. W końcu prawie zawsze chodzi o jak najszybsze przesyłanie danych do urządzenia końcowego odwiedzającego witrynę.

Teraz znasz kontekst i najskuteczniejsze sposoby przyspieszenia działania witryny i zapewnienia użytkownikowi i maszynie, której chcą: Szybkości!

Czy coś zapomniałem? Masz pytania? Czy widzisz coś innego? Skorzystaj z naszej funkcji komentarzy, aby się ze mną skontaktować.