Twój e-mail
Zapisz się!
Zapisz się!
Udało się!
Podaj e-mail!

Blog

Tu dowiesz się, jak zrobić stronę internetową.

Chcesz być na bieżąco?

projektowanie stron www

Każda sekunda ma znaczenie w internecie. Szybkość ładowania strony jest naprawdę ważna. Zwłaszcza jeśli zależy Ci na obniżeniu współczynnika odrzuceń i poprawie user experience.

Jeżeli Twoja strona ładuje się dłużej niż 3 sekundy, to średnio 40% użytkowników zrezygnuje z jej odwiedzenia. Na takiej stronie spada też znacznie współczynnik konwersji, który trzeba przecież optymalizować!

Z tego artykułu dowiesz się, dlaczego szybkość ładowania strony www jest ważna i jak ją poprawić. Opiszę kilka sprawdzonych rozwiązań i rzeczy, na które musisz zwrócić uwagę.

 

Czym jest szybkość ładowania strony?

Czas ładowania strony www to czas między wpisaniem adresu strony lub kliknięciem w link, a całkowitym wczytaniem strony w przeglądarce.

Szybkość wczytywania strony jest uzależniona od wielu czynników.

Warto wymienić te najważniejsze: wielkość obrazów, optymalizację strony i jej kodu (poprawność semantyczna), szybkość i lokalizacja serwerów, na których stoi strona, czy ilość skryptów, które musi wczytać przeglądarka. Im dłuższy czas wczytywania strony, tym gorzej – dla Twojej strony (a zwłaszcza jej konwersji) i użytkownika.

Chociaż szybkość strony, wbrew niedawnym pogłoskom, nie jest czynnikiem wpływającym na pozycjonowanie stron, to jednak zachowanie użytkowników – już ma. Dlatego nie warto zmuszać nikogo do czekania i zrobić stronę, która ładuje się szybko i nie trzeba na nią czekać.

Dołącz do 180 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 

Jak poprawić szybkość wczytywania strony?

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 i czekania.

Niektóre z nich dotyczą działań na stronie i mogą dotyczyć optymalizacji kodu (lub szukania sposobu na jego optymalizację). Warto wspomnieć, że wszystkie te rzeczy zamykają się w szerszym temacie optymalizacji strony internetowej.

W  WebWave wszystkie grafiki na stronach są automatycznie kompresowane, dzięki czemu załadowanie ich zajmuje mniej czasu. Ale wciąż warto zrobić kilka rzeczy, żeby to przyśpieszyć.

Pierwszym etapem odchudzania będzie dostosowanie rozdzielczości obrazu do rozmiaru, jaki ma mieć na stronie.

Optymalizacja grafik i zdjęć na stronie

Grafiki i zdjęcia to „najcięższa” część strony. Przeglądarka potrzebuje najwięcej czasu na ich pobranie. A im więcej kilobajtów, tym dłuższy czas pobierania.  Do tego grafiki na stronie najłatwiej odchudzić na każdym etapie robienia czy prowadzenia strony.

 

Rozdzielczość grafik, czyli mniejsze równa się lżejsze (i szybsze)

Optymalizację grafik na stronie należy zacząć od wyboru ich odpowiedniego rozmiaru. Im więcej pikseli ma zdjęcie (czyli – im większą ma rozdzielczość), tym dłużej zajmuje pobranie go. Mało który wyświetlacz ma rozdzielczość większą niż 1920 na 1080 (FullHD), czyli wrzucanie na stronę zdjęć o rozdzielczości większej mija się z celem.

Możesz pójść o krok dalej i dodawać zdjęcia o maksymalnej szerokości 1600 pikseli. Kolejnym krokiem jest dopasowanie rozmiaru grafik na stronie do ich celu. Zdjęcia w nagłówku artykułu czy na całą szerokość strony mogą mieć 1600, czy nawet 1900 pikseli szerokości. Ale grafiki w bryle tekstu na blogu mogą być mniejsze (np. 800 pikseli), a grafika z logiem nie musi być w dużej rozdzielczości.

Ważne: lepiej żeby grafiki miały poniżej 100 KB rozmiaru.

 

jak poprawić szybkość ładowania strony www  

Formaty plików, które pomogą Ci przyśpieszyć ładowanie strony www!

Warto też zastanowić się nad dobrym formatem grafik. Najpopularniejszy jest oczywiście .jpg, który pozwala na zapisywanie zdjęć i grafik o dobrej jakości (dzięki kompresji) i stosunkowo niewielkiej wadze. Jest to format stratny, czyli w wyniku kompresji część danych obrazu jest tracona, żeby zmniejszyć rozmiar pliku.

Zapisując plik JPEG, można wybrać jego jakość, czyli jak dużo danych może zostać utraconych. Jakość pomiędzy 50 a 70 pozwala zachować równowagę pomiędzy wglądem, a rozmiarem zdjęcia. Powyżej jakości 70 grafiki robią się już za duże i za długo będą się wczytywać.

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 baner reklamowy.

