Potrzeba godziny to nie responsywny projekt, ale responsywna wydajność

W ostatnim czasie projektowanie responsywne miało kilka problemów z wydajnością. Ironia polega na tym, że responsywny projekt radzi sobie całkiem nieźle na najnowszej gamie smartfonów, ale nic poza tym.

Możesz być zdezorientowany, ponieważ większość użytkowników Internetu ma smartfony z najwyższej półki. Jednak duża populacja nadal korzysta z urządzeń mobilnych z małym ekranem, działających na starej wersji Androida lub iOS, a może po prostu z telefonu z funkcjami o niewielkiej funkcjonalności. W rezultacie projektowanie responsywne nie służy szerszej publiczności, jak powinno.

Od dawna utrzymywane przekonanie, że responsywne projektowanie jest przeznaczone dla urządzeń mobilnych o dowolnym rozmiarze ekranu, ma wiele wspólnego z tym problemem. Ponieważ wydajność spada, a niezadowolenie rośnie, istnieje potrzeba wyjścia poza responsywny projekt. Zamiast tego należy skupić się na zapewnieniu responsywnej wydajności. Ten post jest mniej więcej taki sam.

Więc najważniejsze pytanie brzmi: co robić?

Odrzuć koncepcję projektowania z myślą o komputerach stacjonarnych

Istotnym czynnikiem przyczyniającym się do tego uporczywego problemu jest to, że nadal koncentrujemy się na podejściu do projektowania zorientowanym na komputery stacjonarne. Nacisk kładziony jest na zaprojektowanie strony internetowej na komputer stacjonarny, a następnie projektowanie dla innych urządzeń, takich jak smartfony i tablety. Dla każdej brakującej funkcjonalności, programiści hojnie używają podkładek i wypełniaczy. Oczywiście istnieją ogromne biblioteki, które zapewniają szybki rozwój. Nie rozwiązuje to jednak problemu niezgodności przeglądarek. Czy uzasadnione jest angażowanie się w koncepcję projektową, która nie przynosi oczekiwanych rezultatów?

Nie jest trudno wdrożyć podejście mobile first, w którym celem będzie oferowanie użytkownikowi mobilnemu tylko zamierzonych informacji na jego ekranie, a nie wszystkich rzeczy, które zabijają urządzenie. Luke Wróblewski skonceptualizował to podejście projektowe po raz pierwszy w 2011 roku i od tego czasu wielu ekspertów branżowych chwali jego przełomowe podejście do projektowania.

Więcej danych, nawet jeśli zajmuje to ułamek sekundy, może mieć znaczący wpływ na całkowity czas ładowania. Jednak prawdą jest również, że strony internetowe stają się coraz cięższe z treściami bogatymi w grafikę, a coraz więcej osób korzysta z urządzeń mobilnych, aby uzyskać do nich dostęp. Kiedy użytkownik wpisuje adres URL witryny na telefonie komórkowym z ekranem o niskiej rozdzielczości, jego celem jest zawsze dostęp do treści witryny, ale to, czego doświadcza, to koszmar. Wynika to z trudności w nawigacji przez niekończące się niepotrzebne reklamy. Usuń takie elementy zawartości, których można uniknąć, aby umożliwić użytkownikowi dostęp do zawartości głównej. Zwiększa to ruch w witrynie, ponieważ oprócz użytkowników z zaawansowanymi smartfonami, wielu z nich uzyska dostęp do Twojej witryny za pośrednictwem urządzeń mobilnych o niskiej rozdzielczości. Dostarczanie wersji tekstowej ma sens, jeśli telefon komórkowy ma ograniczone możliwości, ale z drugiej strony możesz powiedzieć, że wrażenia użytkownika są zagrożone. Cóż, jest, ale i tak jest to lepsze niż nieotrzymywanie żadnych treści. Przynajmniej w takim przypadku użytkownicy uzyskają dostęp do podstawowych informacji o Twojej witrynie. Czy jest sens zaprojektować stronę internetową w taki sposób, aby zmniejszyć jej potencjalny zasięg?

