Jak zaprojektować interfejs zbudowany z myślą o szybkości
Czy Twoja strona jest powolna? Bądź szczery. Czy może być szybciej? Użytkownicy wymagają witryn, które ładują się szybko i nadal dostarczają treści bez opóźnień. Jeśli twoja witryna jest najmniej opóźniona w zaspokojeniu tego żądania, użytkownicy mogą ją opuścić (i mogą nigdy nie powrócić).
Dzisiaj przyjrzymy się sposobom, aby upewnić się, że interfejs Twojej witryny jest zbudowany pod kątem szybkości, abyś nigdy więcej nie musiał się martwić o czas ładowania strony.
Poznaj elementy Envato
Sprawdź swoją witrynę
Zanim przejdziesz do „nie ma mowy, żeby moja strona działała wolno”, wypróbuj ją. Google ma świetne narzędzie, którego każdy może użyć do przetestowania dowolnej witryny internetowej, wprowadzając adres URL.
Dostajesz fajny raport, który mówi ci, jak szybko twoja strona się porusza i gdzie można ją ulepszyć. Warto okresowo uruchamiać test, aby upewnić się, że wszystko działa poprawnie. (Ponadto rozkłada wydajność na urządzeniach mobilnych i stacjonarnych oraz oferuje propozycje ulepszeń).
Raport zawiera trzy zalecenia - należy naprawić, rozważyć poprawkę i przekazać - dla następujących elementów:
- Buforowanie przeglądarki
- Optymalizacja obrazu
- Odpowiedź serwera
- Skrypty i CSS powyżej zakładki
- Kompresja
- Przekierowania
- Minimalizacja CSS, HTML i JavaScript
- Priorytetyzacja widocznych treści
Zrzuć niepotrzebne wtyczki
Czy trzymasz się wtyczek lub dodatków, których po prostu nie używasz? Czas ich rzucić.
Nawet nieużywane elementy zmniejszają szybkość witryny. (Jest to szczególnie prawdziwe, jeśli pracujesz przy systemie takim jak WordPress.)
Przejdź do trybu czyszczenia i usuń nieużywane wtyczki. Powinieneś rozważyć także zastosowanie wtyczek i upewnić się, że faktycznie ich używasz lub że przyczyniają się one do ogólnego komfortu użytkowania, jeśli nie znajdziesz lepszej opcji.
Oprócz liczby wtyczek istotna jest także jakość. Nie dodawaj tylko starej wtyczki do swojej witryny. Spróbuj znaleźć elementy, które zapewniają rzeczywistą wartość i są wysoko oceniane. Stare, nieaktualne elementy mogą również przeciągać witrynę w dół.
Udostępnij tylko w razie potrzeby
Kiedy myślimy o wtyczkach, ile przycisków udostępniania w mediach społecznościowych masz na swojej stronie? Teraz odpowiedz szczerze: ile tak naprawdę potrzebujesz?
Zbyt wiele z tych przycisków może być mylące dla użytkowników - ilu tak naprawdę zamierza udostępniać na wielu platformach - i zmniejszać prędkości i czas ładowania. (Jest to szczególnie prawdziwe w przypadku tych, którzy próbują dowiedzieć się, ile polubień, lub udostępnia już post z zapytaniami działającymi w obu kierunkach).
Wybierz jedną lub dwie sieci, w których jesteś aktywny i gdzie użytkownicy regularnie łączą się z Twoją witryną i zawierają te przyciski. Porzuć resztę. Oni tylko przeszkadzają.
Uważaj na przeciążenie obrazu
Wideo, ilustracje, zdjęcia i animacje… och, moje! Wszystkie te wspaniałe elementy wizualne mogą wydłużyć czas ładowania. Wybierz mądrze.
Przed dodaniem dowolnego elementu wizualnego do projektu witryny internetowej należy porównać jego wartość z innymi elementami. Czy zapewnia coś użytkownikom? Jeśli tak, kontynuuj. Jeśli nie, dlaczego używasz tego elementu projektu?
Powinieneś zoptymalizować wszystkie obrazy odpowiednio do Internetu. Zasadniczo obrazy powinny być tak duże, jak to konieczne. Nie przesadzaj i przesyłaj zdjęcia w pełnym rozmiarze. Interfejs użytkownika wymaga trochę pracy, ale będziesz zadowolony, że zrobiłeś to później (szczególnie jeśli Twoja witryna nadal się rozwija).
Skorzystaj także z innych sztuczek. Wypróbuj czcionki ikon zamiast ikon opartych na obrazie. Konwertuj elementy na SVG (format wektorowy skalowany), jeśli czcionka ikony nie działa. Używaj jak największej ilości „magii” HTML i CSS i nie psuj witryny za pomocą elementów, które ładują się jako zdjęcia, takie jak przyciski, strzałki i inne narzędzia interfejsu użytkownika.
Zdejmij ładunek za pomocą kurczliwych narzędzi
Małe pliki są kluczem do najwyższej prędkości. Saldo polega na tym, że wyświetlacze o wysokiej rozdzielczości umożliwiają udostępnianie i prezentowanie treści w najwyższej jakości. Tam właśnie pojawiają się kurczące się narzędzia.
Jeśli nie czujesz się pewnie, czy potrafisz zmieniać rozmiar i zmniejszać - lub po prostu nie osiągasz pożądanego rezultatu - wypróbuj jedną z tych opcji, aby zmniejszyć rozmiar plików do najmniejszych możliwych rozmiarów.
- WP Smush zmniejsza obrazy dla użytkowników WordPress
- Kraken kompresuje obrazy dla wszystkich użytkowników
- TinyPNG jeszcze bardziej zmniejsza rozmiar wspólnego formatu
- Pliki pakietów Gzip dla optymalnej kompresji
- Zminimalizuj swój CSS zmniejsza ogólny rozmiar kodu i zawiera API
- SpriteMe zamienia obrazy tła w duszka CSS do zapisywania żądań HTTP
- Kompresor CSS zmniejsza ogólny rozmiar kodu
Po prostu buforuj
Włącz buforowanie w swojej witrynie.
Jeśli tego nie robisz, użytkownicy płacą cenę. Wciąż istnieje kilka osób, które mogłyby argumentować inaczej, ale wartość dla użytkowników przeważa nad tymi argumentami. Twoja strona musi być szybka.
Pamięć podręczna tworzy plik tymczasowy ze stron, aby przeglądarka „zapamiętywała” witrynę po powrocie użytkownika. Zmniejsza wykorzystanie przepustowości, obciążenie serwera i opóźnienie (rzeczywiste lub postrzegane). Użytkownicy będą Ci wdzięczni, szczególnie jeśli chodzi o dostęp do bardziej masywnych stron internetowych.
Czyść to regularnie
Podobnie jak musisz regularnie czyścić dom, musisz oczyścić i utrzymywać bazę danych witryny, linki i pliki.
Oto elementy listy kontrolnej czyszczenia witryny:
- Zoptymalizuj swoją bazę danych. Z czasem twoja baza danych może zostać zatkana przez poprawki, nieużywane zdjęcia i zapisane dane. Nie musisz tego wszystkiego trzymać. Usuń elementy, które nie są już częścią Twojego planu witryny.
- Nie łącz obrazów w trybie hotlink. Wyciąganie zdjęć z witryny (i serwera) innej osoby do twojej jest po prostu złym pomysłem. I to jest powolne. To samo dotyczy prawie każdego innego zewnętrznego żądania pliku. Używaj ich tylko w razie potrzeby.
- Napraw linki. Uszkodzone linki mogą nie spowalniać Twojej witryny, ale spowalniają połączenia użytkowników z Twojej witryny do innych miejsc, co może być równie złe. Nabierz nawyku sprawdzania i poprawiania uszkodzonych linków.
- Aktualizuj wszystko. Jeśli korzystasz z platformy takiej jak WordPress, weź aktualizacje. Jeśli używasz motywu lub elementów w ramkach dowolnego typu, to samo jest prawdą. Aktualizacje mogą zawierać łatki, które zwiększają szybkość, a także chronią twoją stronę przed potencjalnymi zagrożeniami. (I nic nie jest wolniejsze niż witryna zhakowana lub zainfekowana złośliwym oprogramowaniem).
Wniosek
Teraz przejrzyj powyższą listę i wróć do narzędzia Google Pagespeed Insights. Uruchom ponownie. Czy widzisz różnicę?
Nic nie sprawi, że użytkownik będzie szczęśliwszy i bardziej skłonny do powrotu do Twojej witryny, niż wspaniałe i szybkie doświadczenie. Na wszystkich etapach projektowania wizualnego pamiętaj o przemyśleniu interfejsu, aby Twoja witryna była zbudowana z myślą o szybkości.
