Na co zwrócić uwagę podczas instalacji i optymalizacji zakupionego gotowego szablonu strony?

1. Wybór motywu

Zacznijmy od początku, czyli od poszukiwania i wyboru motywu. Popularność WordPress sprawiła, że pojawiło się dużo darmowych i płatnych templatek. Tylko na stronie wordpress.org można znaleźć ponad 7400 bezpłatnych motywów (rys. 2). A jeśli sprawdzić popularne marketplace i strony studiów webowych, znajdziesz dziesiątki tysiąc templatek.

Rysunek 2. Darmowe motywy na repozytorium WordPress

Jak podejść do wyboru motywu? Na spokojnie! Proponujemy taką zasadę:

• Wybierz kilka templatek, które przypadły Ci do gustu.
• Sprawdź ich szczegóły: dostępne wtyczki i widgety, obrazy, dokumentacje.
• Zapoznaj się z informacjami o poprawności kodu wyróżnionych templatek. Często takie informacje dostępne są w opisie na stronie motywu. Dodatkowo możesz zapytać o optymalizację kodu przez chat czy formularz kontaktowy.
• W końcu wybierz ten motyw, który najbardziej Ci się spodoba i będzie zawierał wszystkie potrzebne opcje oraz możliwość optymalizacji.

Chyba proste, prawda? 🙂 Niestety wszystkie płatne motywy (darmowe tym bardziej), umożliwiające optymalizację, potrzebują dodatkowej pracy nad kodem. Można to łatwo zweryfikować za pomocą specjalnego walidatora W3C. Tak, np. motyw Monstroid2 (standardowy układ) ma 13 uwag (rys. 3), a klasyczny układ motywu Avada – 106. (rys. 4).

Rysunek 3. Sprawdzenie kodu Monstroid2 przez walidator W3C

Rysunek 4. Sprawdzenie kodu Avada przez walidator W3C

Oprócz sprawdzenia motywu pod względem poprawności kodu, warto również zweryfikować szybkość ładowania za pomocą Google PageSpeed i GTmetrix. Przy tym musisz uważać na wynik, gdyż będzie on mocno względny, gdyż strona Demo znajduje się na serwerze marketplace oraz producenta, który może być przeciążony. Przez to przykładowa witryna może ładować się wolnej niż w na Twoim hostingu. Dla przykładu, wynik motywów Monstroid2 (rys. 5) i Avada (rys. 6) na stronie Google PageSpeed wygląda następująco:

Rysunek 5. Szybkość ładowania motywu Monstroid2

Rysunek 6. Szybkość ładowania motywu Avda

Co w takim przypadku robić? Jaki motyw warto wybrać? Polecamy kupować templatki, które posiadają najmniejszą liczbę błędów, uwag i najszybciej się ładują. A jeśli podoba się motyw, który ma gorsze wyniki w testach od innych produktów, możesz go optymalizować samodzielnie. Tym bardziej, że nawet najlepsza templatka potrzebuje dodatkowej edycji kodu. 😉 Przejdźmy zatem do kroku 2, czyli optymalizacji templatki.

2. Optymalizacja zakupionego motywu

Ustaliliśmy już, że wszystkie motywy potrzebują dodatkowej optymalizacji kodu, aby osiągnąć najlepsze wyniki pod kątem SEO. Dlatego warto wykonać następujące kroki:

