Tip:
Highlight text to annotate it
X
MAILE OHYE: Cześć.
Nazywam się Maile Ohye.
Jestem kierownikiem technicznym ds. programów dla programistów
w zespole pomocy dla webmasterów Google.
W tym filmie omówię, gdzie można znaleźć
wskazówki i rozwiązania, które Ty lub pracownik techniczny
Twojej firmy możecie wykorzystać, aby usprawnić działanie
witryny mobilnej.
Zanim omówię, w jaki sposób Twoja witryna
może działać szybciej, przyjrzyjmy się kilku statystykom.
Wiadomo, że wydajność może wpływać na zyski.
Firma Strangeloop przeprowadziła eksperyment,
w którym wyświetlanie stron dla użytkowników smartfonów
zostało opóźnione o sekundę.
W wyniku tej zmiany
ilość wyświetleń strony spadła o ponad 9%.
Z kolei o ponad 8% wzrósł współczynnik odrzuceń,
a ilość konwersji zmniejszyła się o 3,5%.
Co gorsza, po zakończeniu eksperymentu
znacznie mniej osób było zainteresowanych
ponownym odwiedzeniem witryny.
Dowiedzmy się zatem więcej o użytkownikach
i prędkości wczytywania stron mobilnych.
Badania pokazują, że typowy użytkownik koncentruje się
na bieżącym wyszukiwaniu przez jedną sekundę.
Z kolei wczytanie strony mobilnej
obecnie zajmuje średnio siedem sekund.
Oznacza to, że w ciągu sześciu kolejnych sekund
użytkownik może przejść na inną witrynę.
Może też zapomnieć po co ją otwierał albo zacząć się denerwować.
Teraz wyjaśnię, dlaczego strony otwierają się wolniej
na telefonach komórkowych niż na komputerach stacjonarnych.
Porównajmy otwieranie stron na komórkach i komputerach.
Powiedzmy, że na laptopie chcę coś wyszukać
na google.com.
Po wpisaniu zapytania
połączenie się przeglądarki z serwerami Google,
przetworzenie zapytania, zwrócenie wyników
i ich wyświetlenie w oknie przeglądarki na laptopie
może wynieść mniej niż pół sekundy.
Obecnie takiej wydajności większość z nas oczekuje.
Wykonanie tych działań na smartfonie
w mniej niż pół sekundy jest raczej niemożliwe.
To dlatego, że po wpisaniu zapytania na smatfonie
przeglądarka musi nawiązać połączenie
z siecią komórkową.
Dopiero wtedy może połączyć się z serwerem.
Sieci telefonii komórkowej są skonfigurowane w taki sposób,
że w sieciach 3G i 4G połączenie smartfonu
z serwerami, takimi jak Google,
trwa co najmniej pół sekundy.
Po połączeniu z serwerem, co już zajęło pół sekundy,
Google musi przetworzyć zapytanie, zwrócić wyniki
i wyświetlić stronę z wynikami.
Czyli potencjalny klient korzystający ze smartfonu
musi poczekać co najmniej pół sekundy
na samo połączenie z serwerem.
Zostaje nam jeszcze tylko 0,6 sekundy,
zanim użytkownik zdecyduje się otworzyć
inną stronę.
Jak zatem przyspieszyć działanie strony?
W tym celu posłużę się informacjami z Google Analytics
dla witryny e-commerce, na przykład Google Store
pod adresem www.googlestore.com.
W Google Analytics utworzę segment dotyczący
odwiedzania stron mobilnych.
Służy do tego przycisk „Utwórz nowy segment”.
W zeszłym miesiącu moi koledzy, którzy zajmują się usługą Page Speed,
uruchomili w Google Analytics funkcję Szybkość witryny.
Zobaczmy, jak wyglądają zbierane przez nią dane.
Po wybraniu segmentu dotyczącego ruchu mobilnego
wybierz kartę Dystrybucja.
Ten widok ogólnie pokazuje
wydajność działania wybranej witryny.
Widzimy, że średni czas wczytywania mobilnej witryny,
czyli Google Store,
zajmuje ponad sześć sekund.
Możemy też zauważyć, że 46% stron mobilnej witryny
ładuje się w trzy do siedmiu sekund.
Dobrą wiadomością jest to, że te wyniki mogą być o wiele lepsze.
Na stronie z czasami wczytywania witryny
kliknij kartę Eksplorator.
Przy domyślnym ustawieniu sortowania na tej karcie
pokazane są najczęściej odwiedzane strony witryny
oraz szybkość ich wczytywania.
Okazuje się, że trzecia pod względem popularności strona,
czyli YouTube, na której sprzedawane są gadżety,
takie jak butelki na wodę czy magnesy, działa bardzo wolno.
Jej wczytywanie trwa o 350% dłużej, niż wynosi średnia dla pozostałych stron.
A jak było widać wcześniej, pozostałe strony też nie są szybkie.
Dzięki tej funkcji możemy zrobić listę popularnych stron,
które wolno działają, a którym warto się przyjrzeć.
Z kolei karta z sugestiami dotyczącymi szybkości witryny
zawiera propozycje poprawek.
Widzimy, że dla strony YouTube
dostępnych jest dziewięć sugestii.
Po kliknięciu sugestii, w nowym oknie wyświetli się lista
ze wskazówkami Page Speed.
Analiza działania strony przypomina sprawdzanie klasówki.
Po jej zakończeniu możemy zobaczyć wydajność strony na urządzeniach mobilnych.
Jak można się było domyślić, strona YouTube uzyskała słaby wynik:
55 na 100 punktów pod względem zgodności
ze sprawdzonymi metodami wydajnego działania.
Można uznać, że klasówka nie poszła dobrze. Ponieważ w tym filmie chcę pokazać
szybkie metody poprawy działania stron mobilnych,
skupimy się na rozwiązywaniu najprostszych zagadnień
oznaczonych czerwonym wykrzyknikiem.
Niektóre sugestie mogą brzmieć znajomo, ale nie wszystkie.
Każdą sugestię można rozwinąć, aby zobaczyć szczegółowe informacje.
Naprawdę warto zapoznać się z tymi wskazówkami.
Wprowadzenie zmian nie jest trudne,
a mogą one przynieść znaczące korzyści.
Przygotowałam tabelkę, którą pokażę na dwóch slajdach.
Zawiera ona informacje na temat zmian łatwych do wprowadzenia
oraz krótko wyjaśnia bardziej złożone kwestie.
Aby bliżej się z nią zapoznać, zatrzymaj na chwilę film.
W pierwszej części tabelki znajdziesz mniej skomplikowane poprawki,
które programista lub osoba doświadczona w budowaniu stron
może wprowadzić w kilka godzin.
Po pierwsze warto włączyć kompresję,
która kompresuje zasoby strony.
Po jej włączeniu między serwerem sieciowym i klientem
przesyłanych jest mniej danych.
W tym celu wystarczy tylko zmienić ustawienia
w pliku konfiguracji serwera.
Z kolei minimalizację zasobów można łatwo przeprowadzić,
korzystając z narzędzi ogólnie dostępnych.
Zastosowanie skryptów asynchronicznych w praktyce
sprowadza się do skopiowania i przeklejenia
fragmentów kodu w miejsce ich starszych wersji.
Aby włączyć buforowanie przeglądarki,
wystarczy dopisać odpowiednie nagłówki HTTP do zasobów.
Ostatnia z łatwiejszych do wprowadzenia poprawek
to zapobieżenie przekierowaniom do strony głównej.
W przypadku stron, które należą do łańcucha przekierowań,
wystarczy poprawić źródłowy URL, aby prowadził bezpośrednio
do strony docelowej, zamiast do stron pośrednich.
Usunięcie zbędnych przekierowań jest bardzo pomocne,
co pokazuje schemat szybkości obsługi stron na smartfonach.
Każde przekierowanie powoduje, że użytkownik musi dodatkowo czekać
co najmniej pół sekundy na wczytanie strony.
Jak wspomniałam wcześniej, jedną z prostych
do wprowadzenia zmian jest włączenie kompresji.
Wystarczy skopiować odpowiedni kod do pliku konfiguracji serwera.
W internecie dostępnych jest wiele plików konfiguracyjnych,
które można wykorzystać, by na przykład skopiować
odpowiednie ustawienia
wydajności i bezpieczeństwa.
Propozycje usprawnień w drugiej części tabelki
wymagają nieco więcej wiedzy programistycznej.
Wdrożenie wielu z tych poprawek
może zająć dłużej niż kilka godzin.
Dotyczą one bardziej złożonych zmian i usprawnień w procesach.
Mimo to chciałabym opowiedzieć
o optymalizacji plików graficznych.
Optymalizacja obrazów obejmuje szereg ulepszeń,
takich jak bezstratna kompresja
czy tworzenie i przycinanie obrazów
w celu usprawnienia działania witryny mobilnej.
Optymalizacja obrazów nie jest tak łatwa we wdrożeniu,
jak niektóre z sugestii
przedstawionych na poprzednim slajdzie.
Może ona jednak mieć duży wpływ na funkcjonowanie strony.
Obrazy stanowią 65% danych na stronach mobilnych.
Optymalizacja tych zasobów może skrócić czas ich pobierania,
a przez to przyspieszyć ładowanie stron.
O czym należy więc pamiętać?
Dla często odwiedzanych stron warto wprowadzić
mniej skomplikowane zmiany z czerwonym wykrzyknikiem.
Będzie to korzystne dla osób, które chcą odwiedzić Twoją witrynę,
i dla Twojej działalności.
Aby lepiej pokazać, dlaczego jest to ważne,
spójrzmy na stronę WebPageTest.org.
Witryna Web Page Test pozwala sprawdzić szybkość działania strony,
na przykład wcześniej wspomnianej strony YouTube.
W tym celu wybierz rodzaj klienta użytkownika,
np. smartfon iPhone lub Android.
Po zakończeniu analizy szybkości Web Page Test można zobaczyć,
jak poważny jest problem.
W analizie szybkości pomagał mi kolega Ilya Grigorik,
który zajmuje się głównie kwestiami wydajności.
Jego reakcja po wyświetleniu wyników:
Ojej, nie wygląda to najlepiej.
Widoczny na obrazku wodospad pokazuje,
dlaczego czas ładowania strony wyniósł ponad 15 sekund.
Niebieskie paski oznaczają pobieranie zasobów
potrzebnych do załadowania strony.
Rozpoczęcie renderowania strony
zajęło prawie siedem sekund.
Liczby te oznaczają, że potencjalny klient
witryny YouTube musi czekać siedem sekund,
zanim cokolwiek zobaczy.
W sumie musi czekać 15 sekund, aby strona wczytała się w całości.
Wciąż zastanawiasz się, czy warto wprowadzić
omówione przeze mnie proste usprawnienia?
W ankiecie „Czego dzisiejsi użytkownicy oczekują od witryn mobilnych”
61% osób stwierdziło,
że jeśli nie uda im się od razu znaleźć
szukanej treści w witrynie mobilnej,
decydują się przejść do innej.
Dlatego właśnie warto porównać wyniki i wskazówki
dotyczące własnej strony z podobną stroną konkurencji.
Ponieważ od zawsze lubię sport,
a jestem najmłodsza z trójki rodzeństwa,
czuję większą motywację do poprawy wyników,
gdy wiem, że są lepsi ode mnie.
Z witryny Web Page Test możesz też pobrać
filmik pokazujący renderowanie Twojej witryny mobilnej.
Zachęcam do porównania go
z filmikami dla innych witryn z Twojej branży.
Na koniec chciałabym wspomnieć, gdzie można znaleźć przydatne materiały.
Na stronie Page Speed dostępne są artykuły oraz narzędzia
takie jak Wskazówki Page Speed.
Ilya oraz inni członkowie zespołu Page Speed
przygotowali szereg ciekawych filmów instruktażowych.
Oczywiście polecam też witrynę WebPageTest.org.
Dziękuję za uwagę.