Need Of The Hour to nie responsywny projekt, ale responsywna wydajność

Responsywny projekt wykazywał ostatnio 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 sieci ma smartfony z wyż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 i być może po prostu z telefonu z niewielką funkcjonalnością. W rezultacie responsywny projekt nie służy szerszemu gronu odbiorców, tak jak powinien.

Długo utrzymywane przekonanie, że projektowanie responsywne 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 projektowanie responsywne. Zamiast tego należy skupić się na zapewnieniu responsywnej wydajności. Ten post dotyczy tego samego.

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

Odrzuć koncepcję projektowania komputerów stacjonarnych

Znaczącym czynnikiem przyczyniającym się do tego uporczywego problemu jest to, że nadal koncentruje się na podejściu do projektowania komputerów stacjonarnych. Nacisk kładziony jest na zaprojektowanie strony internetowej na komputer stacjonarny, a następnie na inne urządzenia, takie jak smartfony i tablety. W przypadku brakujących funkcji programiści hojnie używają podkładek i wypełniaczy. Oczywiście istnieją ogromne biblioteki zapewniające szybki rozwój. Nie rozwiązuje to jednak problemu niezgodności przeglądarki. Czy uzasadnione jest angażowanie się w koncepcję projektową, która nie przynosi pożądanych rezultatów?

Nie jest trudno wdrożyć podejście projektowania mobilnego, w którym celem będzie zaoferowanie użytkownikowi mobilnemu tylko zamierzonych informacji na jego ekranie zamiast wszystkich rzeczy, które zabijają urządzenie. Łukasz Wróblewski po raz pierwszy przedstawił koncepcję tego podejścia do projektowania 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 ogólny czas ładowania. Jednak prawdą jest również, że strony internetowe są coraz cięższe dzięki treściom bogatym 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, co przeżywa, jest koszmarem. Wynika to z trudności w poruszaniu się po niekończących się niepotrzebnych reklamach. Usuń takie elementy treści, których można uniknąć, aby umożliwić użytkownikowi dostęp do głównej treści. Zwiększy to ruch w witrynie, ponieważ oprócz użytkowników z wysokiej klasy smartfonami, wielu będzie uzyskiwać 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 nadal jest to lepsze niż brak jakichkolwiek treści. Przynajmniej w takim przypadku użytkownicy uzyskają dostęp do podstawowych informacji o Twojej witrynie. Czy jest sens projektować stronę internetową w taki sposób, aby ograniczała ona jej potencjalny zasięg?

Z pewnością pogodzisz się z faktem, że czekanie w nieskończoność tylko po to, by sprawdzić stronę, nikogo nie ekscytuje. Według niektórych ankiet przeprowadzonych przez Akamai i Gomez.com, około 50% internautów oczekuje, że strona załaduje się w ciągu 2 sekund lub nawet krócej. Szanse na opuszczenie witryny są większe, jeśli witryna nie ł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 w serwisach społecznościowych, 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 Facebooka „Lubię to" wymaga skompresowanego kodu o wielkości 270 KB! Wymaga również wielu żądań HTTP. W zamian,

Wydajność witryny internetowej ma bezpośredni wpływ na wydajność firmy, a wolno responsywna witryna internetowa nigdy nie przynosi firmie nic dobrego. Wierzcie lub nie, ale większość użytkowników mobilnych nie jest zainteresowana szukaniem informacji ani czytaniem długich artykułów. Większość z nich wykorzystuje swoje urządzenia mobilne do łatwego dostępu do Facebooka, WhatsAppa, Twittera oraz do oddawania się zakupom online. Co więcej, mobile to już nie trend, to przyszłość.

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

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

Zapewnij wdzięczną degradację

W ciągu ostatnich kilku lat mogłeś natknąć się na nowe modne słowo w świecie responsywnego projektowania, a jest nim „pełna wdzięku degradacja”. Tak, płynna degradacja oznacza, że ​​nawet jeśli funkcja nie działa pomyślnie, powinna zawieść w sposób, który ułatwia akceptowalną użyteczność. Oznacza to stworzenie projektu strony internetowej na komputer stacjonarny, a następnie stopniowe przechodzenie na tablety, smartfony i telefony stacjonarne. Wydajność responsywnego projektu, w którym witryna degraduje się z wdziękiem, z pewnością będzie wysoka, ponieważ doświadczenie użytkownika jest tutaj zawsze na najwyższym poziomie. Strona będzie działać pomimo wszelkich niedociągnięć, a odwiedzający z pewnością będzie pod wrażeniem ogólnej jakości.

Teraz możesz mieć w głowie to pytanie, co jest tak fascynującego w pełnej wdzięku degradacji. Odpowiedź jest prosta. Dzieje się tak dlatego, że sprawia, że ​​Twoje treści są widoczne i czytelne niezależnie od przeglądarki, co jest niezwykłym osiągnięciem! Na szczęście, jeśli używasz CSS3, pełna wdzięku degradacja staje się łatwym zadaniem, ponieważ większość właściwości CSS3 degraduje się automatycznie, np.

Miejmy przykład wdzięcznej degradacji. Załóżmy, że zaprojektowałeś responsywną stronę internetową z funkcjami JavaScript, a te funkcje 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 zgrabna degradacja pozwala przeglądarce wyświetlać zawartość w tagu „noscript”.

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

