Porady dotyczące optymalizacji mobilnej: 7 sposobów na poprawę szybkości mobilnej witryny

1. 1. Zmierz i zminimalizuj czas odpowiedzi serwera
2. 2. Unikaj lub minimalizuj przekierowania w celu przyspieszenia prędkości strony mobilnej
3. 3. Rygorystycznie mierzyć czasy podróży w obie strony
4. 4. Załaduj zawartość składaną przed treścią poniżej części składowej
5. 5. Umieść JS na dole i CSS na górze plików HTML
6. 6. Zoptymalizuj i zminimalizuj pliki CSS i JS
7. 7. Użyj kompresji gzip, aby zmniejszyć rozmiar pliku

W okresie świątecznym klienci mają tylko jedną misję krytyczną. Tak jak w tym starym filmie Jingle all the Way , z udziałem byłego gubernatora, byłego mistrza budowy ciała i gospodarza ucznia , Arnolda Schwarzeneggera, usilnie starają się zdobyć zabójczy prezent dla ukochanego dziecka i szybko go złapać , zanim ktokolwiek inny.

Ty również masz jedną krytyczną misję pośród szalonego szaleństwa oszalałych konsumentów: zmniejsz szybkość swojej strony mobilnej i przekonwertuj kupujących online do swoich szczęśliwych kupujących.

Google, Radware i eksperci ds. optymalizacji mobilnej zidentyfikowałem trzy sekundy jako magiczną liczbę dla czasu ładowania mobilnego. W ciągu trzech sekund dochodzi do katastrof i zaczynają się dziać różne złe rzeczy: klienci uciekają do konkurencyjnych stron internetowych, obniżają konwersje i pogarszają markę. W ciągu trzech sekund jesteś dobry jak złoto, a twoi klienci też!

Nie marnując nawet milisekundy czasu, pozwólcie, że przedstawię siedem kluczowych kroków opracowanych przez zespół optymalizacji Mobile1st, aby gwałtownie przyspieszyć prędkość strony mobilnej.

1. Zmierz i zminimalizuj czas odpowiedzi serwera

Szybkość strony mobilnej jest określana przez kodowanie internetowe, ale zależy również od dużego, tłustego narzędzia technicznego zwanego serwerem. Oczywiście im dłużej serwer czeka na odpowiedź z przeglądarki, tym wolniejszy jest czas ładowania strony. Mobile1st wraz z ekspertami w Google i GTMetrix zalecamy, aby serwer rozpoczął przesyłanie pierwszego bajtu zasobów w ciągu 200 milisekund od żądania .

Zwany także „czasem oczekiwania” lub „czasem do pierwszego bajtu”, czas, który upływa przed odpowiedzią serwera, jest pierwszym elementem na wykresie wodospadu.

Wydajność sieci Web zapewnia dokładne spojrzenie na wykres wodospadu, który pokazuje wszystkie elementy ładowania strony internetowej i ich sekwencyjny czas.

Istnieją trzy główne metody podniesienia czasu odpowiedzi serwera:

• Popraw swoje oprogramowanie lub konfigurację serwera WWW
• Popraw jakość i zakres usługi hostingowej, aw szczególności zapewnij odpowiednie zasoby procesora i pamięci
• Zmniejsz zasoby wymagane przez strony internetowe

2. Unikaj lub minimalizuj przekierowania w celu przyspieszenia prędkości strony mobilnej

Przekierowania to instrukcje, które automatycznie przenoszą użytkowników witryny z jednej strony na inną. Każde przekierowanie pochłania cenne milisekundy, tworząc wolniejsze obciążenie strony. Jest to szczególnie problematyczne na urządzeniach mobilnych, ponieważ często zależą od mniej niezawodnych sieci niż użytkowników komputerów stacjonarnych.

301s - najpopularniejszy rodzaj przekierowań stron - kieruj odwiedzających witrynę z przestarzałych stron internetowych na nowo zaprojektowane strony z różnymi adresami URL. Choć często potrzebne , 301s może pochłonąć dużą część czasu ładowania mobilnego. W rzeczywistości przekierowania są prawdopodobnie „największym źródłem zmarnowanego czasu w kodzie i mogą znacząco wpłynąć na szybkość strony”, raporty Varvy .

Pierwszym krokiem jest po prostu zbadanie liczby przekierowań w witrynie poprzez wdrożenie takich narzędzi, jak Patrick Sexton mapowanie przekierowań .

3. Rygorystycznie mierzyć czasy podróży w obie strony

Wikipeida definiuje „czas podróży w obie strony” (RTT) jako czas potrzebny na przesłanie żądania z komputera stacjonarnego lub urządzenia mobilnego do docelowego miejsca docelowego, takiego jak komputer zdalny, oraz całkowity zwrot tych danych.