Z pewnością zaakceptujesz fakt, że czekanie w nieskończoność tylko na sprawdzenie strony internetowej nikogo nie ekscytuje. Jak wynika z niektórych ankiet przeprowadzonych przez Akamai i Gomez.com, około 50% użytkowników sieci oczekuje, że witryna załaduje się w ciągu 2 sekund lub nawet mniej. Istnieje więcej szans na porzucenie strony, jeśli strona nie załaduje się w przeglądarce w ciągu zaledwie 3 sekund! Co więcej, większość witryn e-commerce ma obecnie dużą liczbę przycisków udostępniania społecznościowego, takich jak Facebook, Google Plus, Twitter, LinkedIn itp. Czy wiesz, że te przyciski dodają więcej niż 500 KB do Twojej responsywnej witryny i wpływają na jej wydajność? Sam przycisk „Lubię to” na Facebooku wymaga skompresowanego kodu o wielkości 270 KB! Wymaga również wielu żądań HTTP. Zamiast tego używaj przycisków udostępniania społecznościowego opartych na adresach URL, ponieważ tak ogromny rozmiar nieuchronnie wpływa na czas ładowania responsywnej witryny, nawet jeśli połączenie mobilne jest szybkie.

Wydajność strony internetowej ma bezpośredni wpływ na wydajność firmy, a wolno responsywna strona internetowa nigdy nie robi nic dobrego dla biznesu. Wierz lub nie, ale większość użytkowników telefonów komórkowych nie jest zainteresowana prowadzeniem badań ani czytaniem długich artykułów. Większość z nich korzysta z urządzeń mobilnych, aby mieć łatwy dostęp do Facebooka, WhatsAppa, Twittera i czerpać radość z zakupów online. Co więcej, mobile nie jest już trendem, to przyszłość.

Według zeszłorocznych statystyk Comscore, liczba użytkowników Internetu wyłącznie mobilnych w Stanach Zjednoczonych gwałtownie wzrosła, podczas gdy użytkowników korzystających wyłącznie z komputerów stacjonarnych spadła do 10,6 procent.

Chcesz coś więcej powiedzieć, żeby przekonać?

Zapewnij wdzięczną degradację

W ciągu ostatnich kilku lat mogłeś natknąć się na nowe modne hasło w świecie responsywnego projektowania, a jest to „wdzięczna degradacja”. Tak, łagodna degradacja oznacza, że ​​nawet jeśli funkcja nie działa pomyślnie, powinna zawieść w sposób ułatwiający akceptowalną użyteczność. Oznacza to stworzenie projektu strony internetowej na komputer stacjonarny, a następnie stopniowe przejście na tablety, smartfony i telefony z internetem. Wydajność responsywnego projektu, w którym witryna z wdziękiem ulega degradacji, z pewnością będzie wysoka, ponieważ wrażenia użytkownika są tutaj zawsze na najwyższym poziomie. Strona pozostanie funkcjonalna pomimo wszelkich niedociągnięć, a odwiedzający z pewnością będzie pod wrażeniem ogólnej jakości.

Teraz możesz mieć to pytanie w swoim umyśle, co jest tak fascynującego w wdzięcznej degradacji. Odpowiedź jest prosta. Dzieje się tak, ponieważ sprawia, że ​​Twoje treści są widoczne i czytelne niezależnie od przeglądarki, co jest niezwykłym wyczynem! Na szczęście, jeśli używasz CSS3, wdzięczna degradacja staje się łatwym zadaniem, ponieważ większość właściwości CSS3 ulega automatycznej degradacji, tj. zaokrąglone rogi stają się kwadratowe, tekst jest zawijany zamiast biegać w jednej linii, gradienty stają się płaskie i wiele więcej.