• Naprawić błędy i uwagi, które „wyłapie” walidator W3C. Przy tym musi być poprawione 100% błędów i jak najwięcej uwag (niestety dla rozbudowanych templatek nie da się naprawić wszystkiego). Usunąć zbędne linie w kodzie CSS i JS można za pomocą narzędzi, takich jak webpack lub gotowych skryptów, np. uncss-online. Dopiero potem przychodzi pora na minimalizację plików CSS i JS, która powinna zaoszczędzić kilka kilobajtów.
• Sprawdzić obrazy i elementy graficzne stosowane w szablonie. Muszą one mieć optymalny format, wymiar i jakość. Najlepiej stosować pliki typy PNG i JPG, korzystając z kompresji. Format PNG pozwala zachować jakość obrazów, np. dla galerii. Przy tym takie pliki mają większy rozmiar i zwalniają szybkość ładowania strony. Więc, w przypadku, gdy jakość nie jest zbyt ważna, lepiej stosować format JPG. Dodatkowo warto zwrócić uwagę na wymiary obrazów. Nie warto wysyłać na serwer obrazów o dużych wymiarach, by następnie je zmniejszać za pomocą parametrów height=”” i width=””, aby wstawić w potrzebny rozdział. Najlepiej, gdy wymiar ładowanego obrazu równia się wymiarowi obrazu wstawionego na stronę.
• Wszelkie zewnętrzne kody JavaScript warto zapisać w paczce, aby zminimalizować ilość zapytań HTTP. W przypadku, gdy kodu nie jest dużo, można dołączyć cały kod do nagłówka lub stopki, aby uniknąć ściągania zasobów.
• Elementy, które nie ulegają częstym zmianom (np. menu, stopka) można zapisać na sztywno w kodzie szablonu. Zmniejszy to opóźnienie odpowiedzi serwera, ponieważ generowanie podstron będzie zabierało mniej czasu.
• Zmienić adres URL do pliku arkusza stylów CSS na statyczny. To pozwala zmniejszyć liczbę zapytań do bazy danych. W kodzie jest to linia: <link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_url’); ?>” type=”text/css” media=”screen” />.
• Zrobić statyczny adres URL do pliku favicon.ico. W kodzie jest to linia: <link rel=”shortcut icon” type=”image/ico” href=”<?php bloginfo(’template_directory’); ?>/favicon.ico” />.
• Jeśli korzystasz z pingbacków, zmienić adres URL na statyczny. Jest to linia w kodzie: <link rel=”pingback” href=”<?php bloginfo(’pingback_url’); ?>” />.

Dodatkowo warto zwrócić uwagę na:

• Linię z informacjami o wersji WordPress. Nie generuje żadnych korzyści dla użytkownika, natomiast pomaga crawlerom zbierać dane o stronie i dodawać na odpowiednią listę hackerów. Jest to linia: <meta name = „generator” content = „WordPress <? php bloginfo (’version’);?>” />
• Widoczne oraz ukryte linki do autorów templatki. Jeśli w ramach licencji nie ma ograniczeń na usuniecie informacji o autorze, w tym linku, możesz śmiało usuwać odnośnik. W przeciwnym razie zalecamy dodać parametr rel=„nofollow” do takiego linku. Wtedy nie będziesz przekazywać mocy swojej strony cudzej witrynie WWW.

Po wykonaniu powyższych rekomendacji Twój motyw będzie miał mniej błędów i uwag dotyczących kodu oraz będzie się szybciej ładować. Dzięki temu strona oparta na tej templatce będzie miała lepsze pozycje w wynikach wyszukiwania.

Podsumowanie

W dzisiejszych czasach tworzenie strony internetowej nie jest zbyt skomplikowaną sprawą. Dostępne CMS-y i serwisy typu SaaS pozwalają budować witryny bez posiadania wiedzy programistycznej. Pomogą w tym nie tylko gotowe szablony, wtyczki i widgety, lecz także całe kreatory działające według metody „Przyciągnij i Upuść”.

Jednak gotowe szablony często mają zły kod (nie odpowiada standardom W3C), który jest słabo zoptymalizowany pod kątem SEO. Dlatego wybierając musisz ją sprawdzić przez różne serwisy według czystości kodu i szybkości ładowania. Przygotowaliśmy kilka porad, które stosują się optymalizacji motywu WordPress. Dzięki nim możesz ulepszyć jakość templatki i uzyskać najlepsze wyniki dla swojej strony. 

Autor: Janusz Kamiński
Specjalista działu marketingu firmy TemplateMonster. W branży IT pracuje od 7 lat. Posiada doświadczenie w SEO oraz, ogólnie, w szeroko rozumianym marketingu internetowym.

W przypadku pytań nasza agencja SEO zaprasza do kontaktu.