window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-136328222-1'); gtag('config', 'AW-996560289'); (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-NHKJLQ5'); !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n; n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window, document,'script','https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '630810250454488'); fbq('track', 'PageView');

Jak tworzymy strony internetowe, których całkowity czas ładowania nie przekracza 3.5 sekundy?

Jak skrócić czas ładowania strony internetowej?

Obecnie większość użytkowników internetu korzysta ze stron internetowych za pomocą urządzeń mobilnych, telefonów i tabletów. Często robią to wykorzystując dane sieci komórkowej, nie będąc połączonym z szybkim i stabilnym łączem internetowym za pośrednictwem światłowodu lub sieci Wi-Fi. Pomimo tego, że współcześnie połączenie z internetem za pośrednictwem sieci komórkowej jest zwykle stabilne i szybkie (w szczególności w dużych miastach), zdarza się często, że mamy słaby zasięg i prędkość pobierania danych drastycznie spada. Dlatego niezmiernie ważne jest, by nasza strona internetowa była dobrze zoptymalizowana. Skrócenie czasu otwierania strony internetowej o 2 sek. może poprawić Twoje konwersje nawet o połowę!

W jaki sposób osiągamy tak dobre wyniki realizując strony internetowe dla naszych klientów?

Piszemy lekki i wydajny kod źródłowy

Budując stronę internetową odrzucamy gotowe szablony i kreatory stron, których zadaniem jest umożliwienie na jednym szablonie zbudowanie wielu różnorodnych stron www. Żeby było to możliwe, gotowy szablon np. dla systemu CMS WordPress, musi posiadać wiele linijek kodu, który opisuje wygląd każdego z wariantów wyglądu strony. Wybierając jeden z wariantów układu treści na stronie, wykorzystujemy jedynie niewielki procent kodu, a pozostała jego część jest niewykorzystywana.

Spersonalizowany pod potrzeby klienta projekt graficzny wraz z dedykowanym wdrożeniem zawiera tylko niezbędny kod, bez dodatkowego balastu. Piszemy kod strony internetowej ręcznie, bez wykorzystania wizualnych kreatorów, dzięki czemu mamy pewność, że kod jest napisany w najbardziej przemyślany i zoptymalizowany sposób.

Przed publikacją strony internetowej dokonujemy pełnej minifikacji kodu źródłowego, czyli usuwamy niepotrzebne znaki bez zmieniania funkcjonalności kodu.

Stosujemy powolne ładowanie obrazków (Lazy loading)

Najcięższym elementem na całej stronie internetowej są obrazki, dlatego wykorzystujemy tak zwane powolne ładowanie obrazków (lazy loading), które polega na pobieraniu z serwera tylko grafik, które są wyświetlane w danym momencie użytkownikowi, zamiast od razu pobierać wszystkie media z całego dokumentu strony internetowej. Podczas „przewijania” strony przez użytkownika, media są dynamicznie doładowywane w tle, czego przy odpowiedniej optymalizacji (niskiej wadze) plików graficznych, użytkownik nie jest wstanie dostrzec.

Ta metoda prezentacji mediów na stronie bardzo przyspiesza proces ładowania się strony internetowej, a w sytuacji gdy użytkownik straci połączenie z internetem, pozwala na pobranie i wyświetlenie samych treści z pominięciem grafik.

Praktyczna wskazówka dla zaawansowanych:
Jeśli korzystasz z CMS WordPress, możesz użyć sprawdzonego przez nas rozszerzenia BJ Lazy Load, które pozwoli Ci skonfigurować powolne ładowanie obrazków na stronie internetowej.

Korzystamy z pamięci podręcznej przeglądarki (pliki cache)

Pamięć podręczna przeglądarki pozwala zapisać część danych strony internetowej jak np. arkusz stylów CSS, pliki JavaScript, media na urządzeniu użytkownika. Dzięki temu podczas przeglądania strony lub powracający na stronę użytkownik nie musi za każdym razem pobierać tych samych plików, co bardzo znacząco skraca czas ładowania się strony przy następnych wizytach.

Korzystanie z podręcznej pamięci przeglądarki pozwala na skrócenie czasu ładowania się strony internetowej przy kolejnych wizytach użytkownika nawet o 70% (w naszym przypadku poniżej 1 sek.).

Praktyczna wskazówka dla zaawansowanych:
Jeśli korzystasz z CMS WordPress, zainstaluj rozszerzenie LiteSpeed Cache, za pomocą którego skonfigurujesz pliki cache swojej strony internetowej.

Skracamy czas odpowiedzi serwera

Rekomendujemy naszym klientom korzystanie z usług sprawdzonych i profesjonalnych firm hostingowych. Ze względu na popularność i powszechność systemu CMS WordPress, najlepsze firmy hostingowe oferuję dedykowane dla CMS WordPress środowisko pracy, na którym strona internetowa będzie działa szybciej i bezpieczniej.

Jan Kobiałka

Właściciel firmy, Programista stron internetowych

Jestem pasjonatem skutecznego i kreatywnego marketingu. Pomagam Firmom w ich promocji, wskazuję i realizuję dla nich nowe strategie działania. Prowadzę we Wrocławiu agencję interaktywną The Lion, a jako Front-end developer zajmuję się wdrażaniem dedykowanych stron i sklepów internetowych opartych na CMS Wordpress i WooCommerce.

Zobacz nasze realizacje

Używamy plików cookies i podobnych technologii m.in. w celach: świadczenia usług, reklamy, statystyk. Korzystanie z witryny bez zmiany ustawień Twojej przeglądarki oznacza, że będą one umieszczane w Twoim urządzeniu końcowym. Pamiętaj, że zawsze możesz zmienić te ustawienia.