RTT można zmierzyć przez pingowanie adresu. Dokładny odstęp czasu RTT zależy od wielu czynników, takich jak źródło połączenia, medium połączenia, odległość fizyczna między rzeczywistym źródłem a systemem zdalnym, liczba węzłów między nimi, ilość ruchu, liczba innych żądań obsługiwanych przez serwer i tak dalej.
Każdy RTT dodaje ilość czasu do całkowitego czasu ładowania mobilnego. Dlatego najlepszą praktyką jest zmniejszenie ilości kolejnych obiegów, upewniając się, że zasoby są przesyłane równolegle i eliminując nadmierną wagę. Poza unikaniem wyżej wymienionych przekierowań, GlobalDots sugeruje łączenie skryptów w celu uniknięcia powtarzającego się czasochłonnego RTT, w szczególności przez łączenie w jak najmniejszej liczbie plików:

• Zewnętrzne JavaScript
• Zewnętrzny CSS
• Obrazy używające sprite'ów CSS

4. Załaduj zawartość składaną przed treścią poniżej części składowej

Pomysł jest prosty: Twoja strona internetowa powinna wczytać treść, którą użytkownik mobilny widzi najpierw, zanim treść, którą zobaczą później. W szczególności należy kodować swoje strony internetowe tak, aby serwer działał wysyła najpierw dane niezbędne do wyświetlenia zawartości składanej powyżej. Nawet jeśli strona jest niekompletna, użytkownik doświadczy wcześniej gotowej zawartości. W testach szybkości strony mobilnej Google w rzeczywistości wywołuje strony, które nie ładują się w pierwszej kolejności, zalecając „priorytetowe traktowanie widocznej zawartości”.

5. Umieść JS na dole i CSS na górze plików HTML

JavaScript wprowadza interaktywność do stron internetowych (takich jak przyciski i ich odpowiedzi lub dane wprowadzane w formularzach, dynamicznych stylach i animacjach). Skrypty JS uniemożliwiają jednak równoległe pobieranie. Podczas ładowania kodu JS przeglądarka nie rozpocznie innych operacji pobierania. Aby przyspieszyć ładowanie strony, przenieś skrypty JS na dół strony, jeśli to możliwe. Pozwoli to wyświetlić zawartość HTML przed załadowaniem kodu JavaScript, umożliwiając wyświetlenie spinnera ładującego strony lub innej wiadomości odwiedzającemu mobilnemu.

CSS, czyli kaskadowe arkusze stylów, opisują, w jaki sposób elementy HTML mają być wyświetlane na Twojej stronie. Gdy umieszczasz arkusze stylów na początku dokumentu programistycznego, strony wydają się ładować szybciej. Umieszczając swój CSS z przodu, przeglądarka może wyświetlać dowolną treść, jaką posiada, tak szybko, jak to możliwe.

6. Zoptymalizuj i zminimalizuj pliki CSS i JS

Więcej danych i nadmierna waga strony oznaczają, że załadowanie stron będzie trwało dłużej. Dlatego zawsze web developerzy zasługują na soli, wiedzą, że muszą optymalizować i minimalizować zasoby. Początek tej listy to optymalizacja i minimalizacja plików CSS i JS.

„Minification” eliminuje zbędne lub po prostu nieistotne dane bez wpływu na sposób wyświetlania strony. Różne narzędzia, jak Google wskazuje, że może pomóc w filtrowaniu kodu i wyeliminowaniu takich zwolnień.

Najbardziej znane to:

7. Użyj kompresji gzip, aby zmniejszyć rozmiar pliku

W przeciwieństwie do kompresji, kompresowanie danych wymaga etapu kompresji przed wyświetleniem. Tak, kod został zmniejszony z oryginalnego rozmiaru i dlatego szybciej przesyła się do przeglądarki, ale dodatkowy krok dekompresyjny zwiększa czas ładowania mobilnego.

W chwili pisania tego tekstu gzip to metoda kompresji wybierana przez twórców stron internetowych. Gzipping zmniejszy wagę strony i zwiększy ją prędkość strony mobilnej . Gzipping zazwyczaj zmniejsza wagę strony o 70% i jest obecnie obsługiwany przez większość przeglądarek.

Obniżenie czasu ładowania telefonu komórkowego poniżej progu trzech sekund ma kluczowe znaczenie. Przyjęcie tych siedmiu kroków i inne zalecane techniki aby osiągnąć ten kluczowy cel, jednocześnie podnosząc wskaźniki, które doprowadzą Twój biznes do sukcesu. Zagadnienia? Pytania? Mobilny zespół optymalizacji tutaj w Mobile 1st jest gotów pomóc.

Mobile1st oferuje usługi optymalizacji mobilnej w celu zwiększenia przychodów / konwersji witryny mobilnej poprzez zmniejszenie współczynnika porzucania koszyka na zakupy, zmniejszenie szybkości ładowania strony, poprawę mobilnego UX i SEO, analizowanie analiz mobilnych i wiele innych. Nasz zespół mobilnych ekspertów analizuje i ulepsza Twoją witrynę w ponad 35 czynnikach, koncepcjach testów A / B, a nawet może (opcjonalnie) wdrożyć zmiany w projekcie / kodzie.
Skontaktuj się z Mobile1st Experts Now!