Podajmy przykład wdzięcznej degradacji. Załóżmy, że zaprojektowałeś responsywną stronę internetową z funkcjami JavaScript, które nie są obsługiwane przez Twoją przeglądarkę lub mogą być wyłączone po stronie Twojego klienta. Co więc możesz zrobić, aby uzyskać zawartość? Cóż, w takim przypadku łagodna degradacja umożliwia przeglądarce wyświetlanie treści w ramach tagu „noscript”.

Możesz to lepiej zrozumieć dzięki kodowaniu podanemu poniżej:

[xhtml]
<noscript>
<h1>Drogi Johnie, napotkałeś problem!</h1>
<p>Twoja przeglądarka nie obsługuje JavaScript lub jest tymczasowo wyłączona.
Odwiedź naszą <a href="/support/browsers/">obsługę przeglądarek</a>, aby uzyskać pomoc.</p>
</noscript>
[/xhtml]

Jest jeszcze jeden przykład wdzięcznej degradacji, którym chciałbym się podzielić, a jest nim wykorzystanie HTML5 przez YouTube do odtwarzania filmów. Załóżmy, że Twoja przeglądarka nie obsługuje HTML5, wideo będzie wyświetlane za pomocą Flasha, a jeśli nawet Flash nie jest zainstalowany, otrzymasz wiadomość, aby zainstalować go na swoim urządzeniu mobilnym. W obu przypadkach będziesz mógł obejrzeć wideo. Jednak jedną wadą tej wdzięcznej degradacji jest to, że chociaż wydajność jest dobra, musisz iść na kompromis z pewnymi elementami projektu, jeśli używasz przestarzałych przeglądarek. Myślę, że wcześniejsze określenie istotnych elementów wizualnych witryny może załatwić sprawę.

Nie ma potrzeby zachowywania nieużywanych bibliotek

Jedną z najlepszych praktyk może być nieutrzymywanie bibliotek, które nie są używane. Tak, to prawda, że ​​śledzenie używanych i nieużywanych bibliotek jest bardzo czasochłonne, ale rzeczywiście warto. Czasami mogłeś zauważyć, że po włączeniu biblioteki używasz tylko jednej funkcji. Czasami może to być nawet dwa lub trzy. Najczęściej używanym przeze mnie narzędziem do tworzenia responsywnych projektów jest jQuery. W rzeczywistości istnieje wiele bibliotek jQuery pomagających programistom w tworzeniu responsywnych stron internetowych. Włączenie kilku bibliotek, takich jak biblioteki JavaScript, tylko dlatego, że polubiłeś niektóre widżety, znacznie wydłuży czas ładowania strony. Jednak fajną praktyką będzie przeanalizowanie, które biblioteki są w użyciu iw jakim stopniu.

Sprawdź dostępność funkcji

Możesz sprawdzić, czy Twoje urządzenie obsługuje określoną funkcję, czy nie, zanim ją aktywujesz. Na przykład zdarza się, że chociaż zainstalowałeś najnowszą wersję Google Chrome na swoim przestarzałym telefonie z Androidem, nadal nie wyświetla Twojej witryny. Czasami przy próbie załadowania takiej strony przeglądarka ulega tak poważnej awarii, że całe urządzenie mobilne przestaje odpowiadać. Musisz zrestartować urządzenie, a to ostatnia rzecz, której chciałeś, prawda? Wielu użytkowników niektórych aplikacji internetowych już cierpi z powodu tego problemu.

Niedostępność funkcji na urządzeniach, a jednocześnie projektowanie stron internetowych lub aplikacji spowodowała pewne zauważalne problemy, takie jak natychmiastowa awaria aplikacji Google Hangout na urządzeniach z Androidem na całym świecie, niezależnie od typu przeglądarki. Dzieje się tak pomimo faktu, że aplikacja była lekką aplikacją. Można argumentować, że użytkownicy korzystali ze starszej wersji smartfonów z Androidem, ale prawdą jest również, że takie urządzenia są nadal dostępne od ręki jako zupełnie nowe w każdym ze sklepów mobilnych. Wielu użytkowników mobilnych napotyka ten sam problem z wydajnością w przypadku aplikacji YouTube i Twitter. Nawet aktualizacja usługi Google Android System Webview za pośrednictwem Google Play zamraża wiele smartfonów, stając się swego rodzaju koszmarem użytkowników.

