Blog

jak przyśpieszyć stronę internetową

Każda sekunda ma znaczenie. Jeżeli Twoja strona ładuje się dłużej niż 3 sekundy, to średnio 40% użytkowników zrezygnuje z jej odwiedzenia. Również współczynniki konwersji dla stron spadają wraz ze wzrostem czasu ładowania [infografika].

Jak widać czas ładowania strony www to być albo nie być dla jej właściciela. Co zrobić, żeby go poprawić? Najprostszy sposób to odchudzić stronę, czyli zmniejszyć ilość danych, jakie muszą być pobrane, żeby strona poprawnie się wyświetliła. Pokażę kilka technik, które pomogą przyśpieszyć stronę internetową i uchronić Cię i Twoich klientów od niepotrzebnych frustracji.

 

Obrazy

Grafiki i zdjęcia to „najcięższa” część strony. Im obraz ma więcej kilobajtów, tym więcej czasu zajmuje jego pobranie, a co za tym idzie tym dłużej ładuje się strona. Odpowiednio obrabiając i optymalizując grafiki pod daną stronę www, można je znacznie odchudzić. Zacznijmy więc dietę dla naszych obrazów i pomóżmy im zrzucić zbędne kilobajty.

Dołącz do 100 tysięcy ludzi, którzy tworzą szybkie strony za darmo i bez kodowania

Zbuduj własną, responsywną stronę www. Zacznij od pustego projektu lub wybierz jeden z kilkudziesięciu darmowych szablonów. 

STWÓRZ SWOJĄ STRONĘ ZA DARMO 

Rozdzielczość

Tak wiem. Obrazy o szerokości 5000 pikseli wyglądają rewelacyjnie i można na nich przeczytać co koleś w przedostatnim rzędzie ma na koszulce. Niestety takie obrazy na ogół zajmują też kilka albo i kilkanaście megabajtów. Pierwszym etapem naszego odchudzania będzie więc dostosowanie rozdzielczości obrazu do rozmiaru, jaki mają mieć na stronie.

Obraz na stronie ma mieć szerokość 500 pikseli? Zapisz go tak, aby miał 500 pikseli szerokości. Zrobisz to łatwo w popularnych programach jak Photoshop lub darmowe GIMPPaint.net, czy nawet w bardzo prostym Irfanview. Ponieważ monitory 4k zyskują na popularności, można się pokusić i zrobić obraz dwa razy większy niż będzie na stronie, aby i na tych monitorach wyglądał doskonale. Pamiętaj, im większa rozdzielczość, tym większy rozmiar pliku.

Pierwszym etapem naszego odchudzania będzie więc dostosowanie rozdzielczości obrazu do rozmiaru, jaki mają mieć na stronie.

W WebWave zalecamy korzystać ze zdjęć o dwukrotnie większej rozdzielczości niż ich ostateczny rozmiar na stronie, gdyż podczas publikacji są one kompresowane, żeby oszczędzić jeszcze więcej miejsca i na zdjęciach w bardzo małej rozdzielczości będzie to widoczne.

 

Format pliku

Tutaj sprawa jest prosta. Wybieramy w zasadzie spośród dwóch najpopularniejszych formatów, czyli JPEG i PNG. Ostatnio zyskuje też na popularności format SVG

JPEG z nich jest formatem stratnym. Oznacza to, że część danych obrazu jest tracona, aby zmniejszyć rozmiar pliku. Ten format nadaje się do wszelkiego rodzaju zdjęć i obrazów, w których jest dużo kolorów. Zapisując plik JPEG, można wybrać jego jakość, czyli jak dużo danych może zostać utraconych. Jakość pomiędzy 30, a 60 pozwala zachować równowagę pomiędzy wglądem a rozmiarem zdjęcia.

Ciekawą sztuczką, która pozwala uzyskać ostrzejsze obrazy, jest podwojenie wielkości obrazu, przy jednoczesnym obniżeniu jakości. Obraz o szerokości 500 pikseli i jakości 60% będzie ważył mniej więcej tyle samo co obraz o szerokości 1000 pikseli i jakości 30%. Jednak ten drugi renderowany na stronie do rozdzielczości 500 pikseli będzie wyglądał lepiej.

 

zdjęcie na szybszą stronę www zdjęcie na szybszą stronę internetową
Oba zdjęcia są w formacie JPEG. Po lewej zdjęcie o oryginalnej szerokości 300 px i jakości 60%, a po prawej szerokości 600 px i jakości 30%, zmniejszone na stronie do rozmiaru 300 px. 


