jak przyspieszyć stronę internetową

A wiec jak przyśpieszyć swoją stronę internetową?

Jak przyśpieszyć stronę Internetową?

Żeby bardziej przybliżyć ci sposób w jaki należy to zrobić, posłużę się przykładem własnej strony SEOMOD.pl .

Strona SEOMOD została stworzona najprostszy sposobem czyli za pomocą darmowego szablonu OCEAN WP, i to generuje nam problemy już na samym starcie. 

Jaki pojawia się problem w przypadku gotowych szablonów? 

Gotowe szablony zawierają dużo nieużywanego przez naszą stronę CSS’a i Javascriptu który jest szczególnie dużym obciążeniem dla naszego urządzenia mobilnego (smartphone’a).

Na dole screen wyników mojej strony przed rozpoczęciem optymalizacji pod względem usunięcia niepotrzebnego CSS’a i JS’a i bez konfiguracji Cashowania w pliku htaccess.

Najważniejsze elementy:

– Zoptymalizuj prędkość obrazów

– Zminimalizuj pliki css i js 

– Uwzględnij buforowanie 

– Żądania pobierania wstępnego DNS 

– Umieść pliki js w stopce i nagłówku swojej witryny 

– Usuń ciągi zapytań z zasobów statycznych 

 Zmniejszyć liczbę żądań DNS 

 Dodaj wygasające nagłówki 

 Zainstaluj i / lub skonfiguruj profesjonalną wtyczkę do buforowania 

– Zoptymalizuj motywy i wtyczki, aby poprawić wydajność 

– Zoptymalizuj i bezpiecznie wyczyść swoją bazę danych 

 Sprawdź swoją witrynę pod kątem błędów i złośliwego kodu 

– Wyłącz niepotrzebne funkcje w WordPress 

– Ogranicz lub wyłącz wersje WordPress 

– Skonfiguruj sieć dostarczania treści (CDN) 

Nowy algorytm Google: jakość strony

Szybka strona Internetowa a nowy algorymt Google

Nowy algorytm od Google będzie skupiał się na czynnikach związanych z odczuciami użytkownika.

Jaki to ma związek z szybkością strony?

