Backup WordPress – jak robić to dobrze?

Zatem — ten artykuł opisuje najlepsze wtyczki WooCommerce, ale w kontekście tego, co możesz z nimi zrobić dla swojego sklepu. Zaczynamy:

1. Wtyczki WooCommece do marketingu

Jako mały sklep dysponujesz ograniczonym budżetem na działania marketingowe. To całkowicie zrozumiałe. Ucieszysz się zatem z pewnością, gdy powiem Ci, że część działań marketingowych możesz z powodzeniem prowadzić samodzielnie.

Obecnym trendem w marketingu jest content marketing. Według badań, 89% najlepiej prosperujących biznesów prowadzi z zaangażowaniem działania content marketingowe.

Zobacz na czym to polega:

Content marketing — strategia marketingowa polegająca na tworzeniu treści mających przyciągnąć i utrzymać zainteresowanie grupy docelowej, a następnie nakłonić do działania przynoszącego zysk firmie. Bazuje na tworzeniu długotrwałych relacji z odbiorcą.

Przykłady content marketingu to:

• poradnik, jak wybrać dobrą pralkę opublikowany przez sklep RTV AGD
• blog o przygotowaniach do maratonu prowadzony przez sklep sportowy
• cykl wideoporadników na temat psychologii psów realizowany na zlecenie sklepu zoologicznego

Chcąc realizować z powodzeniem działania content marketingowe, musisz najpierw przyciągnąć zainteresowane osoby, a następnie zatrzymać je przy swojej marce. W końcu uda Ci się skłonić ich do zakupu.

W wyżej wymienionych działaniach pomogą Ci wtyczki. Zacznijmy zatem od pierwszej z nich:

Optymalizacja SEO

Raport BrigthEdge Research mówi jasno: ruch z Google stanowi 41% ruchu sklepów internetowych i odpowiada za 36,4% przychodów.

Dobrze realizowana kampania SEO potrafi wygenerować bardzo wysoki zwrot z inwestycji w marketing. Zanim jednak zaczniesz współpracować z agencją SEO, możesz zacząć własnymi siłami optymalizować swój sklep pod kątem wyszukiwarek.

Jesteś w stanie opracować i zrealizować kampanię content marketingową dla swojego sklepu we własnym zakresie. Wystarczy duża doza kreatywności oraz wtyczka Yoast SEO.

Yoast SEO ułatwia tworzenie treści pod kątem wyszukiwarki. W edytorze wpisów blogowych lub podstron podajesz frazę, na którą chciałbyś się wyświetlać w Google. Wtyczka podpowiada, co powinien zawierać tekst, aby zwiększyć szanse na skuteczne pozycjonowanie.

Oprócz tego Yoast SEO zadba o techniczne aspekty takie jak utworzenie mapy strony.

Oczywiście nie zastąpisz agencji SEO jedną wtyczką Niemniej — jest to dobry start! Możesz bowiem osiągnąć pierwsze efekty samodzielnie.

A w międzyczasie zdobędziesz praktyczną wiedzę, która w przyszłości ułatwi Ci współpracę z agencją (będziesz bardziej świadomy).

Wtyczka jest dostępna w języku polskim. Możesz ją pobrać za darmo:

Pozyskanie kontaktów

Jak wielu odwiedzających Twój sklep zapamięta go i będzie do niego wracać? Bez dodatkowego wysiłku z Twojej strony nie będzie ich wielu.

Konkurencja w internecie jest ogromna. Gdy ktoś odwiedza Twój sklep po raz pierwszy — z Google czy z reklamy — po 5 minutach nie będzie nawet pamiętał nazwy Twojego sklepu!

Twoja w tym głowa, aby przyciągnąć internautę na dłużej… Pytanie brzmi, jak to zrobić? Wykorzystaj content marketing!

Dobrymi treściami przyciągniesz internautów z Google, ale również zatrzymasz ich przy sobie. Musisz jednak docierać do nich z treściami regularnie.

Najlepszym pomysłem jest pozyskanie adresu e-mail, na który będziesz przesyłał treści. Pamiętaj, aby mailingi były personalizowane — to właśnie wtedy sprawdzają się najlepiej!

Personalizowane wiadomości — według Instapage — dają 6-krotnie lepsze efekty w zakresie generowania sprzedaży. Te same dane mówią jednak, że aż 70% firm nie potrafi robić tego dobrze!

Jak to robić poprawnie? Dowiesz się na przykład z 286 odcinka podcastu Mała Wielka Firma.

Żeby wiadomości przesyłać, musisz najpierw pozyskać adresy e-mail. Właśnie do tego posłuży Ci wtyczka OptinMonster:

Listy zakupowe, które można udostępniać

Czy wiesz, że z wtyczki WooCommerce Wishlist autorstwa YITH korzysta ponad 700.000 sklepów?

Nic dziwnego, w wersji darmowej oferuje naprawdę dużo funkcji. W większości przypadków sklepy nie mają potrzeby wykupować płatnej wersji.

W skrócie: wtyczka umożliwia tworzenie list zakupowych, np. Zakupy na święta lub Co chciałbym dostać na urodziny.

Najważniejsze jest, że tak utworzoną w Twoim sklepie listą zakupów Twój klient może podzielić się ze swoimi znajomymi. W ten sposób docierasz do większej liczby potencjalnych klientów.

Analizuj swoje działania marketingowe

Marketing internetowy daje Ci ogromne możliwości mierzenia efektów swoich działań. Jest to niewątpliwa przewaga w stosunku do marketingu tradycyjnego np. reklam w telewizji, radiu czy na billboardach.

Jeśli korzystasz z Google Analytics, MonsterInsights umożliwi Ci podglądanie danych bezpośrednio z pulpitu sklepu. Jeśli nie korzystasz z Google Analytics — koniecznie zacznij!

PS Google Analytics wykorzystuje 88,5% największych stron internetowych na świecie (TOP 10.000).

2. Skuteczna kompresja obrazów

Szybkość działania strony jest istotna z dwóch powodów:

1. Pozycja w Google
2. Wpływ na konwersję

Po pierwsze, czas ładowania strony to tak zwany czynnik rankujący — i jest to oficjalnie potwierdzone przez Google.

Po drugie, według badań agencji interaktywnej skilled, 1-sekundowe opóźnienie ładowania strony oznacza 7% niższą konwersję.

Zatem — przykładowo przy 20.000 zł obrotu dziennie, daje to stratę pół miliona złotych w skali roku.

Nie muszę Cię dalej przekonywać, że Twój sklep po prostu musi działać szybko, prawda? Spokojnie, są do tego wtyczki!

Zdjęcia w dzisiejszych czasach potrafią ważyć naprawdę dużo. To zasługa aparatów z dużymi matrycami. W większości przypadków jednak zdjęcia wielkości kilkunastu czy kilkudziesięciu megapikseli nie mają racji bytu na stronie internetowej sklepu.

Jeśli wrzucasz zdjęcia z komputera bez żadnej konwersji, a dodatkowo w oryginalnym rozmiarze, to możesz w ten sposób spowalniać działanie Twojego sklepu.

Im cięższe zdjęcia, tym dłużej trwa załadowanie podstrony na przykład strony produktu w Twoim sklepie.

Zatem musisz po prostu zadbać o optymalizację obrazów.

Na szczęście istnieją gotowe rozwiązania, które zrobią to za Ciebie. Nie tylko zmniejszą rozmiar do pożądanego, ale i dokonają kompresji obrazu. Najlepsze rozwiązania potrafią zmniejszyć wagę obrazka bez jakiegokolwiek wpływu na jakość (tzw. kompresja bezstratna).

Wtyczki WooCommerce do zmniejszania wagi obrazków

Wtyczek tego typu jest sporo, dziś przedstawię Ci dwie z nich:

1. Smush Image
2. ShortPixel

Obie te wtyczki potrafią usuwać metadane EXIF, czyli informacje takie jak data wykonania zdjęcia, ustawienia przesłony czy czasu naświetlania. Niepotrzebnie zwiększają one wagę pliku.

Kolejna funkcja obu tych wtyczek to możliwość ustawienia trybu kompresji (stratna czy bezstratna). Sama kompresja może być automatyczna przy wgraniu obrazków lub ręczna.

Kluczowe funkcje są w obu wtyczkach zbliżone. Różnica kryje się w detalach.

Pamiętaj, że oba te rozwiązania występują również w wersji płatnej. Smush Image oraz ShortPixel różnią się zatem w kwestii wersji freemium.

ShortPixel w wersji darmowej daje możliwość kompresji i zmiany formatu obrazów do WebP, który jest obecnie najbardziej efektywny w zakresie wagi pliku. Smush Image ma tę funkcję, ale jedynie w wersji PRO.

Drugą zaletą ShortPixela jest możliwa integracja z wtyczką do tworzenia obrazków dla ekranów Retina. W takim przypadku obrazy te również będą optymalizowane pod kątem wagi plików.

Z kolei Smush Image posiada dodatkową funkcję lazy load. Polega to na doładowywaniu obrazów w locie w trakcie przeglądania strony przez internautę zamiast ładowania wszystkich obrazków od razu.

Zmniejsza to czas ładowania strony, zwłaszcza na urządzeniach mobilnych. Pierwsza wersja strony ładuje się szybko, gdyż zaliczają się do niej jedynie obrazki above the fold i w okolicach poniżej folda.

Above the fold — część strony internetowej, którą jest widoczna w oknie przeglądarce internetowej, bez konieczności przewijania dokumentu.

Przetestuj oba rozwiązania i wybierz najlepsze dla siebie

Sugeruję Ci przetestować obie wtyczki, a następnie wybrać tę, której docelowy model rozliczeń będzie Ci bardziej odpowiadał. W raz z rozwojem swojego sklepu i podjęciem działań content marketingowych, liczba kompresowanych obrazków zwiększy się i z pewnością przekroczy limity wersji freemium.

Musisz w tym momencie wiedzieć, że Smash Image nie jest oferowany jako osobna wtyczka czy usługa. Znajduje się ona w pakiecie wtyczek wpmudev sprzedawanych w abonamencie, rozliczanym za cały pakiet.

wpmudev nie ogranicza swojej oferty jedynie do wtyczek. Za kwotę $49 miesięcznie oprócz wtyczek do marketingu, ochrony przed wirusami czy robienia backupów, otrzymasz także hosting, CDN czy narzędzie do zarządzania WordPressem (lub wieloma jego instancjami).

Oferta wpmudev jest dedykowana przede wszystkim właścicielom wielu stron prowadzonych jednocześnie.

3. Wtyczki WooCommerce do optymalizacji sklepu

Dzięki gotowym rozwiązaniom przyśpieszysz swój sklep jeszcze bardziej. Nie są to jednak wtyczki WooCommerce sensu stricto. Zainteresowany? Sprawdź:

Mechanizm cache

Każde wejście użytkownika na Twój sklep generuje dziesiątki procesów po stronie serwera. Wyobraź sobie, że WordPress musi odpytać bazę danych:

• jakie produkty ma wyświetlić na stronie głównej
• ile każdy z nich kosztuje
• które nie są dostępne na magazynie
• jaka jest ścieżka do miniatur tych produktów
• czy produkty mają dodane opinie
• itd.

Gdy użytkowników odwiedzających sklep są dziesiątki, serwer może dostać zadyszki! Właśnie dlatego stosujemy mechanizm cache. Polega on na zapisaniu stanu strony w danym momencie i serwowaniu jej bezpośrednio, tj. bez odpytywania bazy danych.

Cache odświeża się w przypadku zmian na stronie głównej czy stronie produktu, np. dodanie nowego zdjęcia, zaktualizowanie ceny czy stanu magazynowego.

Najpopularniejsza wtyczka, którą możesz w tym celu zastosować to:

Optymalizacja plików strony

Jedną z metod optymalizacji rozmiaru plików strony (HTML, CSS, JS) to proces minifikacji.

Kod po minifikacji jest po prostu zbity. W miejscu gdzie nie są potrzebne, usunięte zostają tzw. znaki białe, czyli spacje i przejścia do nowej linii. Oprócz tego usuwa się powtórzenia.

Może wydawać się, że to żadna oszczędność, a jednak…

Użyjmy przykładu do zilustrowania zalet takiej optymalizacji. Zobacz jak wygląda przykładowy kod przed minifikacją:

<html>
    <head>
        <style>
            #myContent { font-family: Arial }
            #myContent { font-size: 90% }
	</style>
    </head>
    <body>
        <!-- start myContent -->
        <div id=”myContent”>
            <p>Hello world!</p>
        </div>
        <!-- end myContent -->
    </body>
</html>

Ten sam kod po minifikacji wygląda następująco:

<html><head><style>#myContent{font-family:Arial;font-size:90%}</style></head><body><div id=”myContent”><p>Hello world!</p></div></body></html>

Liczby nie kłamią:

1. Pierwszy przykład zajmuje 328 bajtów, a drugi 142 bajty.
2. Mówimy zatem o obniżeniu wagi pliku o 57%!

Wtyczka Autoptimize nie tylko zminifikuje pliki Twojego sklepu, ale również połączy wiele plików w jeden. Co to oznacza? Gdy motyw Twojego sklepu posiada 5 arkuszy CSS, wtyczka połączy je w jeden plik i zminifkuje.

Zysk to mniejsza waga pliku oraz mniej plików, do których musi odwoływać się przeglądarka użytkownika Twojego sklepu. Efekt — szybsze ładowanie strony sklepu po stronie klienta.

Bonus: Najlepsza metoda optymalizacji

A co jeśli powiem Ci, że istnieje jeszcze lepsza metoda na optymalizację szybkości działania strony?

Czemu nie mówisz o niej od razu? — myślisz sobie.

Powód jest prosty: nie każdy hosting umożliwi Ci jej zastosowanie.

W skrócie chodzi o:

• LS Cache
• Redis etc

Metoda ta umożliwia obsłużenie 67 razy większej liczby użytkowników przy takich samych zasobach hostingowych. Petarda!

Dowiedz się więcej i sprawdź, czy Twój hosting to ma:
Zwiększ szybkość swojej strony — kompletny poradnik [3 proste kroki]

4. Techniczne

Zmiany tekstów w sklepie

Chcesz spersonalizować tekst na przycisku zamówienia lub dodania do koszyka? A może komunikat po zatwierdzeniu kuponu w koszyku nie pasuje do marki Twojego sklepu? Użyj poniższej wtyczki WooCommerce:

Wysyłka maili przez SMTP

