Jak przyspieszyć swoją stronę internetową
Czas ładowania strony ma ogromne znaczenie. Jeżeli Twoja strona ładuje się dłużej niż 3 sekundy, wiedz, że zainteresowanie nią znacznie spada. Mając to na uwadze warto zastanowić się nad jej kondycją. Oto 5 porad jak przyspieszyć swoją stronę internetową.
Prawda jest brutalnie prosta. Im dłuższy czas ładowania strony, tym większy spadek zainteresowania nią. Myślisz, że zwiększenie jej tempa wymaga znajomości programistycznej magii? Nic z tych rzeczy. Zaraz dowiesz się jak za pomocą kilku prostych sztuczek przyspieszyć swoją stronę internetową!
Mniej znaczy więcej
Odchudź stronę. Zmniejsz ilość danych, które ładują się podczas wyświetlania strony. Zdjęcia i grafiki znacząco obciążają ten proces. Im wyższy jakościowo obraz, tym więcej czasu zajmuje jego ładowanie. Zadbaj więc o optymalizację grafiki. Odpowiednio obrabiając zdjęcia pomożesz stronie wyrzucić to, co zbędne. Jak to zrobić?
Rozdzielczość
Tak, wiemy że grafiki, mające więcej pikseli wyglądają atrakcyjniej. Jednak ich ilość sprawia, że takie obrazy zajmują więcej megabajtów, co znacząco przekłada się na ładowanie strony. Zadbaj więc o odpowiednią rozdzielczość obrazu dostosowując go do rozmiaru jaki ma mieć na stronie.
Jeżeli obraz na stronie ma mieć 500 pikseli szerokości, wystarczy, że wgrasz jeden z programów do obrabiania grafiki i w nim edytujesz obraz. Nie musisz od razu inwestować w wymagającego Photoshopa. Wystarczą do tego darmowe programy takie jak GIMP, Irfanview czy Xnview. Ten ostatni to świetne narzędzie do masowej edycji obrazów. Pamiętaj, że im większa rozdzielczość, tym większy rozmiar pliku.
Format
Najpopularniejszymi formatami wciąż są JPEG i PNG.
JPEG to format stratny. Oznacza to, że traci część danych, gdy zmniejsza się rozmiar pliku. Format ten idealnie sprawdza się przy obrazach i zdjęciach, w których dominuje wiele kolorów.
Warto znać ciekawy sposób dzięki, któremu uzyskasz ostrzejsze obrazy. Wystarczy podwoić wielkość obrazu przy jednoczesnym obniżeniu jakości. Obraz o szerokości 500 pikseli i jakości 60% będzie ważył tyle samo, co obraz o szerokości 1000pikseli i jakości 30%. Ten drugi jednak renderowany do rozdzielczości 500 pikseli będzie się prezentował na stronie lepiej.
PNG jest formatem bezstratnym. Pozwala cieszyć się najlepszą jakością obrazu. Niestety obrazy w tym formacie często sporo ważą. PNG najlepiej wykorzystywać do obrazów, które nie są tak bogate w kolory. Stad idealnie sprawdzają się w przypadku logo czy prostych banerów reklamowych. Takie grafiki mogą mieć wysoką jakość i nie będą dużo ważyły. Kolejną zaletą PNG jest przezroczystość, którą można w nim zapisać. Jeżeli masz obraz, którego część ma być przezroczysta – nie wahaj się z wyborem. Taki format często jest wykorzystywany przy dodawaniu logotypów na stronę. Wykorzystując JPEG ten efekt byłby niemożliwy do zrealizowania.
Rozmiar
Przy mobilnych stronach, które będą się ładowały na przenośnych narzędziach, rozmiar grafik może być kompletnie inny niż na komputerach. Na kilku calowym ekranie wystarczą mniejsze zdjęcia niż na standardowym monitorze. Zrób więc wersje zdjęć o mniejszej rozdzielczości dla swojej strony na urządzenia mobilne.
Przydatne narzędzie
Po wybraniu odpowiedniego formatu i ustawieniu parametrów grafiki radzimy skorzystać z darmowego narzędzia, które wyciśnie z twojego zdjęcia jeszcze kilka zbędnych kilobajtów. Tym narzędziem jest tinypng. Wystarczy wejść na stronę, załadować zdjęcie i voila. Zdjęcie jest w jeszcze mniejszym rozmiarze a wygląda identycznie.
Pamiętaj o skryptach
W trakcie ładowania strony oprócz grafik pobierane są także skrypty JavaScript i pliki CSS. One również potrafią wydłużyć czas wczytywania więc warto zmniejszyć ich rozmiar. Do tego zadania również istnieją narzędzia, które usuną wszystkie niepotrzebne znaki, zachowując pełną funkcjonalność kodu. Warto się nimi zainteresować. Potrafią zmniejszyć rozmiar plików CSS i JavaScript nawet do 90%
Sprawdź takie narzędzia jak:
JSminifier – do JavaScriptu
CSSminifier – do CSS
refresh-sf – Uniwersalny
Na koniec
Przed optymalizacją wszystkich elementów na Twojej stronie, sprawdź jak szybko się one ładują. Posłuży Ci do tego Pingdom Website Speed Test. Po optymalizacji wszystkich plików odpal ponownie PWST i ciesz się wynikiem!
