Podstawy

11 sposobów na optymalizację Twojej strony internetowej

13 Dec 2021
blog post.png

Grafika wygenerowana przez AI. Źródło: [Midjourney](https://www.midjourney.com/app/)

„Wiedzieć, że coś się dzieje." Używając średniowiecznej analogii – to tak, jakbyś wysłał rycerza w lśniącej zbroi na bitwę, zapominając wyposażyć go w miecz, tarczę, topór czy hełm. Na polu bitwy byłby skazany na zagładę.

Każda strona internetowa wymaga ciągłej optymalizacji, by pozostać atrakcyjna dla swoich użytkowników. Jest wiele popularnych trików, które to umożliwiają, ale skupię się na tych mniej znanych. Zapomnij na chwilę o optymalizacji obrazków czy redukcji kodu JS lub CSS. W tym artykule podzielę się rzadko stosowanymi sztuczkami, które pomogą poprawić szybkość witryny, UX, SEO i jej efektywność.

1. Zainstaluj mod-pagespeed

Mod_pagespeed przejmuje część pracy związanej z optymalizacją Twojej strony. Co to oznacza w praktyce? Nic innego, jak automatyczną analizę witryny. Oprócz analizy moduł wdraża modyfikacje, które znacząco wpływają na wydajność strony. W efekcie kompresuje obrazy, zmniejsza liczbę plików JavaScript i ogranicza liczbę zapytań HTTP. Warto sprawdzić, jak strona zachowuje się po wdrożeniu modułu. W wyniku przeprowadzanych przez niego konwersji kod JavaScript może ulec zmianie. W takim przypadku należy włączyć odpowiedni filtr lub wprowadzić stosowne modyfikacje, by rozwiązać problem. Istnieje możliwość wyłączenia każdego filtra modyfikującego kod.

Czasem instalacja modułu może być niemożliwa. Skorzystaj wtedy z PageSpeed Insights – wpisz swoją domenę i sprawdź, które obszary wymagają optymalizacji. Najlepiej wdrożyć wszystkie sugerowane przez test zmiany.

2. Używaj Open Graph

Tagi Open Graph to rozwiązanie zwiększające widoczność Twojej strony w mediach społecznościowych. Jeśli z nich korzystasz, linki do Twojej witryny udostępniane na Facebooku stają się o wiele atrakcyjniejsze i zyskują większą wartość reklamową. Warto też sprawdzić, jak Twoje treści prezentują się na Facebooku. Przede wszystkim elementy graficzne powinny mieć odpowiednie wymiary. Minimalna wielkość obrazu, który dobrze wyświetla się na FB, to 1200 x 630 px. Zapoznaj się z dobrymi praktykami przesyłania obrazów do Facebooka. Ciekawostka: Facebook nie wygeneruje miniatury obrazu przy pierwszym udostępnieniu URL-a – pokaże ją dopiero przy drugim. Kolejna ciekawostka: jeśli użyjesz złego obrazu lub chcesz zmienić treść opisu, nie musisz czekać całego dnia, by zmiany były widoczne. Wystarczy odświeżyć stronę przy użyciu odpowiedniego narzędzia.

Jeśli prowadzisz sklep oparty na silniku open source (Prestashop, Magento) lub serwis internetowy na WordPress, poszukaj darmowych wtyczek, które automatycznie wdrożą Open Graph.

web development, coding 1.png

Grafika wygenerowana przez AI. Źródło: Midjourney

3. Pomóż wyszukiwarkom – używaj mikroformatów

Jestem niemal pewien, że wiele serwisów internetowych nie korzysta z tej formy optymalizacji. Mam wrażenie, że wynika to z braku wiedzy i że wciąż pozostawiamy wygląd naszej strony w wynikach wyszukiwania „przypadkowi". Oznacza to, że Google wyświetla jedynie informacje zawarte w atrybutach title, link i meta description, podczas gdy można osiągnąć znacznie więcej. Google pozwala na wyświetlanie danych kontaktowych, wyszukiwarki, ocen punktowych, liczby recenzji, cen i wielu innych. Dzięki temu linki prowadzące do Twojej strony będą o wiele atrakcyjniejsze, a ruch na stronie wzrośnie.

W zależności od branży, w której działasz, możesz dostosować elementy odpowiadające profilowi Twojej działalności. Jeśli chcesz, by w wyszukiwarce pojawiało się Twoje logo, dane kontaktowe lub linki do mediów społecznościowych, dodaj odpowiedni kod do strony. Jeśli prowadzisz sklep internetowy, wzbogać wyniki wyszukiwania o ceny, recenzje, gwiazdki i informacje o dostępności. Okruszki nawigacyjne (breadcrumbs) mogą pojawiać się bezpośrednio w wynikach Google. Pamiętaj, że każdą nowo wdrożoną funkcję należy przetestować. Tak samo jest z mikroformatami. Nie musisz czekać, aż Googlebot zaindeksuje nowe informacje – możesz przetestować wszystko za pomocą odpowiednich narzędzi.

4. Dostarcz Googlebotowi treści paginowane

Jeśli Twoja strona używa paginacji z linkami „poprzednia/następna", ważne jest, by przekazać tę informację również Google. W tym celu możesz użyć atrybutów rel="prev" i rel="next". Dzięki temu Google może korzystać z „ukrytych" treści dostępnych przez mechanizm paginacji, ponieważ wskazujesz logiczne powiązanie między stronami. Możesz też rozważyć dodanie elementów <link> w sekcji head strony, wskazujących URL poprzedniej i następnej strony.

5. Za wszelką cenę unikaj duplikowania treści

Legendarne zduplikowane treści – internet jest pełen artykułów o tym zjawisku. Jedno jest pewne: lepiej go unikać i eliminować wszelkie duplikaty na swojej stronie. Nie jest to atrakcyjne ani dla użytkownika, ani dla Google. Jedną z kwestii związanych z duplikowaniem treści są przekierowania witryny. Promowanie idei „eliminacji WWW" w adresach internetowych ma sens. Fizycznie jest to jedynie dodatkowa subdomena, która nie robi nic innego, jak generuje zbędny ruch DNS. W efekcie Twoja strona ma dwa oddzielne adresy (np. www.twojadomena.com i twojadomena.com) z identyczną zawartością. Ten rodzaj optymalizacji to optymalizacja SEO, która pozytywnie wpłynie na Twoją pozycję w wynikach wyszukiwania.

web development, coding 2.png

Grafika wygenerowana przez AI. Źródło: Midjourney

6. Pokaż Google, że Twój serwis jest wielojęzyczny

Atrybuty rel=alternate i hreflang=x pomagają poprawnie wyświetlać Twoją stronę w wynikach wyszukiwania dla zapytań globalnych i regionalnych. Dobra rada: jeśli chcesz, żeby Twoja strona była indeksowana w regionach właściwych dla danego języka, dobrą praktyką jest publikowanie różnych wersji językowych na osobnych subdomenach, np. es.domena.com, lub domenach, np. domena.es.

7. Popraw wydajność, umieszczając pliki tymczasowe w RAM

Masz dedykowany serwer i korzystasz z systemu operacyjnego Linux? W takim przypadku możesz poprawić wydajność serwisu, umieszczając pliki tymczasowe w RAM-ie. Dostęp do nich i ich przechowywanie są wtedy znacznie szybsze. Aby to działało, musisz stworzyć partycję tmpfs (tymczasowy system plików) i skierować ku niej przechowywanie wszystkich plików. Pliki, które często się zmieniają, nie zajmują dużo miejsca, a ich ewentualna utrata nie powoduje katastrofalnych skutków. Wydajność może wzrosnąć nawet o 30%, jeśli zastosuje się tę metodę dla plików tymczasowych na serwerze MySQL. Ma to sens również w przypadku plików sesji PHP.

8. Zainstaluj Memcached i jeszcze bardziej popraw wydajność

Wydajność serwisu internetowego powinna być poprawiana na każdym możliwym polu. Może to brzmieć jak komunał, ale ignorowanie tej rekomendacji jest błędem, gdy używamy dysku twardego do przechowywania plików tymczasowych (cache). To po prostu nieefektywne. W takim przypadku o wiele lepiej sprawdzi się Memcached lub podobny system. Warto zlecić to oprogramiście. Po wdrożeniu pliki tymczasowe będą przechowywane w RAM-ie, co znacząco przyspiesza ich obsługę. Ten rodzaj optymalizacji ma szczególnie duży wpływ na poprawę wydajności.

9. Sprawraw, by serwer przestał odpytywać serwery DNS o nazwę hosta

Ustaw w Apache > HostnameLookups wartość Off. Dzięki temu serwer przestanie odpytywać serwery DNS o nazwę hosta. Ta informacja jest bezużyteczna. Przyjrzyj się formatowi logów Apache – powinieneś znaleźć zmienną %h, która wymusza pobieranie nazwy hosta do zapisania w plikach logów. Zastanów się, czy jest to konieczne. Być może możesz zmienić ją na %, co zwróci adres IP serwera znacznie szybciej.

web development, coding 4.png

Grafika wygenerowana przez AI. Źródło: Midjourney

10. Stwórz atrakcyjną favikonę

Ile z nas zaprojektowało fawikonę, która wyglądała jak Logo Comenius? Plik favicon.ico powoli odchodzi w przeszłość. Dziś favikona musi automatycznie dostosowywać się do każdego medium. Możesz skorzystać z http://www.favicomatic.com/. Wystarczy wgrać logo o wymiarach 1024 x 1024. Otrzymasz wszystkie niezbędne rozmiary, dzięki czemu favikona będzie wyświetlana w najlepszej możliwej jakości, zoptymalizowanej pod smartfon, tablet i laptopa. Wystarczy użyć otrzymanego kodu w sekcji head strony i gotowe. Ikony będą używane na listach ulubionych, ekranach głównych i pulpitach wszystkich urządzeń – dokładnie tam, gdzie zostały przypięte.

11. Pokaż swoją dobrą stronę

Chcesz, żeby przeglądarka zmieniła kolory na te, których używasz na swojej stronie? Wystarczy dodać tag w sekcji head witryny – <meta name="theme-colour" content="#16B777"/>. Pamiętaj tylko, by użyć swojego koloru w kodzie. Wdrażając ten tag, poprawisz wizualną atrakcyjność swojego serwisu.

Optymalizuj i wygrywaj!

Chociaż optymalizacja stron internetowych nie jest najfascynującym zajęciem na świecie, prowadząc serwis internetowy lub aplikację, powinieneś traktować ten obszar jako konieczność. Optymalizujesz – wygrywasz. Takie proste.

Grzegorz Kiersznowski.jpeg

O autorze:
Grzegorz Kiersznowski – CTO @ Autentika.

Udostępnij artykuł:
Kontakt
Jeśli czujesz, że możemy pomóc, napisz do nas jeszcze dziś, lub zadzwoń do Sławka +48 603 440 039Możesz też śledzić nas na LinkedIn, Facebooku lub Dribbble.