W tego typu obrazach można uzyskać bardzo dobrą jakość, przy bardzo małym rozmiarze pliku. Format .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 .jpg 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. Do ornamentów czy grafik, które mogą być zapisane jako krzywe, użyj formatu .svg (wektorowego). Nasz kreator obsługuje ten format, więc możesz zrobić stronę w oparciu o projekt zrobiony w programach do makietowania i przyśpieszyć ładowanie strony!

 

Dostosuj rozmiar zdjęcia do rozmiaru ekranu

Tworząc stronę responsywną możesz uwzględnić inne rozmiary grafik dla poszczególnych widoków. Oznacza to, że tworząc stronę możesz dobrać grafiki tak, żeby ładowały się tylko w konkretnej wersji strony. Czyli strona na telefonie nie będzie ładowała takiej samej ilości zdjęć jak w wersji na komputer.

To znacznie przyśpieszy działanie i skróci czasy ładowania strony na urządzeniach mobilnych. Warto o tym pamiętać, bo to jedna z dobrych praktyk przy projektowaniu stron responsywnych. Rozmiar grafik i ich wielkość dostosujesz chociażby w programach graficznych (GIMP, Photoshop), czy kombajnach do przeglądania grafik (InfranView).

 

Dodatkowe odchudzanie i przyśpieszanie ładowani strony

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.com i tinyjpg.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

Optymalizacja ładowania 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%. To ważne, zwłaszcza gdy masz na stronie skrypty zewnętrznych narzędzi – warto się tym zainteresować. W WebWave zadbaliśmy o to i umożliwiamy ręczną optymalizację skryptów, dzięki czemu Twoja strona będzie ładowała się szybciej, a skrypty wyszukiwarka wczyta na końcu.

 

Optymalizacja kodu (zadbanie o semantykę, usunięcie niepotrzebnych linii kodu)

To kolejna rzecz, o którą warto zadbać. Wiele narzędzi pozwala na ręczną optymalizację kodu strony, jednak trzeba uważać przy wyborze, żeby kod nie stracił na poprawności semantycznej.

Przeglądarki lubią zrozumiały kod i szybciej wczytują ten, w którym nie ma błędów. Strony zrobione w WebWave mają kod optymalizowany w locie, dzięki temu nie musisz martwić się o jego czyszczenie.

 

Inne przydatne sposoby na przyśpieszenie strony

Jest ich kilka i dotyczą one też obszaru poza stroną www. Bardzo popularnym sposobem na przyśpieszenie ładowania jest lazy loading, czyli opóźnione ładowanie grafik, które nie są widoczne na stronie. Kolejne obrazy ładują się dopiero w momencie, w którym pojawią się w widocznym obszarze strony.

To znacznie przyśpiesza ładowanie samej strony! W WebWave wszystkie strony mają tę funkcję, nie musisz nic robić. Kolejnym patentem jest wybór dobrego serwera na stronę. Pamiętaj, że czasy ładowania stron w różnych miejscach mogą się znacznie różnić.

Czyli strona, która jest przechowywana na serwerach w Polsce będzie ładowała się wolniej, gdy ktoś chce ją sprawdzić w… na przykład w Australii. Niestety – fizyki się nie oszuka, podobnie jak odległości. Warto o tym pamiętać. Do tego bardzo ważny jest krótki czas odpowiedzi serwera.  Pomaga znacznie zaoszczędzić czas na nawiązywanie połączenia z serwerem. 

Strony zrobione w WebWave mają czas odpowiedzi liczony w dziesiątych częściach milisekund :). 

 

Jak sprawdzić szybkość ładowania strony i znaleźć rzeczy do poprawy?

W internecie znajdziesz sporo narzędzi, które sprawdzą szybkość ładowania strony. Najpopularniejsze to GTmetrix i Google Page Speed. Pierwszy pomoże Ci znaleźć rzeczy do poprawy i optymalizacji, drugi – da Ci znać, czy strona ładuje się szybko na urządzeniach mobilnych. Warto się tym zainteresować, zwłaszcza że szybkość strony ma duże znaczenie dla użytkowników.Chcesz zrobić szybszą stronę internetową? Koniecznie sprawdź WebWave. W naszym kreatorze zrobisz szybką stronę www!

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

Autor:  Andrzej Szelemetko / Bartek Raducha

24 września 2015

Blog

Darmowe szkolenie z tworzenia stron internetowych 

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 stworzyć swoją stronę internetową!

Jak skutecznie przyśpieszyć stronę internetową? Kilka prostych porad

 

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 www bez kodowania? To łatwe - zacznij już teraz.

Panel webmastera

KONTAKT

contact@webwavecms.com
+48 731 395 898

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

ZACZNIJ TERAZ

PANEL WEBMASTERA

Logowanie