Im większy sklep, tym więcej maili wysyła. Powiadomienia o transakcjach wysyłają się automatycznie — więc często nie zajmują naszej uwagi. A powinny!

Domyślnie WooCommerce wysyła powiadomienia z użyciem funkcji PHP Mail. Na dłuższą metę może się to okazać problematyczne dla Twojego sklepu.

Mówiąc wprost:

To, że Twój sklep maila wyśle, nie oznacza, że on dotrze do odbiorcy, czyli klienta Twojego sklepu.

PHP Mail nie służy do masowej wysyłki maili. Generując setki maili dziennie i wysyłając je w świat, możesz trafić na SPAM listę najpopularniejszych dostawców usług poczty e-mail.

Rozwiązanie jest banalnie proste:

Skorzystaj z serwera SMTP na swoim hostingu. Załóż skrzynkę pocztową, a następnie skonfiguruj ją z użyciem poniższej wtyczki:

Interfejs jest bardzo prosty i przejrzysty, co ułatwia korzystanie z tego plug-inu.

Simple Custom CSS and JS

Na sam koniec zostawiam wtyczkę, do której mam osobisty sentyment. Nie bez przyczyny — odpowiadałem za jej polskie tłumaczenie.

Wtyczka Simple Custom CSS and JS umożliwi Ci dodanie dowolnych wstawek kodu do Twojego sklepu:

• możesz nadpisać arkusze stylów CSS (tzw. custom CSS)
• masz możliwość dodania kodu HTML (np. Google Analytics, Hotjar itp.)
• wdrożysz dowolny skrypt JS bezpośrednio do kodu strony (np. Facebook Pixel)

Nie jest to wtyczka, która znajdzie zastosowanie w każdym sklepie. Jeśli jednak samodzielnie administrujesz swoim sklepem i dokonujesz prostych modyfikacji, warto żebyś o niej wiedział.

Wtyczkę pobierzesz za darmo:

5. Podsumowanie listy wtyczek WooCommerce

Mam ogromną nadzieję, że wtyczki WooCommerce, które zaprezentowałem Ci w tym artykule, będą przydatne w Twoim sklepie!

A jakich wtyczek Ty używasz w swoim sklepie? Może dodałbyś jakąś do powyższej listy? Podziel się swoimi doświadczeniami w komentarzu poniżej.

Zapraszamy do przetestowania naszego hostingu dla WooCommerce!

Artykuł 11 przydatnych wtyczek dla małego sklepu – WooCommerce pochodzi z serwisu cyber_Folks.

Jak często zdarza Ci się opuścić stronę internetową tylko dlatego, że wczytywała się zbyt długo? Dla odbiorców, którzy szukają w sieci informacji, towarów lub usług liczy się przede wszystkim czas. Jeśli już na wstępie napotykasz problemy z szybkim ładowaniem się witryny, co będzie potem? Kto zechce zrobić zakupy w sklepie internetowym, w którym wykonanie każdej czynności wymaga czasu, a kolejne podstrony otwierają się 5, 10 sekund?

Z tego wpisu o szybkości stron dowiesz się:

• Szybkość strony – dlaczego jest taka ważna?
• Co szybkość strony oznacza dla oceny przez Google?
• Czy szybkość strony ma znaczenie w działaniach Google Ads?
• Jak szybkość strony wpływa na konwersje?
• Co wspólnego ma współczynnik odrzuceń z szybkością stron?

Szybkość strony liczy się z co najmniej 3 powodów

W 2020 roku miałem okazję uczestniczyć w badaniach fokusowych, gdzie m.in. rozmawialiśmy o szybkości działania stron internetowych. W grupie fokusowej znajdowali się przedsiębiorcy, z których większość nie była zawodowo związana z zagadnieniami marketingu cyfrowego, seo, czy też tworzeniem stron www.

Okazało się, że niektórzy uczestnicy deprecjonowali rolę czasu, w jakim strona się otwiera, wskazując, że dla nich 2 czy 3 sekundy w otwieraniu strony nie będą stanowić różnicy, jeśli strona zawiera ciekawe, relewantne treści. Zastanowiło mnie to i rzeczywiście, trzeba przyznać, że teoretycznie ważniejsze jest, żeby strona miała odpowiednią zawartość, niż była szybka. Teoretycznie, bo czytając ten artykułu i przytoczone dalej badania masz szansę zapoznać się z solidnymi argumentami, dla których szybkość strony jest ważniejsza, niż mogło Ci się wcześniej wydawać.

Szybkość strony jako czynnik rankingowy

Istnieje dziś dyskusja na temat tego, czy szybkość wczytywania jest czynnikiem rankingowym. Narzędzie Google PageSpeed Insights daje sporo wskazówek i ocenia czas wczytywania strony, a jego autorytet jest wysoki. W końcu dostarcza je producent wyszukiwarki numer jeden na świecie. Wielu specjalistów twierdzi natomiast, że nie widzą korelacji między pozycjami swoich klientów a czasem wczytywania strony. Jest to sprawa dyskusyjna, a zagadnienie szybkości jako czynnika rankingowego spróbuję omówić nieco dalej.

Wynik Jakości w Google Ads a szybkość stron

W Google Ads istnieje pojecie wskaźnika jakości – tzw. Quality Score. To miara, która bierze pod uwagę dopasowanie między słowem kluczowym a reklamą, przewidywalną klikalność oraz „doświadczenie strony docelowej”. Im lepsze to doświadczenie, tym lepszy Wynik Jakości, a co za tym idzie – Twoja efektywność płatnych działań reklamowych.

Doświadczenie użytkownika a szybkość strony

To sprawa dość dyskusyjna. Chodzi o to, że Ty, ja, sąsiadka spod dziesiątki i pies wujka – wszyscy mamy inną wrażliwość na szybkość strony. Na koniec jednak najczęściej zainteresuje Cię przede wszystkim efekt „uśredniony”, w postaci współczynnika konwersji albo… odrzuceń. Obie miary będą użyteczne i obie omówimy nieco dalej w tym wpisie. Do tej kwestii odniósł się jeden z zaproszonych przeze mnie ekspertów i praktyków rynkowych, Krzysztof Kosman:

OKIEM EKSPERTA

Żyjemy w czasach, w których zanika umiejętność czekania. Wszystko mamy od ręki i na wczoraj. Właściwie to AI jest w stanie przewidzieć część naszych ruchów i być o krok przed nami (predictive caching). Czy w takim otoczeniu możemy się spodziewać, że ktoś będzie czekał 10 sekund na wczytanie się naszej strony?

Szybkość strony a pozycja w Google

Szybkość strony okiem ekspertów seo

Jak wspomniałem wcześniej, temat szybkości strony jako czynnika rankingowego w Google jest kontrowersyjny. Wielu specjalistów kwestionuje bezpośredni związek między szybkością działania strony a jej pozycją w wyszukiwarce.

Zwróć uwagę, że pozycja, z tego, co wiadomo powszechnie, wynika z rankingu ustalanego przez Google na podstawie dziesiątek (nikt nie wie, ilu dokładnie) kryteriów. Ulegają one niemal nieustannym zmianom, a to powoduje, że trudno jest „wyseparować” jeden konkretny czynnik i ustalić jego wpływ.

Niektóre narzędzia, jak SurferSeo – podejmują się właśnie takiej oceny. Miałem okazję rozmawiać kiedyś z Michałem Suskim, jednym ze współtwórców narzędzia, który zwrócił mi uwagę na fakt, że szybkość strony to nie jest pojęcie jednoznaczne. Mówiąc o szybkości należy brać od uwagę różne czasy – czasy i etapy ładowania strony, a ich wpływ może być różny zależnie od momentu testowania i słowa kluczowego, dla którego wyniki są analizowane. Polecam zabawę tym narzędziem, to jedno z najciekawszych na świecie narzędzi wspomagających pracę specjalistów SEO. Zdaniem Michała najsilniejsze korelacje między pozycjami a czasami daje się zaobserwować zazwyczaj w odniesieniu do TTFB. O miarach szybkości strony opowiem nieco dalej.

Wróćmy jednak do opinii na temat szybkości jako czynnika rankingowego. Jednym z najbardziej rozpoznawalnych eksperów w Polsce jest autor unikatowego szkolenia Papa Seo, Grzegorz Strzelec.

OPINIA EKSPERTA

Co prawda jest to czynnik pośredni dla SEO (choć kluczowy biznesowo) i poza skrajnymi przypadkami stron, które się po prostu ładują w nieskończoność, nigdy nie zaobserwowałem, aby różnica w ładowaniu o sekundę czy 3 sekundy, mogła wpłynąć w sposób bezpośredni na SEO.

Grzegorz Strzelec,
ekspert seo, właściciel papaSeo.com

Łukasz Suchy,
ekspert SEO i SEM z devagroup.pl

OPINIA EKSPERTA

W swojej pracy nie zauważam bezpośredniego wpływu szybkości działania strony na jej ranking w wynikach wyszukiwania. Szczególnie dobrze widać to na stronach, na których poprawa rzędu 2-3 sekund nie daje zauważalnych efektów dla SEO. Jednak, szybkość wczytywania strony jest dla mnie ważnym elementem i czynnikiem w ogólnym odbiorze stron – w końcu jako seowcy mamy swoimi działaniami pomóc klientom w dotarciu do szerszej grupy odbiorców i doprowadzić do jak największej liczby konwersji. Co prawda wkracza to nieco w dział UX – szybkość ma bowiem wpływ na konwersje w serwisie oraz wygodę użytkowników. Poprawa szybkości ma zatem pośredni wpływ na wyniki SEO :). Widoczny jest również coraz mocniejszy nacisk na szybkość działania serwisów ze strony samego Google. Mamy przecież Core Web Vitals, które ciągle zyskuje na znaczeniu. Dodatkowo, w połowie 2021 r. czeka nas kolejna duża aktualizacja poświęcona szybkości i UX.

Szybkość strony w oficjalnych publikacjach Google

W 2020 roku serwisy skupiające się na zagadnieniach SEO wychwyciły informacje o planowanej zmianie. Takie informacje publikuje m.in. SearchEngineLand, ale znajdziemy je także na oficjalnym blogu Google.

Jeśli witryna ładuje się zbyt długo, Google zaczyna traktować ją jako mało przyjazną użytkownikowi, obniżając jej pozycję strony w wynikach wyszukiwania. Google zestaw tych czynników, związanych z szybkością, nazywa Core Web Vitals. Są to miary skoncentrowane na użytkowniku, mocno powiązane z UX, czyli z doświadczeniem użytkownika.

Wg oficjalnych materiałów Google o szybkości stron, spośród 7 czynników branych pod uwagę jako czynniki jakości, trzy są ściśle powiązane z czasem. Są to:

• Czas ładowania strony mierzony metodyką Largest Contentful Paint (LCP). Oznacza to, że brany jest pod uwagę czas wyrenderowania „największego” elementu strony, zakładając, że on w największym stopniu wpływa na doświadczenie użytkownika.
• Czas uzyskania interaktywyności- czyli kiedy na stronie działają elementy, np. formularze
• Stabilność wizualna – czyli kiedy strona przestaje się „zmieniać”, doładowując kolejne komponenty.

Largest Contenful Paint (LCP) – szybkość największego elementu

Ten parametr z natury rzeczy ma odzwierciedlać wczytanie „najważniejszej” wizualnie części strony. Wcześniej dominował parametr FCP – First Contenfuil Paint, czyli moment pokazania się pierwszego elementu. Okazuje się jednak, że często nie koresponduje to z doświadczeniem użytkownika. Bazując na uproszczonym, ale zaskakująco sensownym założeniu, Google uznało, że kluczowe będzie wyrenderowanie w przeglądarce największego elementu. Kiedy zmierzymy czas, w jakim ten element został wyrenderowany, to można przyjąć, że najważniejsza (bo największa) część strony została wyrenderowana.

Pożądana wartość to maks. 2.5 sekundy.

First Input Delay (FID)