Nowy algorytm skupia się między innymi na szybkości ładowania strony, korzystając ze wskaźników takich jak:

  • Largest Contentful Paint  (Największe wyręderowane treści)
  • First Input Delay (Czas po jakim użytkownik może wejść w interakcje ze stroną, np. kliknąć w link
  • Cumulative Layout Shift (mierzy sumę wszystkich przesunięć układu strony podczas całego ładowania strony)
jak przyśpieszyć stronę internetową
Wyniki SEOMOD.pl przed optymalizacją. Narzędzie GTmetrix.

CSS (Cascade Style Sheet)

CSS to kaskadowe arkusze stylów, używane są do manipulacji kodem HTML, CSS jest odpowiedzialny za wszystkie elementy i ich kolory, obramowania i ustawienia w różnych pozycjach i miejscach na stronie.

Javascript

Javascript to najpopularniejszy język stosowany w przypadku tworzenia stron internetowych, jest to język skryptowy pozwalający na dynamiczne tworzenie treści na stronie internetowej. Również służy do manipulacji kodem HTML.

1. Jak wyeliminować ręcznie nieużywany CSS i Javascript?

Wyeliminuj nieużywany CSS i JS i przyśpiesz swoją stronę

Aby wyeliminować nieużywany kod CSS i JS użyjemy darmowego narzędzia które znajdziemy w przeglądarce Google Chrome.

Aby je otworzyć klikamy w naszej przeglądarce F12, następnie CTRL + SHIFT + P i wpisujemy Coverage jak na zdjęciu na dole:

jak przyśpieszyć swoją stronę internetową
Narzędzie Coverage

Jak ręcznie wyeliminować nieużywany CSS?

Jak przyśpieszyć stronę Internetowa?

Na obrazku na dole wyświetla nam się kod CSS zaznaczony dwoma kolorami, niebieski to kod który jest używany na stronie, a czerwony to CSS z którego nie korzysta nasza aktualna strona.

Pierwszą rzeczą jaką powinieneś zrobić to skopiować tak zwany krytyczny kod css, czyli css odpowiedzialny za najważniejsze dla ciebie elementy strony które mają załadować się najszybciej.

Najczęściej będą to górna belka odpowiedzialna za nawigację strony i wszystko co wyświetla się w tak zwanym viewport, czyli dokładnie ta część strony widoczna na zdjęciu na dole.

Wszystko poniżej tej części może załadować się później bo nie będzie to miało wpływu na UX – User Expirience, to znaczy doświadczenia użytkownika. Po prostu nie będzie go to irytować.

Poprawisz w ten sposób swój FID (First Input Delay) i FCP (First Containtful Paint).

Narzędzie Coverage
FID (First Input Delay)

Czas po którym użytkownik po rozpoczęciu ładowania może wejść w interakcję na stronie internetowej, np. kliknąć w link.

FCP (First Containtful Paint)

First Containtful Paint to pierwsze wyrenderowane / wyświetlone treści na stronie.

Jak dodać krytyczny css?

Krtyczny CSS przyśpieszy twoją stronę Internetową

Kliknij w element na swoje stronie prawym przyciskiem myszy i wybierz zbadaj element, jak na obrazku poniżej.

W ten sposób możesz sprawdzić jaki CSS jest używany do ważnych dla ciebie elementów (w tak zwanym viewport), następnie musisz skopiować go i dodać go w HTML  do <header>.

Dzięki temu najważniejsze dla nas zasoby zostaną załadowane pierwsze.

jak przyspieszyć swoją stronę internetową

Jak opóźnić ładowanie plików CSS?

Wszystkie pliki css używane w twoim szablonie musisz opóźnić po to aby nie blokowały ładowania twojej strony.

Używa się do tego prostej formuły.

<link rel=”preload” href=”style.css” as=”style” onload=”this.onload=null;this.rel=’stylesheet'”>
<noscript><link rel=”stylesheet” href=”style.css”></noscript>

 

Efekt po konfiguracji CSS

Przyśpieszenie strony internetowej SEOMOD.pl po usunięciu części niepotrzebnego CSS, opóźnieniu ładowania plików CSS i włączeniu krytycznego CSS w <header>.

Otrzymaliśmy imponujący wzrost pod względem wydajności ale też struktury strony.

jak przyspieszyć swoją stronę internetową
jak przyspieszyć stronę internetową?

2. Konfiguracja caschowania strony

Cashowanie, a szybkość strony Internetowej

Stosowania nagłówków Expires i Cache Control, zapewnia szybsze wczytywanie stron, odciąża łącze użytkownika i łącze serwera plików oraz serwer HTTP.

 

3. Zmień dostawców DNS na bezpłatną usługę DNS Cloudflare

Jak DNS i CDN Cloudflare wpływa na szybkość strony Internetowej?

4. Zmień HTTP 1.1 na HTTP2

5. Usuń jQuery migrate

Żeby usunąć migracje jQuery po prostu dodaj ten kod do function.php :

//Remove JQuery migrate

function remove_jquery_migrate($scripts)

{

    if (!is_admin() && isset($scripts->registered[’jquery’])) {

        $script = $scripts->registered[’jquery’];

 

        if ($script->deps) { // Check whether the script has any dependencies

            $script->deps = array_diff($script->deps, array(

                'jquery-migrate’

            ));

        }

    }

}

 

add_action(’wp_default_scripts’, 'remove_jquery_migrate’);

 

6. Lazy-Loading obrazków

7. Korzystaj z CDN

CDN – Content Delivery Network

8. Optymalizuj obrazki

9. Jak przyspieszyć stronę wordpress? - Wtyczki

W3 Total Cache

Autooptimize

Shortpixel

10. Ogranicz i / lub wyłącz wersje WordPress 

Ograniczmy ilość wersji zapisywanych przez WordPress.

Potrzebny jest nam plik wp-config.php . Do wspomnianego już pliku wp-config.php nad linią /* That’s all, stop editing! Happy publishing. */ dodajemy jedną z poniższych linijek:

// Zapisuj wszystkie wersje wpisu

define(’WP_POST_REVISIONS’, -1);

// Wcale nie zapisuj poprzednich wersji wpisów

define(’WP_POST_REVISIONS’, false);

// Zapisuj tylko 5 ostatnich

define(’WP_POST_REVISIONS’, 5)

wp config

Largest Contentful Paint(Największcze Wyrenderowane Treści)

  1. Kompresuj hero image
  2. Nie uzywaj Javascript do ładowania hero image
  3. Priorytet ładowania hero image
  4. Zoptymalizuj Javascript aby nie blokował hero image

Cumulative Layout Shift (Zmiana układu strony)

  1. Unikaj umieszczania reklam nad foldem
  2. Preload dla zasobów potrzebnych do początkowego renderowania strony
  3. Unikaj dynamicznych treści (np. slidery)

First Input Delay

  1. Unikaj blokowania głównego wątku i długiego łańcuchu zapytań
  2. Unikaj  niepotrzebnego kodu CSS i JS  w  HTML

Podsumowanie

Są dwie drogi aby przyśpieszyć swoja stronę internetową, pierwszym są plugin’y jak Autooptimize i W3 Total Cache. 

Drugim sposobem jest zrobienie tego ręcznie przy pomocy narzędzie coverage i kilku innych, to dużo trudniejszy sposób, ale jest dużo wydajniejszy i efektywniejszy.

Jeśli nie znasz się na SEO, najlepiej skonsultuj się ze specjalistą lub zatrudnij go, aby uniknąć błędów.

Link do kontaktu!