Optymalizuj obrazy

Dodanie atrakcyjnych wizualnie dużych obrazów jest zawsze kuszące dla projektantów. Problem pojawia się, gdy nie kompresują tych obrazów przed przesłaniem ich do CMS. Dotyczy to zwłaszcza wielu witryn e-commerce w sieci. Jak wynika z ostatnich badań przeprowadzonych przez Radware, strony stają się coraz większe, a około 45 procent ze 100 najlepszych witryn detalicznych nie stosuje kompresji obrazu. To sprawia, że ​​takie strony są bardziej masywne, a w rezultacie wydłuża się czas ładowania, ale jako projektant możesz uniknąć problemu.

Twórz obrazy o mniejszych rozmiarach, używając odpowiedniego narzędzia do optymalizacji obrazu. W rzeczywistości nie brakuje takich narzędzi w sieci. Niektóre z godnych uwagi, które możesz wykorzystać, to Dynamic Drive, Smush it i Riot. Jeśli jesteś profesjonalistą w Photoshopie, możesz również samodzielnie zoptymalizować rozmiar obrazu. Użyj inteligentnej techniki kompresji i usuń nadmiarowe metadane. Konwersja grafiki do PNG, bogate w kolory obrazy do JPEG i animowane do GIF również dają radę.

Nastawiony na ekstremalne przypadki

Kiedy zaczynasz projektować, na pewno zauważyłeś, że kusi Cię projektowanie stron, które są łatwiejsze. Przynajmniej dzięki temu możesz pokazać coś swoim interesariuszom. Na pierwszy rzut oka może się to wydawać miłe, ale jeśli skupisz swoje wysiłki na najtrudniejszych scenariuszach, na początku uzyskasz dobry wynik.

Na przykład strona internetowa zawierająca artykuły, blogi i informacje prasowe. Musi mieć też tytuł. A teraz, co się stanie, jeśli obszar tytułowy, o którym myślisz, że ma pokazać „Wskazówki dotyczące projektowania responsywnych stron internetowych”, będzie zawierał tytuł „10 niezbędnych wskazówek i technik udanego projektowania responsywnych witryn internetowych”? To jest skrajny przypadek.

Taki wysiłek, aby zoptymalizować działanie responsywnej strony internetowej, wydaje się niewidoczny. Jednak te wysiłki przynoszą dobre zwroty z zadowolonymi i zadowolonymi użytkownikami. Możesz skorzystać z różnych narzędzi, takich jak narzędzia Pingdom, które umożliwiają bezproblemowe monitorowanie czasu ładowania responsywnej witryny. Nie pomijaj ważnego aspektu testowania, aby upewnić się, że Twoja responsywna witryna działa zgodnie z zamierzeniami. Przetestuj go na tylu prawdziwych urządzeniach, ile możesz.

Możesz także skorzystać z zasobów, takich jak Screenfly, które umożliwiają testowanie witryny na wielu rozdzielczościach ekranu. Można argumentować, że wszystkie te strategie wymagają znacznej ilości czasu, ale z drugiej strony trzeba się mocno pocić, aby czerpać korzyści. W dzisiejszych czasach stworzenie responsywnej witryny o responsywnej wydajności jest niezbędne, tym bardziej, że Google ocenia witryny na podstawie ich wydajności. Jeśli jesteś projektantem lub programistą, nie ograniczaj się do żadnej z powyższych najlepszych praktyk. Powinieneś szukać więcej rozwiązań i możesz mocno naciskać, aby dostarczyć stronę internetową wykazującą responsywną wydajność.