Ten parametr mierzy czas, po którym strona jest „interaktywna”. W wypadku stron, przy których dominują rozwiązania synchroniczne, czas ten może okazać się bardzo długi (np. kiedy dopiero sekwencyjne wczytanie wszystkich zasobów umożliwia interakcję ze stroną.

Pożądana wartość to mniej niż 100 ms.

Cumulative Layout Shift (CLS)

To miara wizualnej stabilności strony. Kiedy strona wciąż się ładuje, jej wygląda nieustannie zmienia się. Wygląda to tak, jakby kolejne boksy (tak naprawdę div’y na stronie) były stopniowo zapełniane zawartością: zdjęciami, filmami, tekstami itp. Każdy taki moment oznacza wizualną zmianę, która praktycznie uniemożliwia „konsumowanie” strony.

Pożądany wynik stabilności wizualnej to mniej niż 0,1.

Rola szybkości strony w Wyniku Jakości

System Google Ads pozwala na reklamowanie się w sieci wyszukiwania Google wg określonych słów kluczowych. Wskaźnik Jakości, czyli Quality Score, jest istotnym wskaźnikiem, wpływającym na efektywność działań reklamowych.

Wynik Jakości bierze pod uwagę trzy obszary:

• Relewantność słowa kluczowego
• Przewidywalną klikalność
• Doświadczenie strony docelowej

Im bardziej relewantne dla użytkownika są Twoje teksty reklam oraz zawartość strony docelowej, tym wyższe wyniki jakości. Wprawdzie Wynik Jakości nie przekłada się bezpośrednio na Ad Rank, czyli ranking Twojej reklamy – to, jak wysoko będzie się wyświetlać – ale ma wielki wpływ na efektywnie uzyskane ceny za kliknięcie.

W oficjalnych materiałach Google znajdziesz jasne wskazówki, że doświadczenie strony docelowej bierze pod uwagę zarówno to, czy treści na stronie czytelnie i jasno odnoszą się do zapytania użytkownika, jak i jak szybko strona działa. (Polecam: https://support.google.com/google-ads/answer/2404197?hl=en). Dlatego warto sprawić, by strona była szybka, zwłaszcza dla urządzeń mobilnych.

Okazuje się, że Wynik Jakości wpływa na realne koszty klikania w reklamy w Sieci Wyszukiwania, dlatego zachęcam Cię do maksymalizowania tego parametru. Popatrz, jak bardzo różnić się mogą koszty kliknięcia zależnie od uzyskanego Wyniku Jakości

Szybkość strony a konwersje i odrzucenia

Szybkość strony a współczynnik konwersji

Na blogu hubspot.com, uznawanym często za wiarygodne źródło marketingowych informacji, znalazłem interesującą infografikę, zestawiającą uśredniony współczynnik konwersji w zależności od czasu ładowania strony www.

To prowadzi do silnych wniosków. Jeśli Twoja strona ładuje się wolniej o 2-3 sekundy, to wg tych danych możesz stracić nawet POŁOWĘ współczynnika konwersji. Wydaje się zatem, że czas ładowania strony powinien być dla Ciebie krytycznie ważny.

Szybkość strony a współczynnik odrzuceń

O odrzuceniu mówimy, kiedy użytkownik Twojej strony wchodzi z wizytą, ale nie podejmuje żadnej interakcji i od razu zamyka stronę. Oczywiście co do zasady jest to stan niepożądany. Wysoki współczynnik odrzuceń najczęściej świadczy o tym, że strona nie spełniła oczekiwań skierowanego na nią ruchu.

Z powyższej analizy wynika, że współczynnik odrzuceń rośnie dość gwałtowanie już od trzeciej sekundy czasu wczytywania strony. Jeśli zależy Ci na minimalizowaniu tego czynnika – zdecydowanie warto przyłożyć się do optymalizacji strony i zapewnienia wydajnego hostingu.

Co może spowalniać ładowanie strony?

Wśród najpopularniejszych i najczęściej występujących czynników, które mogą spowalniać otwieranie się Twojej strony wymienić trzeba:

• Brak optymalizacji obrazów. Jeśli wrzucasz na stronę obrazy w pełnym wymiarze, a do tego jeszcze w wysokiej, fotograficznej jakości, nie dziw się, że Twoja witryna działa na zwolnionych obrotach. Aby to naprawić, skorzystaj z prostego, dostępnego w internecie programu, umożliwiającego sformatowanie i skompresowanie zdjęć.
• Stosowanie kodu niepoprawnego pod kątem standardów HTML. Jest to szczególnie istotne dla robotów indeksujących oraz przeglądarek.
• Przeładowanie serwisu skryptami oraz niekorzystanie z ładowania asynchronicznego, które zdecydowania usprawnia cały proces.
• Stosowanie stron przeładowanych funkcjami i wtyczkami, które serwer musi „przetworzyć” zanim będzie stanie wysłać je do przeglądarki. Koniecznie sprawdź zatem, czy strona nie jest nadmiernie przeładowana. Może się okazać, że zainstalowano do niej 2-3 pluginy, które realizują te same czynności.

Jak sprawdzić szybkość strony?

Google PageSpeed Insights

Szybkość strony możesz przetestować dzięki bezpłatnemu narzędziu Page Speed Insight od Google. Dzięki analizie wykonanej przy pomocy tej aplikacji dowiesz się, które elementy witryny internetowej należy usprawnić. Najlepiej jeśli zajrzysz przy okazji do naszego artykułu dotyczącego szybszego działania WodPress.

Narzędzie PageSpeed Insights po wskazaniu adresu strony wykonuje zaawansowaną analizę i wskazuje mnóstwo pól do optymalizacji.

Wskazania podzielone są na trzy kategorie:

• Rozwiązanie tego problemu może mieć duży wpływ na szybkość wyświetlania strony (oznaczone kolorem czerwonym).
• Rozważ rozwiązanie tego problemu, jeżeli nie będzie to wymagało zbyt wiele pracy (oznaczone kolorem żółtym).
• Znakomicie, brak poważnych błędów (oznaczone kolorem zielonym).

Im więcej „problemów” oznaczonych na czerwono rozwiążesz, tym witryna będzie ładować się szybciej, a Google bardziej ją polubi.

O wypowiedź w kontekście szybkości poprosiłem też znaną postać świata SEO w Polsce, doświadczonego pozycjonera, sędziego w konkursie semKRK Awards, Tomka Kołkiewicza:

OPINIA EKSPERTA

Szybkość ładowania strony z pewnością ma znaczenie, chociaż waga tego parametru jest dyskusyjna. Z jednej strony próby uzyskania maksymalnego wyniku w PageSpeed Insights nie przełożą się na widoczne efekty w wynikach wyszukiwania, z drugiej jednak warto poprawiać te zagadnienia, które drastycznie obniżają wynik prędkości ładowania.
Należy pamiętać, że Google nie bez powodu stworzyło narzędzia typu PageSpeed Insight oraz Lighthouse i zachęca do badania swoich stron.

Tomek kontunuuje:”Poprawa prędkości ładowania to ogromne korzyści dla samego Google w postaci oszczędności na procesach crawlowania stron. Wiąże się z tym również pojęcie budżetu crawlowania, którego optymalizacja jest jednym z celów technicznego SEO.

Chodzi o to, aby w czasie zarezerwowanym na odwiedzanie naszej witryny, robot mógł przeskanować jak najwięcej podstron, gdyż czas i transfer danych, jakie może przeznaczyć witrynie podlegają ścisłemu ograniczeniu. Same kryteria oceny prędkości stron zmieniają się również od czasu do czasu, co może wskazywać, że Google eksperymentuje ze swoimi heurystykami ocen. Przy optymalizacji czasu ładowania zalecam zdrowy rozsądek i zasadę 'good enough'”.

Pingdom

Innym popularnym narzędziem do mierzenia szybkości strony jest Pingdom.
Możesz skorzystać z niego na stronie http://tools.pingdom.com/. Pingdom, oprócz informacji o czasie wczytywania strony pokaże Ci również ile czasu ładują się jej poszczególne elementy oraz jakie typy operacji pochłaniają największą ilość czasu.

Podoba mi się zaangażowanie kolegów z Pingdoma, którzy najwyraźniej także są pasjonatami zagadnień, związanych z szybkością stron. W materiałach Pindom znajdziesz interesujące wyniki badań i ciekawostki.

Szybkość a optymalizacja. Jak przykładowe błędy na stronie mogą ją spowolnić.

Szybko działająca strony to dobry serwer, ale także – świetny, dobrze zoptymalizowany kod. Dobrze stworzona strona może działać szybko nawet na słabszym serwerze, jednak strona napisana słabo – nie zadziała dobrze nawet na najmocniejszym sprzęcie. Wielokrotnie widziałem strony, które ładowały się wolno z powodu błędów po stronie programistów-twórców, a nie zbyt słabego serwera. Oto trzy przykładowe błędy optymalizacyjne, które miałem okazję widzieć – żaden z nich nie wiązał się z samym serwerem i wszystkie można było wyeliminować stosując poprawki w kodzie strony:

Obciążające zapytania SQL przy każdym odświeżeniu strony lub wejściu na nią

Przykładowo – strona z ogłoszeniami, która na początku działała świetnie – po ok. 1-2 latach zaczęła wyraźnie zwalniać Szukaliśmy przyczyny tego stanu rzeczy – oglądalność stale rosła, ale nie uzasadniała takich opóźnień. Przyczyną okazał się fakt, że już na stronie głównej pojawiały się statystyki ogłoszeń, które były generowane przez skomplikowane zapytania SQL.

Te zapytania były wykonywane szybko, kiedy w bazie było mało rekordów, ale po 2 latach objętość bazy wynosiła już kilka GB, a ruch stale rósł. Analiza potrzeb wykazała, że statystyki te miały znaczenie wyłącznie marketingowe i nic nie stało na przeszkodzie, aby liczyć je raz na kilka godzin, a nawet raz na dobę, zamiast przy każdym wejściu na stronę.

Wprowadzenie modyfikacji kodu rozwiązało problem z szybkością natychmiast po wdrożeniu na serwerze.

Kod synchroniczny uzależniony od zewnętrznych odpowiedzi

Innym przypadkiem, który spotkałem w pracy był serwis z branży finansowej, jeden z bardziej znanych w Polsce. Serwis ten utrzymywany był na szybkich serwerach dedykowanych marki HP, opartych o szybkie macierze dyskowe oraz wielordzeniowe procesory, z dużą ilością pamięci RAM. Kiedy klient zaczął zgłaszać problemy ze spowalnianiem strony – byliśmy zatem zdumieni.

Szybka analiza potwierdziła, że serwer ma sporą rezerwę mocy. Winowajcą okazał się kod – odwoływał się on synchroniczne do zasobów z zewnętrznych źródeł (kursy walut, notowania giełdowe itp.) – i dopóki nie uzyskiwał odpowiedzi, proces wczytywania strony się zatrzymywał. Serwer zewnętrzny, dostarczający te dane, działał wolniej i miał własne problemy wydajnościowe, skutkiem czego serwer klienta często dostawał potrzebne informacje 2-3 sekundy później, a to już czas realnie odczuwalny jako spowolnienie. Wystarczyło przebudować komunikację na asynchroniczną, aby momentalnie strona przyspieszyła.

Nieprzemyślane zarządzanie plikami

Kolejnym przykładem jest nieprzemyślane zarządzanie plikami. To historia sprzed wielu lat, nieco już mniej aktualna wobec szybszych nośników danych niż wówczas, ale wciąż świetnie prezentująca podstawowe mechanizmy. Ponownie chodziło o serwis ogłoszeniowy.

Serwis działał coraz wolniej i wolniej. W pewnej chwili już tak wolno, że wydawało się, że jest przeciążony jakimś rodzajem ataku… przyczyna okazała się jednak zupełnie inna. Otóż podczas projektowania aplikacji programista przewidział folder na obrazy – zdjęcia przedmiotów ogłoszenia. Niestety – JEDEN folder. To oznaczało, że wszystkie auta (bo była to branża motoryzacyjna) – trafiały do tego samego folderu. Co gorsza – nigdy ich nie usuwano, nawet po usunięciu ogłoszenia. Skutkiem tego na serwerze szybko znalazł się blisko 1 milion plików w jednym folderze!

Jakiekolwiek odwołanie do takiego folderu i odnalezienie w nim pliku musiało trwać wiele sekund. Wystarczyło przeprojektowanie aplikacji, „rozrzucenie” obrazków na wiele folderów, a strona natychmiast „odżyła”.

O opinię na temat roli optymalizacji poprosiłem też Dankę Stawarz – doświadczoną deweloperkę:

OKIEM EKSPERTKI

Wyszukiwarka Google na to samo zapytanie wyświetla tej samej osobie inne wyniki na komputerze a inne na smartfonie. Główne założenie Googla jest takie, że na mobilu prawdopodobnie mamy słabsze łącze i moc obliczeniową, więc żeby nam dogodzić Google przy ustalaniu kolejności wyników na mobilu w większym stopniu bierze pod uwagę szybkość ładowania się strony.
Dodatkowa praca związana z optymalizacją zwróci się, zwłaszcza jeśli duża część użytkowników przegląda daną witrynę właśnie na smartfonach, a konkurencja zasnęła (z optymalizacją).
Ile konkretnie można zyskać?
Sprawdziłam wyniki dla stron firmowych naszych klientów. Dzięki optymalizacji są średnio 10-30 pozycji wyżej na mobilu niż na desktopie. To wystarcza, żeby częściej lądowały w pierwszej dziesiątce wyników, która gwarantuje najlepszą klikalność.

Rodzaj serwera a szybkość ładowania strony

W zależności od Twoich oczekiwań, preferencji oraz typu strony, wybierając serwer możesz zdecydować się na:

• Hosting współdzielony, czyli przestrzeń dyskową, którą dzielisz z innymi użytkownikami. W przypadku serwera współdzielonego masz wspólny numer IP oraz zasoby sprzętowe.
• Serwer VPS to rozwiązanie pośrednie, które plasuje się pomiędzy serwerem współdzielonym, a serwerem dedykowanym. Wykupując serwer VPS otrzymasz serwer wirtualny, ale z gwarantowaną mocą obliczeniową.
• Serwer dedykowany to serwer, którego nie musisz dzielić z nikim. Korzystając z takiego rozwiązania całą przestrzeń dyskową masz do swojej dyspozycji. Dzięki temu Twoja strona ładuje się szybciej i lepiej działa. Pamiętaj tylko, że wymaga on zazwyczaj zaangażowania w administrację.

Który z nich najlepiej sprawdzi się w kontekście szybkości otwierania poszczególnych podstron?

Jeśli zależy Ci na tym, by strona otwierała się maksymalnie szybko, najlepszym rozwiązaniem okaże się serwer dedykowany. Prawda jest jednak taka, że tylko nieliczni mogą pozwolić sobie na ponoszenie kosztów takiego rozwiązania. Jego zalety będę szczególnie odczuwalne dla właścicieli dużych sklepów internetowych i rozbudowanych serwisów z dużą ilością podstron, zdjęć czy plików video.

Ponieważ współczesne technologie przyspieszające, jak LiteSpeed Cache czy Redis potrafią zdziałać „cuda”, to dobrze przygotowane środowisko współdzielone z hostingiem dla WordPress czy hostingiem dla PrestaShop może tu naprawdę błyszczeć.

Artykuł Szybkość strony. Jak docierać do większej liczby klientów? pochodzi z serwisu cyber_Folks.

Porównanie WordPress 5.5 vs 5.4 – szybkość

Szybkość ładowania stron www jest bardzo, bardzo ważna i bez wątpienia staje się coraz bardziej istotna w osiąganiu sukcesów w Sieci. Zaledwie kilka dni temu pojawiła się wersja WP 5.5. Magda Paciorek popełniła obszerny wpis, tłumacząc, jak ostatnia aktualizacja WordPress wzbogaciła funkcjonalnie WordPress’a. To znakomity artykuł, bardzo polecam go Twojej uwadze.

Ja z kolei podjąłem wyzwanie sprawdzenia, jak zmiany w WordPress będą rzutować na szybkość ładowania strony.

Jest ona przecież bardzo ważna, przede wszystkim dla właścicieli e-commerce, a tandem WordPress + WooCommerce należy do najczęściej stosowanych w Polsce rozwiązań. To dlatego chciałem wykonać te testy z uwzględnieniem właśnie WooCommerce.

Porównanie WordPress 5.5 z 5.4 – środowisko testowe

Środowiskiem testowym był szybki hosting dla WordPress w cyberfolks.pl. Na to rozwiązanie składają się komponenty sprzętowe oraz programistyczne. Sprzętowe to szybkie procesory i macierze NVMe, zapewniające bardzo wydajną pracę systemu dyskowego.

Po pierwsze – zasoby programowe obejmują LS Cache po stronie serwerowej, w pełni kompatybilne z popularną wtyczką przyspieszającą WordPress LiteSpeed Cache.

Po drugie ważnym komponentem o istotnej roli dla szybkości, a zwłaszcza – wydajności, jest REDIS – serwer umożliwiający cacheowanie obiektowe.

Ponieważ w teście chodziło o porównanie WordPress 5.5 z 5.4, zainstalowałem obie wersje w osobnych folderach na tym samym koncie hostingowym. Korzystałem z wygodnego mechanizmu instalacji Installatron, dostępnego w ramach panelu DirectAdmin (wygodny przycisk „instaluj WordPress”). Być może należysz do osób obawiających się autoinstalatorów.

Wielu deweloperów woli własne, w pełni customowe paczki i w pełni rozumiem takie podejście. Celem testu było szybkie porównanie dwóch tak samo skonfigurowanych systemów. Porównanie wyłącznie pod kątem szybkości działania, bez wnikania w zagadnienia bezpieczeństwa czy funkcjonalności.

Po instalacji (kilkadziesiąt sekund dla każdej wersji) zalogowałem się do kokpitu każdego z WordPress’ów oraz zainstalowałem WooCommerce. Wybrałem bezpłatny motyw Storefront i zaimportowałem przykładową bazę produktów. Taką prostą bazę kilkudziesięciu produktów demo możesz wgrać samodzielnie, korzystając z pliku sample-data/sample_products.csv w folderze z wtyczką.

Porównanie WordPress 5.5 i 5.4 – certyfikat SSL i tak konieczny

Ponieważ mówimy o porównaniu szybkości, to zależało mi na działaniu protokołu HTTP/2 i funkcji PUSH. Te rozwiązania wymagają protokołu HTTP/S, dlatego certyfikat SSL był konieczny. W rezultacie postanowiłem zainstalować szybko bezpłatny certyfikat SSL Let’s Encrypt. W panelu DirstAdmin generowanie certyfikatu SSL to prosta czynność dlatego certyfikat wygenerowałem w ok. 30 sekund i w związku z tym od razu wszystko było gotowe do pracy.

WordPress 5.5 i WordPress 5.4 instalowałem w tej samej roboczej domenie, a tylko w różnych ścieżkach, wystarczył jeden certyfikat SSL. Jeśli chcesz dowiedzieć się, jak instalować SSL Lets’s Encrypt – opis znajdziesz w systemie pomocy.

Porównanie WordPress 5.5 i 5.4 – uruchomienie REDIS

Porównanie systemów zakładało dwa warianty, tj. wersję bez pełnego wspomagania tym, co w hostingu dla WordPress nazywamy pakietem cyber_Boost, oraz z włączonymi wszystkimi funkcjami przyspieszającymi.

Zanim rozpocząłem pomiary – przygotowałem do pracy serwer REDIS. To prosta operacja, podczas gdy logujesz się do panelu DirectAdmin wybierasz opcję „Serwer Redis” i uzyskujesz dane dostępowe. Będą Ci potrzebne:

• Adres serwera
• Port do zestawienia połączenia
• Hasło, które otrzymasz po kliknięciu przycisku

Uzyskane dane dostępowe pozwalają skonfigurować wtyczkę LS Cache. Cały czas chodzi o porównanie WordPress 5.5 i 5.4 więc wszystkie czynności wykonywałem w kokpicie obu instalacji.

Po lewej stronie kokpitu i wybraniu opcji ustawień LiteSpeed Cache wybieram zatem „Pamięć podręczna”, a następnie w zakładce „Object” (szósta zakładka w menu LiteSpeed Cache) włączam opcje:

• Pamięć podręczna obiektów
• Metoda REDIS
• Host – uzupełniam domyślne pole 'localhost’ pole danymi uzyskanymi z panelu
• Port – zastępuje domyślny port serwera REDIS 6379 portem uzyskanym z panelu
• Hasło – uzyskane w panelu

Po zapisaniu zmian uzyskuję u góry ekranu potwierdzenie prawidłowego zestawienia połączenia z serwerem REDIS.

Porównanie WordPress 5.5 z 5.4 może zatem się rozpocząć. Całe środowisko hostingu dla WordPress jest gotowe, zainstalowane są 2 strony na WordPress ze sklepem WooCommerce, różnią się wyłącznie wersją WordPress’a.

WordPress 5.5 vs 5.4 – pierwsze testy

Pierwsze testy opierały się o pomiar wczytywania strony w Google Chrome – zakładka NetWork, cache lokalne przeglądarki wyłączone. Mierzyłem czas DOM Content Ready oraz Load wskazywane przez Google Chrome. Testy miały dwa wymiary:

1. Porównanie WordPress z cache’owaniem przy pomocy REDIS i LiteSpeed Cache oraz bez stosowania cache’owania.
2. Porównanie WordPress 5.5 vs WordPress 5.4 pod kątem wydajności

Metodyka porównania zakładała 10-krotne wykonanie testu.

Wyniki poszczególnych pomiarów dla wersji z przyspieszeniem LS Cache i REDIS

Te same testy wykonałem, wyłączając wcześniej wtyczkę LS Cache, a więc jednocześnie rezygnując ze wsparcia REDIS’a.

Wyniki poszczególnych pomiarów dla wersji WordPress BEZ właczonego LS Cache i REDIS

Po uśrednieniu wyników pomiarów okazywało się, że wyniki wcale nie są korzystne dla nowej wersji WordPress 5.5, popatrzcie sami:

Powyższy wykres pokazuje wyraźnie, że jeśli Twój hosting dla WordPress ma mechanizmy przyspieszające działanie strony – koniecznie z nich korzystaj! LS Cache oraz REDIS w wypadku tego prostego testu dały w rezultacie ponad dwukrotne skrócenie czasu ładowania, to ogromna różnica!

Podczas gdy porównując WordPress 5.5 i 5.4 widzimy, że aktualizacja WordPress do wersji 5.5 niekoniecznie poprawiła mierzone tym testem parametry. Bez wątpienia różnice rozkładają się na korzyść poprzedniej wersji i są jeszcze bardziej widoczne tam, gdzie nie ma mowy o włączonym cache’owaniu.

Dlatego włączenie technologii przyspieszających WordPress (LiteSpeed Cache i REDIS) bez wątpienia powoduje, że czasy ładowania skracają się radykalnie. Po drugie – różnice między wersjami bezsprzecznie ulegają zatarciu, bo 12,3 tysięcznej części sekundy trudno uznać za istotną różnicę. Podsumowując: bez wątpienia nowe funkcje, które wnosi aktualizacja WordPress 5.5 w pełni ją rekompensują.

Szybkość WordPress zmierzona w oparciu o GTmetrix

Dyskusja tych wyników w naszym gronie wywołała sporo emocji. Okazało się, że różnice wydajnościowe, które w moich testach były niewielkie, w rezultacie u innych osób, w innych miejscach, korzystających z innych łącz o słabszych parametrach – wykazywały przewagę WordPress po aktualizacji.

Aby to rozwikłać postanowiliśmy sięgnąć po inne narzędzie i przeprowadzić test w oparciu o API GTmetrix.

Porównanie WordPress 5.5 i 5.4 – wyniki uwzględniają LS Cache i REDIS

Zwróć uwagę, że mimo, iż czas DOM content loaded time w WP 5.5 jest znacznie dłuższy, to jednocześnie Window onload time – znacznie się skróciły. To ważne, ponieważ te parametry są brane pod uwagę przez narzędzia pomiarowe Google.

Podsumowując szybkość WordPress…

Testując wersje WP przeprowadziłem pomiary na tym samym serwerze. Były to testy z jednym użytkownikiem i nie objęły testowania wydajnościowego. Najpierw zainstalowałem identyczne sklepy z tym samym zestawem produktów. Następnie tak samo skonfigurowałem funkcje przyspieszające. Wówczas przystąpiłem do pomiarów.

Okazało się, że instalacje WordPress 5.4 i 5.5 wraz z WooCommerce i Storefront gdy różnią się tylko wersją rdzenia, dają inne wyniki.

Niektóre parametry wydają się być lepsze, podczas gdy inne słabsze. Moim zdaniem ważniejsze dla doświadczenia użytkownika są parametry wskazane w teście GTmetrix, a różnice zmierzone w wyszukiwarce okazały się być nieznaczne i zależne od lokalizacji użytkownika.

Reasumując, wydaje się, że pozytywne zmiany zmierzone w GTmetrix, w połączeniu z nowymi funkcjami wynikającymi z aktualizacji WordPress to kolejne, obok bezpieczeństwa i funkcjonalności, argumenty za przejściem na nową wersję.

A jak tam Twój WordPress? Korzystasz już z aktualizacji WordPress do 5.5, czy na razie zostajesz przy 5.4? Daj znać w komentarzu, jakie są Twoje doświadczenia z WordPress’em.

Artykuł Porównanie WordPress – jak śmiga hosting z WordPress 5.5 vs 5.4? pochodzi z serwisu cyber_Folks.

W tym artykule:

• XAMPP – co to takiego?
• Cztery problemy przy migrowaniu na produkcję
• Jak pracować z XAMPP, żeby przenoszenie było łatwe i przyjemne.

XAMPP. Co to jest i jak programiści go używają?

W wielkim uproszczeniu, XAMPP stanowi bezpłatny, wieloplatformowy oraz zintegrowany pakiet zbudowany z bazy danych – MariaDB, kompatybilnej z MySQL, serwera www oraz interpreterów i ewentualnie dodatkowych komponentów.

To nic innego jak darmowy serwer WWW umożliwiający obsługiwanie serwisów internetowych. Ten program może być udostępniany na czterech platformach: Linux, Windows, OS X oaz Sun Solaris. XAMPP wyróżnia się bajecznie łatwą instalacją all-in-one. Jego głównym „konkurentem” jest – także bezpłatny – pakiet WAMPP, skierowany przede wszystkim do użytkowników Windows. Używałem obu rozwiązań – wydaje mi się, że to kwestia preferencji osobistych – mnie z XAMPP pracowało się po prostu wygodniej. Sam pakiet XAMPP możesz pobrać z oficjalnej strony projektu i jest to całkowicie bezpłatne.

XAMPP to idealny obszar do rozległego działania programistów oraz testerów potrzebujących szybkiego i sprawnego przeanalizowania oraz zweryfikowania konkretnych skryptów na lokalnym komputerze. Potrzeba stosowania zewnętrznego serwera znika lub jest zminimalizowana. W skrócie – to oprogramowanie sprawiające, że Twój PC czy laptop zachowuje się podobnie jak serwer www. Oczywiście w sensie programowym, bo sprzętowo nic się nie zmienia. Z perspektywy początkujących deweloperów jak najbardziej działanie XAMPP jest wystarczające oraz w pełni komfortowe. Pakiet jest wygodny. Zmiany nanoszone w kodzie od razu są widoczne w działaniu, wystarczy odświeżyć stronę, nie trzeba niczego kopiować na serwer.

Jeśli jesteś programistą to znasz to uczucie zbliżania się do końca projektu. Po wielu godzinach pracy, nadchodzi ten moment, kiedy osoba jak Ty (albo jak ja, kilka lat temu) – kopiuje pliki na „prawdziwy” serwer. Ot, na przykład taki hosting www w cyberfolks.pl… wpisuje adres swojej nowej strony w pasek przeglądarki i … i nic! Albo – częściej – tajemnicze błędy na ekranie.

Z czego wynikają kłopoty z migracją ze środowiska developerskiego na produkcyjne? Poniżej, jako „weteran” XAMPP’a dzielę się z Tobą swoimi błędami i doświadczeniami. Mam nadzieję, że uznasz je za przydatne i dzięki temu wpisowi uda Ci nie powtórzyć moich błędów. No, to jedziemy:

XAMPP. Kod nie działa? Wielkość liter ma znaczenie!

By projekt w PHP czy MySQL właściwie działał również po przeniesieniu na produkcję, weź pod uwagę wielkość liter. Wbrew pozorom ma ona ogromne znaczenie dla poprawności pracy. Zalecam konsekwencję w używaniu wielkości znaków. Kluczowe jest stosowanie niezmiennie identycznego wzoru zapisu – z dużych, bądź małych liter – od początku do końca tak samo. Tak jak plik się nazywa, musi zostać wywołany w kodzie – i wielkość liter ma znaczenie.

Dzieje się tak, ponieważ systemy Windows i Linux różnie traktują odwołania do nazw plików pisanych wielkimi i małymi literami. System Windows, a więc ten, na którym prawdopodobnie rozwijasz swój projekt lokalnie, będzie działać równie dobrze nawet, jeśli np. nazwy plików są innymi literami niż wskazano to w kodzie. Przykładowo w kodzie masz wywołanie:

include('plik-dodatkowy.php');

a na serwerze plik ma nazwę 'Plik-dodatkowy.php’. Różnica tkwi w pierwszej literze. W systemie Windows taki kod zadziała, w systemie Linux, a więc na większości produkcyjnych hostingów – niestety nie. Zazwyczaj taki błąd jest sygnalizowany informacją, że nie można znaleźć poszukiwanego pliku:

Warning: include(plik-dodatkowy.php): failed to open stream: No such file or directory in C:\xampp\htdocs\test\index.php on line 3

Warning: include(): Failed opening 'plik-dodatkowy.php' for inclusion (include_path='C:\xampp\php\PEAR') in C:\xampp\htdocs\test\index.php on line 3
 

Podobnie rzecz się ma z nazwami w poleceniach SQL. Nazwy np. tabel w bazie muszą być wywołane w kodzie tak samo, jak zostały zdefiniowane na serwerze. O ile domyślna instalacja XAMPP na Windows poradzi sobie nawet w razie konfliktu nazw, o tyle w wypadku hostingu produkcyjnego niemal na pewno rozbieżności w wielkości liter doprowadzą do błędów w działaniu aplikacji.

Te błędy są nieco trudniejsze do namierzenia. Przecież skoro działa „na deweloperce” to większość osób nie będzie w stanie zrozumieć, dlaczego nie działa „na produkcji”. Zależnie od tego, jak skonfigurujesz wyświetlanie błędów – błędy SQL mogą także nie wyświetlać się na ekranie w sposób w pełni czytelny. Jeśli chcesz wiedzieć więcej zapraszam do wpisu o błędach w PHP. Kiedy jednak masz pewność, że wszystko inne działa, a problemem są polecenia sql – koniecznie sprawdź wielkość liter w nazw tabel i pól.

XAMPP a wersja PHP na serwerze

Punkt drugi to wersja PHP. Przeważnie XAMPP jest zainstalowany z określoną wersją PHP, dlatego też warto wiedzieć jaka jest to wersja. Dzięki temu w razie wystąpienia ewentualnych trudności po przeniesieniu na serwer komercyjny możesz szybko i sprawnie zweryfikować, czy wersja na serwerze jest zgodna z tą w XAMPP.

Niektóre funkcje pojawiają się w określonych wersjach, inne przestają być wspierane. Najgorsza chyba z punktu widzenia diagnostyki sytuacja, to kiedy funkcja w jakiejś wersji PHP zachowuje się inaczej niż w wersji poprzedniej. Czyli niby działa, ale daje inny wynik.

Przykład
Funkcja mb_strtoupper() zamienia alfabetyczne litery ciągu (Unicode) na wielkie. Sama funkcja nie jest nowa, jednak wynik jej działania różni się między PHP 7.3 i poprzednimi wersjami. Chodzi o obsługę niektórych znaków, w szczególności w języku niemieckim. Dla niektórych może to mieć duże znaczenie w aplikacjach, a także w SEM/SEO, bo fraza „Straße” po przekształceniu w wielkie litery nie brzmi teraz „STRAßE” ale „STRASSE” i niektóre systemy mogą ją rozpoznać jako całkiem inne słowo niż do tej pory.

Tego typu zmiany w działaniu funkcji przy przechodzeniu między, pozornie bardzo podobnymi, wersjami PHP mogą powodować trudne do zdiagnozowania problemy. Dlatego pracując z XAMPP upewnij się, że na hostingu produkcyjnym oraz na Twoim lokalnym komputerze pracujesz w tej samej wersji PHP.

Co, jeśli ta wersja jest różna?

Zazwyczaj łatwiej jest zmienić tę wersję na serwerze. Dobre hostingi wspierają kilka wersji PHP, umożliwiają łatwe i szybkie zmienianie wersji PHP z poziomu panelu do zarządzania serwerem (w naszym wypadku: DirectAdmina). W pakiecie XAMPP domyślnie jest instalowana określona wersja PHP. Najłatwiej jest od razu pobrać XAMPP’a z właściwą wersją. Nie znam prostego, szybkiego sposobu na zmianę wersji na już działającym XAMPP’ie – w jego panelu sterowania nie ma takiej funkcji. Jest to zatem zadanie o wiele bardziej skomplikowane niż jedno kliknięcie w panelu.

Rekomenduję oczywiście pracę w najnowszej możliwej (stabilnej) wersji, wspieranej przez hosting. W chwili pisania tego artykułu na hostingu w cyberfolks.pl jest to PHP 7.4.

XAMPP – jak uzyskać dostęp do bazy danych?

Trzeci problem z jakim mogą spotkać się początkujący programiści ma z kolei związek z bazami danych. Warto pamiętać, aby po przenosinach projektu z serwera lokalnego w odpowiednich plikach konfiguracyjnych projektu przewidzieć odwołania do „nowej” bazy danych na serwerze produkcyjnym.

Bywa jednakże tak – zwłaszcza na dalszych etapach prac – że przydaje się posiadanie lokalnych plików oraz produkcyjnej bazy danych. Wówczas często rodzi się trudność związana z ograniczeniem wprowadzanym często przez firmy hostingowe. Przez to ograniczenie Twoja strona może się łączyć z bazą danych tylko, jeśli jest na tym samym serwerze.

Pliki znajdujące się na lokalnym komputerze nie będą do bazy dopuszczone. Firma hostingowa często domyślnie blokuje dostęp do bazy z hostów zewnętrznych. Jest to polityka dość sensowna, ograniczająca możliwość ataków na bazę. W tym wypadku utrudnia jednak pracę.

Aby sobie z tym poradzić, w panelu administracyjnym firmy hostingowej dopisz konkretny adres IP, jako dozwolony dla danej bazy danych. Alternatywnie zastosuj znak procent, który w MySQL oznacza dowolny ciąg znaków. Uważaj jednak, bo wówczas baza produkcyjna na serwerze firmy hostingowej będzie dopuszczała ruch z każdego adresu IP. To na pewno wygodne, ale niekoniecznie dobre z punktu widzenia bezpieczeństwa rozwiązana. Umiem sobie wyobrazić takie ustawienie na czas prac, kiedy jeszcze w systemie nie ma produkcyjnych danych. Zdecydowanie radzę jednak docelowo ograniczyć dostęp do bazy do localhost oraz ewentualnie adresu IP Twojego komputera, z którego pracujesz.

Oczywiście bazy danych MySql także mają swoje wersje, a w firmach hostingowych można spotkać takie mechanizmy jak Percona czy MariaDB. Są one jednak zasadniczo zgodne z tym, co masz dostępne w XAMPP. Podczas moich prac nie napotkałem żadnej sytuacji, w której to wersja silnika bazodanowego powodowałaby problemy przy przełączaniu między środowiskiem rozwojowym a produkcyjnym, tym niemniej może wynika to z dość podstawowych poleceń SQL, jakie stosuję w moich projektach. Zdecydowanie większy wpływ na działanie aplikacji ma w praktyce zachowanie zgodności wersji PHP.

XAMPP a… ukośniki! Serio!

Na koniec – co nie znaczy, że jest to najmniej ważne – ukośniki. Generalnie występują ich dwa typy –forward slash i back slash – pierwszy z nich oddziela ścieżki w Linuksie i adresach URL, drugi zaś w Windowsie. Slash w jedną bądź w drugą stronę ma zatem zasadnicze znaczenie.

Jeszcze więcej o XAMPP?

Miło mi, że jesteś w tym punkcie wpisu. Planuję kolejne publikacje na temat XAMPP, natomiast ich ukazanie się jest uzależnione od zainteresowania. Jeśli więc uważasz, że warto, że temat jest ciekawy lub przydatny – daj znać w komentarzu!

Powodzenia z Twoimi projektami A może napotkałeś inne problemy podczas przenoszenia projektów ze środowiska XAMPP na serwer produkcyjne? Napisz w komentarzu, jakie są Twoje doświadczenia z rozwiązaniami typu XAMPP/WAMP Server. A może jako deweloper uważasz, że inni, zwłaszcza początkujący, mogą napotkać opisane sytuacje? Podziel się treścią w sieciach społecznościowych, koledzy na pewno będą Ci wdzięczni.

Zapraszam do dyskusji.

Artykuł Xampp – Jak sprawić, żeby działało na produkcji… pochodzi z serwisu cyber_Folks.

Piękny e-commerce w oparciu o historię polskiego designu, ale kiedy właściwie to wszystko się zaczęło?

Tak naprawdę to… w 1960. Józef Chierowski zaprojektował wówczas najpopularniejszy mebel połowy XX wieku – Fotel 366. Dzięki minimalistycznemu wzornictwu i lekkiej konstrukcji drewnianej odniósł natychmiastowy sukces i w krótkim czasie wkrótce znalazł się w prawie każdym biurze, kawiarni i restauracji w Polsce. Fotel 366 był produkowany przez ponad 20 lat. W 2014 marka została reaktywowana.

Cele i wyzwania strony

Od początku było jasne, że marka z taką tradycją, nie bójmy się powiedzieć – marka legendarna – nie może bazować na zwykłym, gotowym szablonie i potrzebuje czegoś wyjątkowego. Wyzwania podjęli się Adchitects.

Adchitects to zespół łączący kreatywne i techniczne umiejętności. Dostarcza produkty cyfrowe (strony www, e-commerce oraz aplikacje webowe i mobilne) głównie dla klientów ze Stanów Zjednoczonych. Od kilku lat plasuje się w czołówce najlepszych firm dostarczających web design według serwisu Clutch (średnia ocen 4.9/5.0).

Ze swojej strony dodam, że sam jako klient przechodziłem proces oceny projektu w Clutch i recenzje w tym serwisie są wyjątkowo wysokojakościowe. Publikacja mojej recenzji była poprzedzona blisko godzinną rozmową z konsultantem z USA, szczegółowo wypytującym o przebieg projektu. Tym większy szacunek dla kolegów z Adchitects za ten świetny wynik. Wróćmy jednak do samego projektu.

Projekt wymagał połączenia tradycyjnej estetyki lat 60-tych i 70-tych z nowoczesnymi rozwiązaniami, jakie zapewnia Internet. Dodatkowo – ze względu na globalny charakter marki – konieczne było zapewnienie sprawnego działania praktycznie w dowolnym miejscu świata i w kilku językach.

Kuba Luty, CEO Adchitects

Jak się okazuje, ma to też swoje przełożenie na późniejsze decyzje technologiczne. Jako, że sklep działał na WooCommerce – naturalnym wyborem wydawał się właśnie szybki hosting dla WordPress. Tego rodzaju rozwiązania są w stanie zaoferować znacznie więcej niż tylko podstawową obsługę baz czy plików.

„Mamy sprawdzone rozwiązania dla rynku amerykanskiego, ale szukaliśmy czegoś, co da podobną jakość w cenie dopasowanej do polskiego klienta . Pracowaliśmy wtedy z cyber_Folks nad ich stroną www, więc nie musieliśmy daleko szukać.

W jeden dzień postawili nam stronę testową, która już na pierwszy rzut oka działała dużo szybciej. Kolejne testy wprowadzały nas natomiast w coraz większe zdumienie, bo uzyskane wyniki były wielokrotnie lepsze od tego do czego przyzwyczaiły nas polskie hostingi.”

I tu wchodzi hosting dla WordPress z cyber_Folks…

Rafał Pawlak, Head of Service Delivery w Adchitects

W cyber_Folks przenieśliśmy stronę na hosting dla WordPress i zadbaliśmy o pełne wykorzystanie potencjału specjalistycznych rozwiązań, które nazywamy łącznie pakietem cyber_Boost. Działania polegały na przeniesieniu danych (plików, bazy) na wysokowydajne środowisko. W jego skład wchodziły m.in.

Na stronę tego typu sklepu nie wchodzisz codziennie, wchodzisz na nią w zasadzie poszukując wyjątkowych mebli. To oznacza, że siła „pierwszego wrażenia” jest ogromna, zazwyczaj bowiem nie ma „drugiej szansy” przekonania do siebie użytkownika.

Przy projekcie na skalę globalną braliśmy pod uwagę takie sprawy jak… prędkość światła! Otóż wg obecnego stanu wiedzy światło porusza się z prędkością ok. 300 tys. km/s i jest to maksymalna prędkość rozchodzenia się oddziaływań we wszechświecie. Załóżmy więc teoretycznie, że z taką właśnie sygnał z serwera biegnie do przeglądarki użytkownika. Odległość między Los Angeles i Warszawą to ok. 9 tys km, co daje ok. 30 ms. Każde zapytanie o dane biegłoby ok. 30 ms z przeglądarki do serwera i wracało w tym samym czasie. Przy złożonej stronie, kiedy zasobów jest wiele – opóźnienia szybko mogłyby skumulować się w całe sekundy. Wykorzystanie protokołu HTTP/2 wraz z funkcją PUSH, a także automatycznie łączenie zasobów takich jak JS czy CSS z kilu małych plików w mniej większych zapewniło nam minimalizację tego niekorzystnego zjawiska.

• Dyski NVMe dla szybkiego dostępu do danych.
• Serwer REDIS dla obiektowego cache zapytań bazodanowych, dzięki czemu, zwłaszcza przy użym obciążeniu, serwer musi wykonać znacznie mniej komend SQL.
• LS Cache – technologia przyspieszająca działanie strony w sposób kompleksowy, ale głównie cachując wyniki dynamicznych skryptów.
• Włączenie HTTP/2 dzięki czemu zasoby były ładowane równolegle.
• Włączenie HTTP/2 PUSH dla JS I CSS, dzięki czemu zasoby są wypychane do przeglądarki ZANIM ona jeszcze o nie poprosi.
• Optymalizacja obrazów.

Hosting dla WordPress, projekt w stylu retro, a i tak braliśmy pod uwagę… prędkość światła!

Istotnym elementem jest też działanie systemu DNS. W cyber_Folks stosowane są serwery DNS Anycast. Dzięki tej technologii klienci korzystają z kilkunastu serwerów DNS na 6 kontynentach. Użytkownikowi strony odpowiada ten serwer DNS, który jest najbliżej użytkownika. Na samym pierwszym wejściu na stronę, póki jeszcze odpowiedź z DNS nie znajduje się w lokalnym cache, można oszczędzić w praktyce nawet 90% czasu odpytania, co realnie przekłada się na ok. 100 ms.

Kiedy więc meble ze sklepu 366concept.com zechce zamówić ktoś ze Stanów Zjednoczonych, to przy wejściu na stronę odpowie mu serwer DNS Z Kalifornii (San Jose) lub z Nowego Jorku. Nie będzie konieczne czekanie na odpowiedź z Europy. DNS Anycast można zatem po części przyrównać do działania popularnych sieci CDN, tylko w odniesieniu do zapytań DNS’owych.

Przyspieszenie było widoczne gołym okiem, uczucie reagowania sklepu na zachowanie użytkownika zmieniło się radykalnie. Są to dość subiektywne uczucia, dlatego zmierzyliśmy wartości obiektywne. Testy w narzędziu dla deweloperów wykonano w lokalizacji Wrocław, fizycznie dane znajdują się natomiast w Gdańsku.

Przyspieszony ecommerce

Analiza wczytywania drzewa DOM ujawniła ogromną różnicę względem starego i nowego hostingu. Mechanizmy HTTP/2, szybka baza danych i cacheowanie LS Cache „zrobiły robotę”, redukując czas DOM Load o spektakularne 90%. Co ważne – taka oszczędność czasu nie wymagała dodatkowych roboczogodzin po stronie twórców strony.

Testy syntentyczne wykonano w oparciu o narzędzie Lighthouse. Zarówno w widoku dla urządzeń mobilnych, jak i stacjonarnych zanotowano spektakularny przyrost wyniku. Scoring poprawił się 268%!

Współzałożyciel marki 366 Concept podsumowuje:

Chcesz doświadczyć czegoś podobnego? W takim razie koniecznie pomyśl o przeniesieniu strony na szybki hosting dla WordPress u nas. Aby Ci to ułatwić, przygotowaliśmy informacje o tym, jak wygląda samo przeniesienie.

Przyspieszenie sklepu na poszczególnych podstronach

Jak o efektach mówi klient właściciel sklepu?

Będzie mi miło, jeśli napiszesz w komentarzu, jak podoba Ci się sklep 366Concept.com i co sądzisz o takim przyspieszeniu w eCommerce. Zapraszam do dyskusji!

Chcesz doświadczyć czegoś podobnego? W takim razie koniecznie pomyśl o przeniesieniu strony na szybki hosting dla WordPress u nas. Aby Ci to ułatwić, przygotowaliśmy informacje o tym, jak wygląda samo przeniesienie.

Chcesz, aby Twoja strona działała niezawodnie i maksymalnie szybko? Sprawdź, w jaki sposób CDN może skrócić czas ładowania Twojej witryny – wybierz nasz Pakiet Wydajność!

Będzie mi miło, jeśli napiszesz w komentarzu, jak podoba Ci się sklep 366Concept.com i co sądzisz o takim przyspieszeniu w eCommerce. Zapraszam do dyskusji!

Artykuł Hosting WordPress. Sklep 366 Concept przyspiesza o 90%. I to jest ecommerce! pochodzi z serwisu cyber_Folks.

Z artykułu dowiesz się:

• Co jeszcze możesz zrobić dzięki narzędziom dla programistów?
• Na czym polega kompresja tekstu?
• Jak zmienić rozmiar zdjęcia?
• Tajemnice klawisza F12 – krótkie podsumowanie.

Najpierw audyt

W poprzedniej części poradnika dla deweloperów znajdziesz informacje dotyczące audytu strony. Jest on niezbędny do dalszych działań, bowiem dzięki niemu będziemy wiedzieć, co może doprowadzać do spadków wydajności. Na jego podstawie możemy dużo łatwiej podjąć działania naprawcze. W samym samouczku od Google dotyczącym naprawy strony dostajemy dobrą radę, która brzmi: „Eksperymentuj”. To bardzo cenna wskazówka, bo faktycznie czasami niewielkie zmiany, które wydają się kosmetycznymi usprawnieniami, mogą mieć duży wpływ na szybkość ładowania się strony.

Skoro już mowa o audycie, to pamiętaj, że poza audytem „technicznym”, dostępnym pod F12 możesz także korzystać z bezpłatnego narzędzia do audytowania semantycznego stron. Dzięki niemu uzyskasz dodatkowe wskazówki, dotyczące Twojej strony www, w warstwie „marketingowej”.

Włączenie kompresji tekstu

Kompresja tekstu może być jednym z dobrych sposobów na poprawienie wydajności strony. Polega ona na zmniejszeniu rozmiaru pliku tekstowego przed wysłaniem go przez sieć. Jest to coś w rodzaju sposobu spakowania folderu przed wysłaniem go pocztą e‑mail, aby zmniejszyć jego rozmiar. Zanim jednak włączymy kompresję, musimy sprawdzić, czy zasoby tekstowe są kompresowalne. Jak to zrobić?

Po wykonaniu raportu należy kliknąć w zakładkę „Network” (Sieć), a następnie po lewej stronie pod wierszem z napisem „Filter” musimy zaznaczyć okienko „Use Large Request Rows”. W ten sposób w kolumnie „Size” pojawią się dwie wartości liczbowe. Pierwsza wartość to rozmiar nieskompresowanego zasobu, a druga rozmiar zasobu pobieranego podczas ładowania WWW. Jeśli dwie wartości są takie same, zasób nie jest kompresowany, gdy jest wysyłany przez sieć.

Inny sposób sprawdzenia tego elementu to klikniecie w dowolny plik z listy (kolumna „Name”), a następnie kliknięcie w zakładkę „Headers”. Otrzymamy wtedy informację o danym pliku, w której ważna jest dla nas następująca linijka: content‑encoding:. Jeśli takowej nie posiadamy, to znaczy, że nasz plik nie jest kompresowalny, a jeśli po dwukropku znajduje się informacja gzip, deflate lub br, to znaczy, że możemy nasz plik poddać kompresji.

Aby skompresować tekst, musimy dodać następujący kod do pliku zarządzającego przesyłem danych na serwerze. Na naszych serwerach kompresja podatnych typów plików jest włączona domyślnie. Jeśli korzystasz z serwera, na którym nie jest to domyślne ustawienie, powinien pomóc wpis w .htaccess Twojej strony. Odpowiednia sekcja może wyglądać tak:

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>

Kolejne wpisy odnoszą się do różnego rodzaju zasobów, jak czcionki, czysty tekst, kod html, pliki css itp. W ten sposób łatwo dodasz odpowiednie dyrektywy.

Po zmianach możemy zweryfikować, czy faktycznie pliki zostały pomniejszone. Wystarczy załadować ponownie stronę i sprawdzić, czy interesujące nas pliki mają mniejsze wartości. Dla pewności dobrze jest też kliknąć w wybrany plik *.js i upewnić się, czy w zakładce „Headers” przy content‑encoding: pojawiła się opcja informująca o kompresji.

Dla pewności możemy ponownie przeprowadzić audyt, wykonując następujące czynności:

1. Kliknij kartę Audyty.
2. Kliknij opcję Wykonaj audyt.
3. Pozostaw ustawienia takie same, jak poprzednio.
4. Kliknij Uruchom audyt.

Zmiana rozmiaru zdjęć

Często w raportach pojawia się informacja, że nasze zdjęcia są zbyt duże, przez co długo się ładują i spowalniają stronę. Jeśli użytkownik ogląda zdjęcia na ekranie urządzenia mobilnego o szerokości 500 pikseli, nie ma sensu wysyłanie obrazu o szerokości 1 500 pikseli. Idealnie byłoby wysłać obraz o szerokości najwyżej 500 pikseli. To oczywiście przykład dla aplikacji.

Poniżej dwa sposoby zarządzania obrazami w przypadku aplikacji.

• Zmiana rozmiaru zdjęć podczas procesu kompilacji.
• Utworzenie wielu rozmiarów każdego obrazu podczas procesu kompilacji, a następnie użycie ich w kodzie „srcset”. W czasie wykonywania przeglądarka dba o wybór najlepszego rozmiaru dla urządzenia, na którym działa. Zobacz obrazy o względnej wielkości. Więcej o tej metodzie można przeczytać na stronie Google dla developerów.

W przypadku stron wygląda to trochę inaczej. Raport pokazuje nam, które obrazy powinniśmy w szczególności poddać kompresji. OK, tutaj najlepszym rozwiązaniem wydaje się skorzystanie z podpowiedzi, jaką daje nam Google w raporcie. Według wskazówki najlepiej przekonwertować zdjęcia na nowe formaty, takie jak JPEG 2000, JPEG XR, WebP. Dlatego dobrze jest zapoznać się z zasadami dotyczącymi optymalizacji grafik.

Eliminowanie zasobów blokujących renderowanie

Critical Rendering Path ma kluczowe znaczenie dla wydajności naszych stron – naszym celem jest nadanie różnych priorytetów wyświetlanej treści zależnie od tego, jakie działania na stronie chce podejmować użytkownik. Szybkie wyświetlanie stron internetowych wymaga od przeglądarki wielu zabiegów. Większość tej pracy jest ukryta przed programistami witryn internetowych – piszemy kod, a ładnie wyglądająca strona pojawia się na ekranie. Ale jak dokładnie przebiega w przeglądarce proces pozwalający przejść od znaczników HTML i CSS oraz kodu JavaScript do zrenderowanych pikseli na ekranie?

Podstawą optymalizacji wydajności jest zrozumienie zdarzeń występujących na etapach od wczytania znaczników HTML i CSS oraz kodu JavaScript, przez ich przetwarzanie, po przekształcenie na zrenderowane piksele. Właśnie z tych etapów składa się Critical Rendering Path. Jeśli jakieś elementy blokują renderowanie, może to spowolnić naszą stronę.

Czym są zasoby blokujące renderowanie? To zewnętrzny plik JavaScript lub CSS, który przeglądarka musi pobrać, przeanalizować i wykonać, zanim będzie mogła wyświetlić stronę. Celem jest uruchomienie tylko podstawowego kodu CSS i JavaScript, który jest wymagany do prawidłowego wyświetlania strony. Warto znaleźć kod i zobaczyć, czy tak naprawdę jest on nam potrzebny. W raporcie, w jego odpowiedniej części – „Eliminate render-blocking resources”, znajdziemy, które pliki mogą być problematyczne.

Następnie wciskamy Command + Shift + P (Mac) lub Control + Shift + P (Windows, Linux, Chrome OS), aby otworzyć menu poleceń i wybrać opcję „Show Coverage”, czyli pokaż pokrycie. Stanowi ona przegląd, ile kodu w plikach jest wykonywane podczas wczytywania strony. Linia kodu została wykonana, jeśli ma zielony pasek. Czerwony pasek oznacza, że kod nie został wykonany i zdecydowanie nie jest potrzebny przy ładowaniu strony. Krótko mówiąc, podczas pracy z własnym kodem karta „Coverage” może pomóc w analizie kodu wiersz po wierszu i dostarczać tylko kod potrzebny do załadowania strony.

Możemy także po naciśnięciu Command + Shift + P (Mac) lub Control + Shift + P (Windows, Linux, Chrome OS) wybrać opcję „Request blocking”, która daje nam możliwość zablokowania danego kodu i sprawdzenia, czy strona bez niego się załaduje i będzie interaktywna. Wybierając „Add pattern”, możemy wpisać, który katalog lub plik ma nie być ładowany. Po odświeżeniu strony zobaczymy, które z naszych zasobów zostały zablokowane – będą miały one kolor czerwony.

Odpowiednie środowisko pracy

Warto podczas analizy i pracy skorzystać z zakładki „Performance”, gdzie możemy symulować rodzaj połączenia sieciowego, a także szybkość pracy procesora. Przydaje się to przede wszystkim do analizy ładowania stron na urządzeniach mobilnych, które przecież mają więcej ograniczeń sprzętowych niż komputery. Przeładowanie strony pozwala na wizualizację wszystkich kroków, jakie muszą się odbyć do załadowania strony.

Otrzymujemy w tym miejscu linię czasu, ślad pokazujący aktywność chronologicznie, od lewej do prawej. Wykresy FPS, CPU i NET u góry pokazują ilość klatek na sekundę, aktywność procesora i aktywność sieci. Jest to wskazówka, że możemy przyspieszyć ładowanie strony, wykonując mniej pracy, na przykład przez JavaScript. Tutaj krok po kroku możemy analizować kolejne działania i wyszukać te, które trwają najdłużej.

Narzędzia dla programistów Chrome – podsumowanie

O klawiszu F12 i narzędziach dla developerów można napisać dziesiątki, jak nie setki stron poradników. Dlatego powyższy artykuł oraz jego pierwszą część warto traktować jako wstęp do poznania tych narzędzi. Skupia się on na jednej z  wielu ich możliwości, czyli analizie ładowania strony oraz na jej przyśpieszeniu. Jeśli interesują Was inne możliwości narzędzi dla developerów, to warto przejrzeć dokumentację udostępnioną przez Google.

Artykuł Narzędzia dla programistów Chrome, czyli o klawiszu F12 – cz. 2 pochodzi z serwisu cyber_Folks.

Z artykułu dowiesz się:

• Dlaczego prędkość strony jest taka ważna?
• Co może wpływać na spowolnienie Twojej strony?

Dlaczego prędkość ładowania strony jest ważna?

Na czas ładowania się strony trzeba popatrzeć przez pryzmat dwóch czynników – pierwszym jest klient, drugim algorytm Google. Klient oczekuje szybkiego załadowania się treści, po to, aby w łatwy i wygodny sposób przeczytać artykuł, zrobić zakupy czy też sprawdzić rozkład jazdy pociągów.

Niezależnie do tego, jaką stronę ogląda, musi ona działać płynnie. W sieci można znaleźć wiele ciekawych statystyk, które pokazują, w jaki sposób długi czas ładowania się strony przekłada się na spadek konwersji. Google w jednym z badań pokazuje, że pięćdziesiąt trzy procent ankietowanych opuszcza stronę, jeśli ta nie załaduje się w maksymalnie trzy sekundy.

Im dłużej strona się ładuje, tym bardziej rośnie prawdopodobieństwo, że użytkownik opuści stronę.

Dlaczego szybkość strony jest ważna dla Google? Ponieważ w 2018 roku zmiany algorytmu Google znacząco wpłynęły na rankingi stron. Gorzej oceniane są te, które posiadają długi czas ładowania. Analitycy prędkości ładowania stron z MachMetrics przeprowadzili badania stron w kilku krajach na świecie. Dane, jakie otrzymano są zatrważające. W wielu przypadkach czytelnik musi poczekać osiem czy jedenaście sekund, aż załaduje się cała zawartość strony.

Jak sprawdzić czas ładowania się strony? Google udostępniło do tego celu wygodne narzędzie Google PageSpeed Test. Warto z niego skorzystać i sprawdzić naszą domenę. Jeśli wynik jest niezadowalający, to powinniśmy poszukać jego przyczyn. Oto sześć najczęściej spotykanych:

Hosting

To, na jakim serwerze mamy „zainstalowaną” stronę, ma ogromny wpływ na szybkość jej działania. Większość właścicieli witryn na WordPressie decyduje się na hosting współdzielony, ponieważ jest to tańsza opcja.

Hosting współdzielony oznacza jednak, że współdzielimy zasoby serwera (np. użycie procesora, pamięci RAM, przestrzeni dyskowej) z innymi użytkownikami oraz nie mamy dużego wpływu na konfigurację serwera.

Jeśli decydujemy się na hosting współdzielony to polecamy nasze pakiety hostingowe pod WordPressa.

Jeśli natomiast posiadamy rozbudowaną witrynę e-commerce z dużym ruchem, a nasz biznes oraz wyniki finansowe firmy w 100% zależą od sprzedaży poprzez sklep internetowy, to warto zastanowić się nad wyborem serwera VPS lub serwera dedykowanego. Dzięki temu nie będziemy dzielić zasobów serwera z innymi użytkownikami i będziemy w stanie skonfigurować serwer precyzyjnie pod nasze potrzeby. Jest to jednak opcja znacznie droższa, wymagająca także zatrudnienia osoby do administrowania serwerem.

Chcesz, aby Twoja strona działała niezawodnie i maksymalnie szybko? Sprawdź, w jaki sposób CDN może skrócić czas ładowania Twojej witryny – wybierz nasz Pakiet Wydajność!

Źle dobrane i obciążające stronę wtyczki

Prawdą jest, że wtyczki zainstalowane na stronie potrafią bardzo ją obciążyć i spowolnić. Czasami mały dodatek, który odpowiada za jeden drobiazg na stronie, potrafi wydłużyć czas jej ładowania nawet o kilka sekund.

W świecie IT funkcjonuje ciekawe porównanie działania wtyczek do działa obciążających aplikacji w telefonie, które mogą w godzinę zużyć nawet dziesięć czy piętnaście procent baterii. Są wtyczki potrafiące zużyć większość zasobów serwera.

Jak uniknąć tego problemu? Przede wszystkim musimy dbać o aktualizację wtyczek. Często ich twórcy wprowadzają poprawki, które usprawniają ich działanie.

Kolejna sprawa to pobieranie wtyczek tylko ze sprawdzonych źródeł, jak np. oficjalne repozytorium wtyczek WordPressa czy marketplace Themeforest. Pamiętajmy, że kod WordPressa, motywu i wtyczek jest otwarty i, w związku z tym, każdy może ten kod przerabiać. Pobierając wtyczki z podejrzanych źródeł nigdy nie mamy pewności czy nie został tam doklejony kod, który będzie korzystać z zasobów naszego serwera i spowalniać naszą witrynę (np. koparka kryptowalut).

Starajmy się też unikać wtyczek kombajnów, all-in-one itp. szczególnie jeśli potrzebujemy wykorzystać tylko jedną małą funkcjonalność. W takim przypadku lepiej jest zainstalować 2 małe wtyczki, które robią dokładnie to czego potrzebujemy, niż jedną dużą wtyczkę, która załaduje nam sporo niepotrzebnych skryptów.

Źle wybrany motyw WordPressa

Wybierając motyw na naszą stronę musimy kierować się nie tylko jego wyglądem i funkcjami, ale także tym, czy do poprawnego działania potrzebuje on wtyczek, a jeśli tak, to jakich. Wtyczki, o czym pisałam w akapicie powyżej, potrafią spowolnić stronę.

Sam motyw także może wpływać na szybkość ładowania się witryny. Szczególnie gdy mamy do czynienia z motywem, który nie jest dobrze zakodowany i jest słabo zoptymalizowany.

Obie te powyższe rzeczy dotyczą większości motywów dostępnych na Themeforest. Motywy te oferują bowiem „wszystko dla wszystkich”, przez co otrzymujemy wiele niepotrzebnych i nieużywanych potem przez nas funkcjonalności, jednak kod tych funkcjonalności jest ładowany na stronie.

Jeśli zdecydujemy się na zakup motywu z Themeforest, to pamiętajmy, że nie musimy instalować wszystkich rekomendowanych wtyczek. Bo i po co nam 3 wtyczki do slajderów? Świadomie wybierzmy wtyczki, które zainstalujemy. I świadomie wybierzmy też motyw, biorąc pod uwagę, że przeważnie im więcej opcji, tym większe prawdopodobieństwo, że strona będzie potem wolno działać.

Zbyt wiele zapytań/żądań HTTP

Protokół HTTP (ang. Hypertext Transfer Protocol) to zasady wymiany informacji i współpracy programów. Protokół HTTP dokładnie określa format komunikacji pomiędzy stroną a serwerem. Komunikacja ta oparta jest na żądaniach i odpowiedziach. Protokół HTTP określa format tych wiadomości. Statystycznie zapytania te zajmują około osiemdziesiąt procent czasu ładowania całej strony. Liczba żądań HTTP zależy od liczby elementów, które znajdują się na naszej stronie internetowej.

Technicznie każdy element wymaga żądania HTTP w celu wyświetlenia go w przeglądarce. Zatem więcej elementów strony (pliki obrazów, CSS, JavaScript itp.) prowadzi do większej liczby żądań HTTP, a to przekłada się na szybkość ładowania strony.

Musimy więc pamiętać, że każda zainstalowana wtyczka, każdy motyw, który ma robić „wszystko dla wszystkich” najprawdopodobniej doda nam przynajmniej jeden (a często więcej) element, który zwiększy liczbę żądań HTTP. Dlatego tak ważne jest odpowiednie dobranie motywu i wtyczek.

Warto jest też korzystać z protokołu HTTP/2, który przesyła wiele zasobów w jednym połączeniu z serwerem. Protokół ten jest dostępny m.in. w naszych pakietach hostingowych pod WordPressa. Przeczytaj więcej o protokole HTTP/2 i jak zacząć z niego korzystać.

Dodatkowo, warto też zwrócić uwagę na zewnętrzne skrypty HTTP, które także mają wpływ na działanie strony. Mogą one wywoływać setki zapytań, a nawet zawiesić stronę. Mowa tutaj o zewnętrznych widgetach, takich jak wtyczki do kanałów social media, treści wideo itp. Zastanówmy się, czy wszystkie są nam potrzebne.

Brak optymalizacji zdjęć wpływa na spowolnienie WordPressa

Według wyników badania The Power of Visual Communication, aż osiemdziesiąt procent informacji, które na co dzień przyswajamy i zapamiętujemy, występuje w formie wizualnej. To obrazy zwiększają szansę przeczytania treści na stronie. Podobno strony internetowe w sześćdziesięciu procentach składają się właśnie z obrazów i grafik. Jeśli jednak nasze obrazy nie są zoptymalizowane, to będą one nie zachętą, lecz przeszkodą dla naszych czytelników.

Dobrze zoptymalizowane zdjęcia to najczęściej pomijany aspekt związany z wydajnością. Po prostu wrzucamy kolejne fotografie do wpisu i nie zastanawiamy się nad tym, ile faktycznie miejsca zajmują fotografie i jak ich wielkość przełoży się na czas ładowania witryny. Optymalizacja ma więc na celu zmniejszenie „wagi” zdjęć, co skutkuje przyśpieszeniem ich pobierania.

Przed wgraniem zdjęć na stronę należy je najpierw zmniejszyć, maksymalnie do szerokości 1920 px. Dodatkowo, warto je także skompresować, np. za pomocą narzędzia TinyPNG. Zdjęcia już dodane do WordPressa możemy skompresować za pomocą wtyczki Smush image.

Brak buforowania strony

Na czym polega buforowanie (cache)? W dużym uproszczeniu, buforowanie polega na przechowaniu zasobów strony bliżej użytkownika, tak, żeby można mu było te zasoby serwować szybciej.

Gdy nasza strona korzysta z buforowania przeglądarki (browser cache), po pierwszym załadowaniu strony jej zasoby są przechowywane przez przeglądarkę lokalnie, dzięki czemu przy kolejnej wizycie na stronie, zasoby zostaną załadowane szybciej.

Inne sposoby buforowania, z których może korzystać nasza strona, to m.in:

• Opcache – buforuje skompilowany kod php. W połączeniu z php w wersji 7 i wyższej pozwala znacznie przyspieszyć ładowanie kodu php strony. Opcache powinien być domyślnie włączony na Twoim hostingu współdzielonym, upewnij się tylko czy masz ustawioną najnowszą wersję php (powyżej 7.0). O aktualizacje wersji php na stronie trzeba dbać samodzielnie, tego nie zrobi za Ciebie hosting.
• Object cache – w WordPressie pozwala przechować wyniki zapytań do bazy danych, a przez co zmniejszyć liczbę zapytań wysyłanych do bazy przy każdym ładowaniu strony. Więcej o object cache w WordPressie pisałam w artykule Co to jest i jak działa Object Cache w WordPressie.
• Page cache – serwuje wygenerowaną stronę HTML przez co kod php nie musi być wykonywany przy każdym ładowaniu strony.

Jak wykorzystać cache aby przyspieszyć WordPressa? Możemy to zrobić przy pomocy jednej dostępnych wtyczek. Na hostingach z serwerem LiteSpeed polecam wtyczkę LiteSpeed Cache, dedykowaną właśnie temu serwerowi. Inne, bezpłatne wtyczki z repozytorium to WP Fastest Cache czy WP Super Cache.

Spowolnienie WordPressa – krótkie podsumowanie

Wspomniane powyżej sześć czynników to elementy, które dość łatwo jesteśmy w stanie poprawić. Aby samodzielnie zająć się optymalizacją naszej strony polecam przeczytać artykuł Co każdy bloger może zrobić aby przyspieszyć swój blog na WordPressie. W artykule opisałam kilka kroków, które każda osoba, nawet „nietechniczna”, może wykonać, aby przyspieszyć swoją stronę na WordPressie.

Czasem jednak sytuacja jest bardziej skomplikowana i po wykonaniu powyższych kroków strona nadal działa wolno. W takim wypadku najprawdopodobniej potrzebna będzie pomoc programisty i przebudowa motywu lub niektórych wtyczek.

Artykuł 6 czynników, które mogą spowalniać Twojego WordPressa pochodzi z serwisu cyber_Folks.

Dodatkowo, zdarzają się sytuacje, w których nie zawsze możemy w prosty sposób zresetować nasze hasło (np. gdy nie mamy dostępu do adresu e‑mail). Wtedy musimy się posunąć do pewnych sztuczek, które umożliwią nam ponowne dostanie się do panelu administracyjnego.

Z tekstu dowiesz się:

• Jak zmienić hasło do WordPressa?
• Jakie hasło wybrać do swojej strony?
• Jak odzyskać utracone hasło?
• Jak zmienić aktualne hasło dla użytkownika?
• Jak wymusić zmianę hasła na użytkownikach?

Kilka słów o bezpieczeństwie

Każde hasło, którego używamy powinno być unikalne i silne. Co to oznacza? Powinno ono być na tyle skomplikowanym ciągiem cyfr oraz liter, by trudno było go odgadnąć. Wszelkiego rodzaju hasła w stylu „qwerty”, „12345” i im podobnie, to jedne z najbardziej powszechnie stosowanych przez użytkowników „zabezpieczeń”.

Jako haseł nie używajmy też słów będących naszym drugim imieniem, imieniem kogoś bliskiego, adresem zamieszkania itp. Takie hasła są bardzo popularne i znajdują się na listach do ataków słownikowych.

Przeczytaj ten artykuł w serwisie Niebezpiecznik „Jakie hasła mają Polacy?„ aby przekonać się, że warto tworzyć silne i unikalne hasła, które nie są z niczym związane.

Jak zmienić hasło do WordPressa w kokpicie?

Jeśli zależy nam na najprostszym i jednocześnie najszybszym sposobie zmiany hasła, to możemy to zrobić bezpośrednio w panelu administracyjnym naszego WordPressa.

Oczywiście musimy znać stare dane dostępu, aby do panelu się zalogować. Dalej wystarczy, że klikniemy w menu po lewej stronie zakładkę „Użytkownicy” a następnie „Twój profil”.

W tym miejscu, zjeżdżając w dół strony, trafimy na sekcję „Zarządzanie kontem”. Wystarczy teraz nacisnąć przycisk „Generuj hasło” i po kłopocie. System automatycznie wybierze silne hasło.

Jeśli nie chcemy z niego skorzystać, to możemy zaproponować własne. Otrzymamy wtedy informację o sile hasła. Pamiętaj aby wybrać silne, unikalne hasło.

Jednym z rozwiązań, które jeszcze wzmocni nasze bezpieczeństwo w sieci jest zaznaczenie opcji, aby WordPress wylogowywał nas z konta otwartego na kilku urządzeniach jednocześnie. To bardzo przydatne, zwłaszcza gdy zgubimy telefon lub komputer i nie chcemy, aby ktoś miał dostęp do naszego panelu.

Jak zresetować hasło do WordPressa?

Co w sytuacji, kiedy nie mamy dostępu do swojego panelu (bo np. nie pamiętamy hasła), ale mamy dostęp do maila, z którym połączone zostało nasze konto użytkownika? W tym przypadku musimy na stronie logowania kliknąć link do zresetowania naszego hasła, czyli łącze „Nie pamiętasz hasła?”.

Następnie WordPress zapyta nas o adres e‑mail, który przypisany jest do konta. Wtedy należy go podać i nacisnąć przycisk znajdujący się poniżej. W ten oto sposób na naszą skrzynkę mailową wysłany zostanie link do zresetowania hasła.

Jeśli link nie dotarł, to warto sprawdzić folder SPAM. Jeżeli tam też go nie znajdziemy, to może się okazać, że tą metodą nie zresetujemy dostępów. Na to także jednak jest sposób.

Jak zmienić hasło do WordPressa w bazie danych?

Zresetowanie hasła tą drogą nie jest trudnym zadaniem, ale wymaga znajomości loginu i hasła do serwera, na którym znajdują się pliki i baza danych. Aby się do nich dostać, należy zalogować się do panelu administracyjnego naszego hostingu dla WordPress.

Każdy panel wygląda niestety odrobię inaczej, ale w każdym znajdziemy podobne elementy. Szukamy aplikacji phpMyAdmin. W panelu Direct Admin, który jest dostępny na wszystkich kontach hostingowych w cyber_Folks, phpMyAdmin znajdziemy w sekcji Bazy danych.

Aby zalogować się do naszej bazy, poprzez phpMyAdmin, będziemy potrzebować nazwy użytkownika bazy i hasła. Obie te informacje znajdziemy w pliku wp-config.php naszej strony.

Po wejściu do phpMyAdmina musimy wyszukać tabelę o nazwie „wp_users” (lub ewentualnie zamiast „wp” będzie inny prefix), która jest powiązania z naszą stroną internetową. Następnie wystarczy kliknąć „Przeglądaj”, aby zobaczyć wszystkich użytkowników strony, wybierając „Edycję” możemy edytować dane poszczególnych osób.

Nas najbardziej interesuje „user_pass”, gdzie w kolumnie „vaule” możemy zmienić aktualne hasło. W wybieralnym menu, koniecznie należy zaznaczyć opcję MD5, aby je zaszyfrować.

Jak wymuszać zmianę hasła na użytkownikach WordPressa?

W niektórych sytuacjach może być koniecznie wymuszanie na użytkownikach witryny, aby co pewien czas zmieniali hasło. To rozwiązanie przeznaczone jest przede wszystkim dla właścicieli dużych stron, do których dostęp posiada wiele osób, ale każda może zarządzać innym jej poziomem. Im więcej osób ma dostęp do strony, tym większe jest zagrożenie złamania zabezpieczeń, szczególnie, że wielu użytkowników nadal wybiera słabe hasła.

Takie rozwiązanie można wdrożyć za pomocą wtyczki Expire Passwords. Aby zainstalować wtyczkę, wchodzimy w menu „Wtyczki” następnie klikamy „Dodaj nową” i w polu wyszukiwarki wpisujemy „Expire Passwords”. Po instalacji trzeba włączyć wtyczkę i dostosować jej ustawienia.

W menu „Użytkownicy” pojawi się opcja „Expire Passwords”. Wystarczy w nią wejść i wpisać, co ile dni użytkownicy będą musieli zmieniać swoje hasła dostępu. W tym miejscu możemy także wybrać, czy wymuszenie zmiany będzie dotyczyło wszystkich użytkowników, niezależnie od poziomu dostępu, czy też tylko wybranych grup.

Od tego momentu, każdy użytkownik, w wybranych przez nas interwałach czasowych, otrzyma informację, że musi zmienić swoje hasło.

Jak na raz zresetować hasła wszystkich użytkowników WordPressa?

To rozwiązanie także dotyczy stron, które posiadają wiele kont użytkowników. Czasami zdarza się tak, że np. w związku z wirusem lub atakiem na stronę trzeba szybko zresetować wszystkie dane dostępowe.

Przy stronach liczących kilkadziesiąt, a nawet kilkaset rekordów zmiany haseł po kolei będą problematyczne. W takim wypadku można skorzystać z wtyczki Emergency Password Reset. Instalacja przebiega tak samo, jak opisana powyżej.

Po instalacji w menu „Użytkownicy” pojawia się dodatkowa opcja „Emergency Password Reset”. Kliknięcie w przycisk „Reset all passwords” sprawia, że natychmiastowo system generuje nowe dane dostępowe, a każdy z użytkowników otrzymuje na swój e‑mail informację, jak może on zdobyć nowe hasło.

Po zresetowaniu haseł wtyczkę powinniśmy odinstalować.

Hasło do WordPressa – dobre praktyki

Na koniec jeszcze kilka porad dotyczących bezpieczeństwa:

• wybierz hasło unikalne, skomplikowane, składające się z minimum 16 znaków
• w miarę możliwości korzystaj z managera haseł np. KeePass, zachęcam do przeczytania artykułu Jak zacząć swoją przygodę z managerem haseł.
• nie udostępniaj swojego hasła współpracownikom czy osobie, która opiekuje się stroną. Dla każdej osoby można przecież założyć osobne konto użytkownika, którym ta osoba może się posługiwać.
• zakładając konto nowemu użytkownikowi udziel mu minimalnego poziomu dostępu jaki jest możliwy dla jego roli. Osobie, która ma tylko dodawać wpisy na bloga, wystarczy dostęp na poziomie Autora lub Redaktora, nie potrzebuje ona dostępu na poziomie Administratora.
• regularnie przeglądaj listę użytkowników swojego WordPressa i kasuj konta osób, z którymi już nie współpracujesz. Często widuję na stronach klientów działające konta osób, które w przeszłości zajmowały się stroną lub konta dawnych stażystów czy pracowników firmy. Pamiętaj, że te osoby mają cały czas dostęp do Twojej strony i mogą mieć wgląd np. w zamówienia czy dane osobowe Twoich klientów.

Chcesz w łatwy sposób stworzyć bezpieczne, silne hasło? Skorzystaj z naszego generatora haseł online – kilka chwil i masz hasło nie do złamania!

Na koniec warto jeszcze wspomnieć, że koniecznie musimy pamiętać o aktualizowaniu nie tylko samego WordPressa, ale także motywu i wtyczek, które mamy zainstalowanie na stronie. W przypadku pewnych podatności, brak aktualizacji zawierającej łatkę, może umożliwić instalację wirusa, który zakłada hakerowi konto administratora na stronie. A potem może on już robić z naszą stroną co tylko zechce. Dlatego tak ważne jest aktualizowanie WordPressa i regularne przeglądanie listy użytkowników.

Artykuł Jak zmienić lub odzyskać hasło do strony na WordPressie? pochodzi z serwisu cyber_Folks.

Jeśli zdecydujemy się na budowę e‑sklepu przy użyciu tego rozwiązania, to musimy zainstalować oprogramowanie na naszym serwerze i skonfigurować poszczególne jego elementy. Poniższy poradnik pokaże, jak to zrobić.

Czego dowiesz się z tego artykułu?

• Jak zainstalować PrestaShop szybko i wygodnie?
• Dlaczego sprzedawcy decydują się na to oprogramowanie?
• Jak się przygotować do samodzielnej instalacji PrestaShop?

Dlaczego sprzedawcy wybierają na PrestaShop?

Nie można ujmować Preście wyjątkowej elastyczności, przejrzystego panelu, możliwości skalowania pionowego i poziomego. Oprogramowanie wykorzystuje skryptowy język programowania PHP w postaci frameworka Symfony oraz bazę danych MySQL w celu przechowywania danych produktów, zamówień, treści i opcji sklepu.

Presta może spowalniać swoje działanie, ale często jest to wynik błędnych instalacji, złej konfiguracji oraz dużej ilości zainstalowanych modułów dodatkowych. Presta jest też bezpieczna i chociaż, jak każde oprogramowanie open source, narażona jest na luki zero‑day, to szybkie instalowanie poprawek może nas obronić przed zhakowaniem sklepu.

Jeśli zdecydujemy się na PrestaShop, musimy go zainstalować na serwerze i odpowiednio go skonfigurować. Nawet mniej doświadczone osoby mogą to zrobić samodzielnie, bowiem opcji instalowania jest kilka.

Szczególnie jedna z nich jest naprawdę bardzo prosta i wymaga jedynie podstawowej wiedzy z zakresu zarządzania plikami na ftp oraz konfiguracji domen i baz danych. Chociaż dla osoby mało doświadczonej może brzmieć to enigmatycznie, to warto uwierzyć, że cała procedura jest bardzo łatwa, gdyż za rękę prowadzi nas instalator.

Jak zainstalować PrestaShop – bezpośrednio w firmie hostingowej?

Dobrym przykładem na to, jak prosta to może być czynność, będzie rozwiązanie oferowane przez cyber_Folks. W tym przypadku wystarczy wybrać z górnego menu na stronie głównej zakładkę „Hosting dla PrestaShop”.

Na kolejnej podstronie należy uruchomić interesujący nas pakiet.

Po jego wybraniu przechodzimy przez proces koszykowy, gdzie możemy od razy zarejestrować domenę i certyfikat SSL dla swojego sklepu.

Po zakończeniu rejestracji otrzymamy na maila wiadomość z linkiem do instalacji PrestaShop oraz danymi administracyjnymi. Po zalogowaniu się zostaniemy przeniesieni do sekcji administracyjnej.

Na dole strony znajdziemy sekcję „Kreator stron i darmowe aplikacje” w niej znajduje się opcja „Zainstaluj PrestaShop”.

Zostaniemy przeniesieni do prostego i intuicyjnego instalatora. Z prawej strony znajdziemy przycisk „Instaluj tę aplikację”. Kolejna strona instalatora to formularz, w którym większość danych zostaje automatycznie wypełniona.

Są tam między innymi domena, ścieżka instalacji oraz dane administratora. Na samym dole strony, raz jeszcze klikamy „instaluj”, co prowadzi do automatycznej instalacji plików na serwerze, może to potrwać kilka minut.

Po zakończeniu możemy rozpocząć wstępną konfigurację e-sklepu.

Jeśli nasz dostawca usług hostingowych nie posiada łatwego, automatycznego instalatora, to możemy przeprowadzić instalację ręcznie. Jej przebieg opisujemy poniżej.

Jak zainstalować PrestaShop całkowicie samodzielnie?

Obecnie najnowsza wersja Presty, którą można pobrać bezpośrednio ze strony, ma numer 1.7.6.1. Jest ona dostępna w tym miejscu. Jeśli z jakiegoś powodu (np. z braku wstecznej kompatybilności wtyczki) konieczne jest pobranie wcześniejszych instalerów, to są one dostępne tutaj. Aby pobrać plik, musimy podać swój adres e‑mail i zaznaczyć odpowiednie zgody.

Jaką wersję powinniśmy wybrać? Tak naprawdę zalecana jest każda wersja powyżej 1.7, dlatego że będzie posiadała ona bardziej nowoczesny wygląd panelu administracyjnego, więcej opcji dostępnych za darmo i pełną kompatybilność z nowymi rozwiązaniami webowymi, jak np. PHP7. Każda z najnowszych wersji jest napisana we frameworku Symfony 2.8.

Gdy pobierzemy już pliki ze strony Presty, to warto przygotować się do kolejnych działań. PrestaShop wymaga od nas dostępu FTP do serwera. Dostęp taki mamy przeważnie u każdego dostawcy naszego hostingu. Jeśli nie wiemy, jakie posiadamy loginy i hasła do FTP, to warto skontaktować się z biurem obsługi klienta firmy hostingowej, gdzie uzyskamy potrzebne dostępy.

Kolejna ważna dla nas rzecz, to baza danych, która będzie służyć do przechowywania informacji o zamówieniach, produktach oraz konfiguracji e‑sklepu. Musimy też posiadać domenę, do której “przypisany zostanie sklep”. Warto też mieć dostęp do edytora tekstu, na przykład Notatnika w Windows lub TextEdit w Mac OS. Potrzebne będą nam też narzędzia do rozpakowywania plików ZIP i klienta plików FTP na przykład darmowy FileZilla, a także do phpMyAdmin, czyli do zarządzania bazami danych. Uwaga! Niektóre hostingi pozwalają stworzyć bazę danych z poziomu panelu administracyjnego klienta.

Więcej na temat wymagań samego oprogramowania znajdziemy na stronie PrestaShop w zakładce wymagania systemowe. Pełna dokumentacja techniczna znajduje się pod tym adresem. Gdy mamy wszystkie potrzebne rzeczy możemy przystąpić do działania.

Jak zainstalować PrestaShop na serwerze?

Gdy ściągniemy plik ze strony PrestaShop, to szybko zorientujemy się, że jest to plik ZIP. Warto więc przygotować sobie jakiś katalog, w którym będziemy działać. Poniżej, krok po kroku znajduje się instrukcja instalacji plików na serwerze.

Instalacja PrestaShop – krok 1. Rozpakowanie ZIP.

Rozpakuj ściągnięty plik ZIP do dowolnego katalogu na dysku twardym komputera. Po wypakowaniu plików w folderze powinny pojawić się trzy pliki: prestashop.zip, index.php, oraz install_PrestaShop.html.

Instalacja PrestaShop – krok 2. Kopiowanie.

Krok drugi to wgranie plików z katalogu na dysku twardym na nasz serwer w firmie hostingowej. Możemy to zrobić na kilka sposobów. Najłatwiejszy to skorzystanie z klienta FTP, na przykład wspomnianego wcześniej FileZilla. Klient ten pozwala nam łatwo przenieść pliki z dysku lokalnego na serwer. FileZilla w obsłudze przypomina starego WinCommandera i jest bajecznie prosta w obsłudze.

Instalacja PrestaShop – krok 3. Baza danych.

Krok kolejny to stworzenie bazy danych dla naszego sklepu. Jeśli nasz dostawca daje nam możliwość stworzenia samodzielnie bazy danych z poziomu panelu administracyjnego klienta, to warto skorzystać z tej opcji, bo jest ona najprostsza i najszybsza.

Wymaga dosłownie kilku kliknięć myszką w panelu i zapamiętania (podania) nazwy nowej bazy danych. Jeśli nie mamy takiej opcji w panelu administracyjnym naszego hostingu, to musimy skorzystać z phpMyAdmin, narzędzia wspominanego wcześniej.

Instalacja PrestaShop – krok 4. Konfiguracja.

Krok czwarty to już automatyczna instalacja PrestaShop. Gdy przejdziemy do folderu z plikami na serwerze, instalator automatycznie rozpocznie rozpakowywanie pozostałych plików, a ekran asystenta instalacji poprowadzi nas za rękę. Sam proces składa się z kilu etapów:

• w pierwszym oknie musimy wybrać język instalacji – oczywiście polski;
• na kolejnej stronie musimy wyrazić zgodę na umowę licencyjną;
• kolejny etap to szybkie sprawdzenie czy nasz serwer spełnia wszelkie wymagania systemowe instalacji. Pisaliśmy o nich wyżej. Jeśli coś pójdzie nie tak instalator zatrzyma się na tym etapie i pokaże nam, gdzie występują problemy oraz, jak możemy je naprawić. Jeśli nie potrafimy zrobić tego sami, to warto poprosić o pomoc administratora serwera, czyli firmę hostingową.
• kolejny krok, to podanie informacji dotyczących naszego nowego sklepu. Nadajemy mu nazwę, wybieramy, co będzie w nim sprzedawane, podajemy także e-mail i ustalamy hasło. To hasło służyć będzie do logowania w panelu administracyjnym sklepu.
• czas na konfigurację systemu – w tym miejscu podajemy adres serwera, na którym znajdują pliki oraz baza danych. Potrzebne informacje znajdziemy w panelu administracyjny naszego hostingu lub możemy otrzymać je od działu pomocy. Musimy też podać tu nazwę naszej, stworzonej uprzednio bazy, oraz login i hasło dostępowe, do niej. Możemy przetestować połączenie wybierając odpowiedni przycisk. Jeśli wszystko jest okej, otrzymujemy odpowiedni komunikat, jeśli nie musimy sprawdzić poprawność danych.
• gdy wszystkie dane się zgadzają rozpocznie się instalacja oprogramowania. Może to potrwać kilka minut. Gdy instalacja zakończy się, otrzymamy powiadomienie, że ze względów bezpieczeństwa z serwera należy usunąć folder Install. Możemy to zrobić ponownie używając klienta FileZilla. W ten sposób zakończymy instalowanie.

Teraz możemy kliknąć w przycisk zarządzaj sklepem i podając dane czyli adres e-mail i hasło, które wprowadziliśmy na początku instalatora.

Jak zainstalować PrestaShop – krótkie podsumowanie

Jak widać proces instalacyjny nie jest bardzo skomplikowany i pozwala na szybkie poradzenie sobie z poszczególnymi elementami i etapami. Na każdym kroku możemy skorzystać z pomocy, przejrzenia dokumentacji lub po prostu możemy obejrzeć filmy dostępne w sieci. Jeśli nie czujemy się na siłach, to możemy skorzystać z pomocy bardziej doświadczonych osób.

To teraz pozostaje przećwiczyć to w praktyce:

Artykuł Jak zainstalować PrestaShop szybko i wygodnie? pochodzi z serwisu cyber_Folks.