PNG to format, który jest bezstratny i pozwala zachować najlepszą jakość obrazu. Niestety przez to obrazy w formacie png często dużo ważą. Ten format za to doskonale spisuje się przy obrazach, które mają małą liczbę kolorów, jak np. logo, czy prosty banner reklamowy. W tego typu obrazach można uzyskać bardzo dobrą jakość, przy bardzo małym rozmiarze pliku. PNG ma też ogromną zaletę, gdyż można w nim zapisać przeźroczystość. Jeżeli wiec chcesz obraz, którego część ma być przeźroczysta od razu sięgnij po format PNG. Jest to często wykorzystywane przy dodawaniu logotypów na stronę internetową (zobacz nasze logo na górze strony). W przypadku plików JPEG ten efekt jest niemożliwy.

Format PNG ma dwa subformaty PNG-24 i PNG-8. Różnią się one ilością kolorów, jakie może mieć obraz. Jeżeli nie jesteś pewien, który będzie lepszy, zapisz w formacie, jaki będzie domyślny, a zaraz pokażę Ci narzędzia, które samo poprawi format Twojego obrazu.

 

Dostosuje rozmiar zdjęcia do rozmiaru ekranu

Tworząc wersję mobilną strony albo projekt responsywny możesz mieć zdjęcia w zupełnie innych rozmiarach niż w wersji na komputery. Na 4 calowy ekran wystarczą mniejsze zdjęcia niż na 27 calowy monitor. Warto poświęcić chwilę i zrobić wersje zdjęć o mniejszej rozdzielczości dla swojej strony na urządzenia mobilne.

 

Dodatkowe odchudzanie

Teraz już wybrałeś odpowiednie formaty i ustawiłeś odpowiednie rozmiary zdjęć. Przed umieszczeniem ich na stronie można pozbyć się jeszcze kilku nadmiarowych kilobajtów, korzystając z darmowych narzędzi, które poprawią je jeszcze bardziej. Te narzędzia to tinypng.comtinyjpg.com.  pomogły mi zaoszczędzić setki megabajtów w rozmiarze zdjęć. Po prostu wrzucasz zdjęcie, dzieje się magia i dostajesz zdjęcie o mniejszym rozmiarze, które wygląda tak samo. No dobra, tak naprawdę to nie magia, a trochę sprytnej automatyzacji, ale nie musisz znać szczegółów. Najważniejsze, że działa, a panda się cieszy.
zmniejszenie obrazów screenshot

JavaScript i CSS

Oprócz zdjęć podczas pobierania strony pobierane są też skrypty JavaScript i pliki CSS. One też potrafią sporo ważyć i warto zminimalizować ich rozmiar. Są do tego świetne narzędzia, które usuną wszystkie niepotrzebne białe znaki, komentarze i skrócą długie wyrazy, zachowując jednocześnie pełną funkcjonalność kodu. Potrafią zmniejszyć rozmiar plików CSS i JS od 30% do nawet 90%. 

Przykładowe narzędzia to:

 

Jeżeli korzystasz z WebWave, to nie musisz się tym przejmować, gdyż kod Twojej strony jest automatycznie optymalizowany podczas publikacji.

 

Ciesz się poprawioną szybkością

Zanim zaczniesz optymalizować pliki ze swojej strony, sprawdź, jak szybko się ona ładuje za pomocą Pingdom Website Speed Test. Potem wykonaj optymalizację wszystkich elementów i sprawdź, jaka nastąpiła poprawa i pochwal się w komentarzu.

Sposobów na zadbanie o szybkość strony jest wiele, a te wspomniane tutaj to tylko wierzchołek góry lodowej. Podziel się swoimi sposobami w komentarzu.

 

Interesujesz się budowaniem i przyśpieszaniem stron www? Mamy coś specjalnie dla Ciebie: 

 

Autor:  Andrzej Szelemetko

Jak przyspieszyć stronę internetową - kilka prostych porad

24 września 2015

Darmowe szkolenie z tworzenia stron internetowych bez kodowania

WYPRÓBUJ ZA DARMO

Wypróbuj nasz kreator stron internetowych i uzyskaj dostęp do darmowego szkolenia. Po rejestracji wyślemy Ci e-maila z linkiem do zapisu na szkolenie on-line. Na godzinnym szkoleniu dowiesz się jak samodzielnie i w prosty sposób zrobić stronę internetową.

 

Kreator stron www WebWave umożliwia tworzenie stron www z pełną swobodą. Strony internetowe możesz tworzyć zaczynając od czystej karty lub wykorzystując szablony www. Strona internetowa za darmo? To łatwe - zacznij już teraz.

Panel webmastera

KONTAKT

contact@webwavecms.com

KREATOR

OFERTA

DLA KLIENTÓW

WEBWAVE

MATERIAŁY

Ta strona została stworzona w całości przy użyciu naszego kreatora stron www WebWave. Na tej stronie wykorzystujemy ciasteczka. Dowiedz się więcej.

PL

EN

POZNAJ NAS BLIŻEJ W SIECI

Zacznij Teraz

RO

Porozmawiaj z nami na czacie.

ZACZNIJ TERAZ

PANEL WEBMASTERA

Logowanie