<noscript>
<h1>Dear John, you have encountered a problem!</h1>
<p>Your browser lacks support for JavaScript or is temporarily disabled.
Visit our <a href="/support/browsers/">browser support</a> for help.</p>
</noscript>

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 przy użyciu Flasha, a nawet jeśli Flash nie jest zainstalowany, otrzymasz wiadomość, aby zainstalować to samo na 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 niektórymi elementami projektu, jeśli używasz przestarzałych przeglądarek. Myślę, że wcześniejsze określenie podstawowych elementów wizualnych witryny może załatwić sprawę.

Nie ma potrzeby przechowywania nieużywanych bibliotek

Jedną z najlepszych praktyk może być rezygnacja z przechowywania 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 jest tego warte. Czasami mogłeś zauważyć, że po włączeniu biblioteki używasz tylko jednej funkcjonalności. Czasami może to być nawet dwa lub trzy. Najczęściej używanym narzędziem do tworzenia responsywnego projektu 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 dobrą praktyką będzie przeanalizowanie, które biblioteki są używane iw jakim stopniu.

Sprawdź dostępność funkcji

Możesz sprawdzić, czy Twoje urządzenie obsługuje określoną funkcję, zanim ją aktywujesz. Na przykład zdarza się, że pomimo zainstalowania najnowszej wersji Google Chrome na swoim przestarzałym telefonie z Androidem, nadal nie wyświetla on Twojej witryny. Czasami, próbując załadować taką stronę, przeglądarka ulega tak poważnej awarii, że całe urządzenie mobilne przestaje odpowiadać. Musisz ponownie uruchomić urządzenie, a to ostatnia rzecz, której pragniesz, prawda? Wielu użytkowników niektórych aplikacji internetowych już cierpi z powodu tego problemu.

Niedostępność funkcji na urządzeniach, a mimo to projektowanie stron internetowych lub aplikacji spowodowało 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 starszych wersji smartfonów z Androidem, ale prawdą jest również, że takie urządzenia są nadal dostępne od ręki jako fabrycznie nowe w każdym sklepie mobilnym. Wielu użytkowników mobilnych ma ten sam problem z wydajnością w aplikacjach YouTube i Twitter. Nawet aktualizacja usługi Google Android System Webview za pośrednictwem Google Play zawiesza wiele smartfonów, stając się swego rodzaju koszmarem użytkowników.

Zoptymalizuj obrazy

Dołączenie atrakcyjnych wizualnie dużych obrazów jest zawsze kuszące dla projektantów. Problem pojawia się, gdy nie kompresują tych obrazów przed załadowaniem ich do CMS. Jest to szczególnie prawdziwe w przypadku wielu witryn handlu elektronicznego w Internecie. Zgodnie z ostatnimi badaniami przeprowadzonymi przez firmę Radware, strony stają się coraz większe, a około 45 procent ze 100 najpopularniejszych witryn detalicznych nie stosuje kompresji obrazu. To sprawia, że ​​takie witryny są bardziej obszerne, aw rezultacie czas ładowania się wydłuża, ale jako projektant możesz uniknąć problemu.

Twórz obrazy o mniejszym rozmiarze, używając odpowiedniego narzędzia do optymalizacji obrazu. W rzeczywistości nie brakuje takich narzędzi w sieci. Niektóre z godnych uwagi gier, 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 pozbądź się zbędnych metadanych. Konwersja grafiki do formatu PNG, bogatych w kolory obrazów do formatu JPEG i animowanych do formatu GIF również załatwia sprawę.

Przygotowany na ekstremalne przypadki

Kiedy zaczynałeś projektować, zapewne zauważyłeś, że kusi cię projektowanie stron, które są łatwiejsze. Przynajmniej pozwala to pokazać coś interesariuszom. Na pierwszy rzut oka może się to wydawać miłe, ale jeśli skoncentrujesz swoje wysiłki na najbardziej wymagających scenariuszach, na początku uzyskasz dobry wynik.

Na przykład strona internetowa zawierająca artykuły, blogi i komunikaty prasowe. Musi mieć też tytuł. A co się stanie, jeśli miejsce tytułowe, o którym myślałeś, że ma pokazać „Wskazówki dotyczące projektowania responsywnych stron internetowych”, musi zawierać tytuł „10 podstawowych wskazówek i technik skutecznego projektowania responsywnych witryn internetowych”? To jest skrajny przypadek.

Wysiłek taki jak powyżej, aby zoptymalizować wydajność responsywnej strony internetowej, wydaje się niewidoczny. Jednak wysiłki te przynoszą dobre zyski w postaci szczęśliwych i zadowolonych użytkowników. 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 istotnego aspektu testowania, aby upewnić się, że Twoja responsywna witryna działa zgodnie z oczekiwaniami. Przetestuj go na jak największej liczbie rzeczywistych urządzeń.

Możesz także skorzystać z zasobów takich jak Screenfly, które umożliwiają przetestowanie Twojej 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 napocić, aby czerpać korzyści. W dzisiejszych czasach stworzenie responsywnej strony internetowej 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ś poszukać więcej rozwiązań i możesz mocno naciskać, aby dostarczyć witrynę internetową o responsywnej wydajności.