Optymalizacja szybkości strony

Poniższa lista prezentuje techniki zwiększające szybkość strony i jej wyniki w Google Page Speed.

<!DOCTYPE html>

Ustawienie języka strony

<html lang="de">

<head>

Dev: Ustawineie sposobu wyswietlania strony na mobile (RWD).

<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no" />

Dev: Ustawineie kodowania strony.

<meta charset="utf-8">

SEO: Ustawienie braku indeksacji strony przez Google. Ważne dla środowiska stagingowego lub testoweo. Dotyczy również podstron, których zadaniem nie jest generowanie ruchu z organicznych wyników wyszukiwania np.  podstrona z regulaminem, logowania, rejestracji.

<meta name="robots" content="noindex, nofollow">

SEO: Ustawienie tytułu strony i opisu strony.

<title><?php echo $title; ?></title>
<meta name="description" content="<?php echo $description; ?>" />

Udostępnianie w Social Media: Ustawienie tytułu strony i opisu strony.

   <meta property="og:title" content="<?php echo $title; ?>" />
  <meta property="og:description" content="<?php echo $description; ?>" />

Udostępnianie w SM: Grafika do share-owania i Zalecany rozmiar zdjęcia reprezentującego udostępniany link to 1200 x 630. Dopuszczalne formaty to PNG, JPEG i GIF.

Ustawienie języka strony og:locale. Informacja o lokalizacji geograficznej w standardzie język_kraj. en_US jest wartością domyślną. Dozwolone wartości dostępne są tutaj.

<meta property="og:image" content="/assets/img/shop.jpg" />
<meta property="og:locale" content="de_DE" />

Dev: Ustawineie głównego URL.

 <base href="<?php echo $baseUrl ?>">

Dev, SEO: Ustawienie ikonki favicon

<link rel="shortcut icon" type="image/jpg" href="/assets/img/fav.jpg">

Dev: Ustawienie preładowania zasobów, które eliminuje render-blocking. Atrybut rel=”preload” wskazuje przeglądarce, że zasoby wskazane pod adresem URL są niezbędne do poprawnego wyświetlenia żądanej strony i przeglądarka musi je pobrać je na wczesnym etapie ładowania strony internetowej.

<link rel="preload" href="/assets/fonts/ArialBlack.ttf" as="font" type="font/ttf" crossorigin>

Dev: Ustawienie wysłania żądania przez przeglądarkę i zachowania zasobu. Stosujemy rel=”prefetch” w przypadku mniej istotnych zasobów, które będą potrzebne np. na innej podstronie.

<link rel="prefetch" href="/assets/img/shop.jpg" />
<link rel="stylesheet" href="/assets/css/styles.css?ver=<?= date('h-s') ?>">
  • Dev: preconnect – przeglądarka w tle nawiązuje połączenie http/tls z domeną co skutkuje szybszym ładowaniem zasobów.
  • Dev: async – równoległe pobiera zasoby.
<script async src="https://www.googletagmanager.com/gtag/js?id=G-" rel="preconnect" ></script>

<body>

  • Dev: webp – użycie nowoczesnych formatów grafik, Najpierw optymalizujemy grafiki np. tinypng nastepnie konwertujemy na webp.
  •  Dev: loading – atrybut loading i wartość lazy pozwalają na ładowanie grafik przez przeglądarke w momencie jak będzie widoczna w aktywnym widoku.
  • SEO: alt – ustawienie alternatywnego opsiu dla grafiki.
<img class="visual" src="./assets/img/shop.webp" loading="lazy" alt="We inspire people to shop">

Dev: defer – ładowanie skryptu odbywa się w tle i nie blokuje renderowania strony, skrypt uruchamiany jest po zbudowaniu DOM.

<script src="/assets/js/custom.min.js" defer></script>