7 porad, jak przyspieszyć swoją stronę już dziś
Każdy uwielbia fajną małą animację ładowania, prawda? Ale jeśli ten divot trwa dłużej niż sekundę lub dwie, zwraca uwagę tylko na to, że strona ładuje się powoli. I to jest zabójca strony.
Użytkownicy oczekują, że strony będą ładować się szybko i wydajnie. Twoim zadaniem jest upewnić się, że projekt jest nie tylko przyjemny wizualnie, ale także w 100% funkcjonalny. Jeśli Twoja witryna nieco się przeciąga, możesz teraz przestać się martwić, ponieważ mamy siedem wskazówek, które pomogą Ci przyspieszyć witrynę z drobnymi poprawkami do projektu. (Pamiętaj, aby odwiedzić wszystkie witryny przedstawione w poście; wyglądają świetnie i błyskawicznie ładują).
Poznaj elementy Envato
1. Zadbaj o animacje
Animacja w projektowaniu stron internetowych to jeden z trendów w 2015 roku. Nie daj się pominąć, tworząc ogromne pliki, które po prostu się nie załadują. Zacznij od mniejszych animacji, gdy zaczniesz pracować z tego rodzaju efektem, i przejdź do większych animacji po tym, jak dobrze poczujesz, jak działają i działają z ogólną strukturą witryny.
Kluczem do animacji nie jest ładowanie wiązki plików wideo na twoją stronę. Im mniejsza animacja, tym łatwiej jest stworzyć coś z niewielkim śladem. Więc od czego zaczynasz?
Zrób coś prostego i przyjemnego, na przykład utwórz animowany stan najechania kursorem. Posiadanie przycisku zmiany koloru lub rozwinięcia to sprytny efekt, który pomoże opanować CSS i poczuć podstawową animację przed przejściem do większych elementów. Możesz również rozważyć animacje ładowania AJAX lub paralaksy. Zaletą każdej z tych opcji jest to, że dajesz czas na ładowanie elementów, nawet jeśli użytkownik ich nie zauważy. Ponieważ elementy ładują się, gdy użytkownicy przewijają się, zyskujesz kilka cennych sekund na przygotowanie wszystkiego.
2. Zoptymalizuj obrazy
Ponieważ liczba wyświetlaczy HD i wyświetlaczy siatkówki jest dostępna dla użytkowników, podczas tworzenia witryny może pojawić się pokusa, aby załadować wszystkie obrazy w pełnym rozmiarze w wysokiej rozdzielczości. Nie wpadnij w tę pułapkę. Większość z tych obrazów jest prawdopodobnie zbyt duża, aby witryna mogła je skutecznie obsługiwać.
Poznaj swoje typy plików. Najpopularniejsze formaty plików obrazów w Internecie to JPG, PNG, GIF i SVG.
- JPG: najlepiej nadaje się do zdjęć, pliki JPG mogą mieć rozmiar od małego do ogromnego. Podczas zapisywania plików JPG do użytku w witrynie pamiętaj o zapisaniu zoptymalizowanego pliku. (W Adobe Photoshop możesz optymalizować obrazy do Internetu, korzystając z ustawień eksportu w menu Plik> Eksportuj> Eksportuj jako.)
- PNG: użyj tego formatu pliku dla obrazów zawierających tekst, aby litery były dobrze renderowane. Zazwyczaj jest to raczej mały plik.
- GIF: Preferowany format pliku dla mniejszych animowanych elementów, takich jak zawsze popularny animowany obraz w stylu memów. Ale uwaga, ten format pliku może być ciężki, jeśli nie będziesz ostrożny.
- SVG: Jeśli potrzebujesz obrazu wektorowego dla sieci, jest to najlepsza opcja. Może być używany do wszystkiego, od ikon po logo.
3. Użyj kodu tam, gdzie to możliwe
Możesz pokusić się o utworzenie sprytnych ikon i obrazów dla swojej witryny i ładowanie każdego z nich jako osobnego elementu. Może to powodować pewne problemy. Zamiast tego użyj kodu, aby wywołać te elementy, jeśli to możliwe.
Użyj CSS, aby załadować również obrazy tła. To „zmusi” Twoją stronę do załadowania wszystkiego poza tłem, dzięki czemu użytkownicy będą mogli od razu zobaczyć inne elementy i tekst w witrynie. W3Schools ma świetny i prosty samouczek, jak to zrobić.
Istnieje wiele narzędzi, od ikon Font Awesome po mnóstwo innych bibliotek CSS i JavaScript, których można używać do tworzenia świetnych elementów z lekkimi zabawnymi efektami. (CSS Design Awards ma wyjątkowo fajną kolekcję 30 przycisków i elementów formularza do wypróbowania).
4. Filmy powinny być krótkie
Kolejnym modnym elementem projektowania stron internetowych jest korzystanie z pełnoekranowego wideo na stronie głównej. Może to być kolejna pułapka czasowa ładowania. Przekonasz się między jakością wideo, treścią wideo a szybkością i będziesz musiał gdzieś poświęcić.
Najlepsze filmy są super krótkie - zaledwie kilka sekund - i zapętlają się, aby akcja się nie zatrzymała. Nie musisz też dołączać dźwięku ani innych efektów.
Możesz wypróbować kilka innych sztuczek, aby maksymalnie zmniejszyć rozmiar pliku.
- Pomyśl o kolorowej nakładce lub rozmyciu obrazu wideo o niższej rozdzielczości. Może nadal wyglądać schludnie, ale nie wymaga tak dużej przepustowości.
- Rozważmy wideo o rozmiarze mniejszym niż pełny ekran.
- Porzuć autoodtwarzanie, które może „nakłonić” użytkowników do myślenia, że witryna ładuje się szybciej niż jest w rzeczywistości.
- Nie utknij z długimi filmami. Jeśli chcesz wyświetlić wiele klipów wideo, rozważ element „suwak” wideo lub ręcznie zmieniaj filmy zgodnie z harmonogramem, aby użytkownicy zobaczyli coś nowego za każdym razem, gdy odwiedzają witrynę. (Bez względu na to, jak dobry jest twój klip, niewielu użytkowników obejrzy więcej niż kilka sekund, więc nie poświęcaj czasu ładowania na dłuższe klipy).
5. Pomyśl o temacie
Jeśli używasz WordPress lub innego systemu zarządzania treścią z motywem, pamiętaj, że nie wszystkie motywy są takie same. Podczas gdy prawdopodobnie będziesz mieć więcej szczęścia dzięki opcji premium - z których niektóre pozwalają „wyłączyć” nieużywane elementy - przyjrzyj się kodowi i zbuduj, aby upewnić się, że to nie jest coś, co powoduje, że twoja strona się zawodzi.
6. Obserwuj swoje wtyczki
Czy masz mnóstwo wtyczek lub aplikacji innych firm powiązanych z Twoją witryną? Czy aktywnie korzystasz z nich wszystkich? Wyłącz nieużywane wtyczki, aby zoptymalizować wydajność.
Użytkownicy WordPress mogą skorzystać z Plugin Performance Profiler, aby zobaczyć, które wtyczki są aktywne i jak działają. Może to pomóc w rozwiązywaniu problemów i identyfikowaniu problemów oraz usuwaniu lub ponownej konfiguracji tych wtyczek. (Częstym problemem są często wtyczki do udostępniania społecznościowego).
7. Kompresuj, Kompresuj, Kompresuj
Poszczególne elementy witryny powinny być nie tylko kompresowane, ale można również kompresować witrynę jako całość, aby zapewnić jej szybkie działanie. Do elementów, które można skompresować, należą pliki CSS i JavaScript, obrazy i wideo (przez zmianę rozmiaru) oraz witryna, jak na razie za pomocą narzędzia takiego jak GZIP.
Zminimalizowane pliki to najlepsza droga, jeśli chodzi o wtyczki i tworzenie mniejszych plików. Chcesz również sprawdzić, jak kod jest zaprojektowany w witrynie. Aby uzyskać maksymalną prędkość, cały JavaScript powinien być zawarty w jednym pliku, a cały CSS powinien być zawarty w innym pliku. (Jeszcze jedna uwaga: liczy się także miejsce, w którym umieścisz ten kod. Link CSS na górze strony i JavaScript na dole, aby również zwiększyć szybkość witryny).
Wniosek
Czy Twoja strona ładuje się wystarczająco szybko? Jeśli nie, nadszedł czas, aby go dostosować, aby uzyskać optymalne czasy ładowania. (Jeśli musisz w ogóle pomyśleć o tym pytaniu, prawdopodobnie Twoja witryna nie jest wystarczająco szybka).
Strony internetowe muszą być szybkie, aby użytkownicy mogli natychmiast wchodzić w interakcje. Im dłużej trwa ładowanie strony, niezależnie od urządzenia, tym bardziej prawdopodobne jest, że użytkownicy całkowicie opuszczą witrynę. Poświęć kilka minut dzisiaj lub w tym tygodniu i przejrzyj tę listę, aby upewnić się, że Twoja witryna działa na optymalnym poziomie.
Źródło obrazu: Mohammed Al-Sultan .
