Od 74 do 92 pkt na Mobile. Jak przyspieszyłam Elementora bez płatnych wtyczek? (Case Study + Checklista PDF)
„Strona działa, wynik jest zielony na komputerze, na telefonie jest 74. Jest OK, klienci nie narzekają.”
Brzmi znajomo? Dla wielu właścicieli stron wynik 74/100 na urządzeniach mobilnych to koniec pracy. Szczególnie jeśli strona jest wizualnie „ciężka” – pełna zdjęć z realizacji, sliderów i zbudowana na Elementorze.
Tak było w przypadku strony mojego partnera – https://stepbud-budownictwo.pl/. Strona działała „na surowo” – bez żadnej wtyczki cache. Wynik 74 pkt na mobile wydawał się przyzwoity jak na brak optymalizacji, ale czułam, że potencjał jest marnowany. Brak cache’owania oznaczał, że przy każdym wejściu serwer musiał budować stronę od zera, co przy słabszym internecie (np. na budowie) trwało wieki.
Postanowiłam to zmienić. Cel: przebić barierę 90 punktów, instalując darmowe narzędzia, ale konfigurując je… nietypowo.
Efekt? Przeskok z solidnych 74 na wybitne 92 punkty na mobile.
Dlaczego Elementor? Świadomy wybór, a nie przypadek
Zanim przejdę do technicznych „bebechów”, muszę wyjaśnić jedną rzecz. Dlaczego w ogóle postawiliśmy na Elementora, skoro ma opinię „ciężkiego”?
Odpowiedź jest prosta: Ekonomia i cel.
To klasyczna strona-wizytówka. Nie ma tu skomplikowanych sklepów czy systemów rezerwacji. Ma pokazywać realizacje i budować zaufanie. W takim przypadku Elementor był najlepszym rozwiązaniem z trzech powodów:
Czas: Strona powstała błyskawicznie.
Budżet: Klient nie musiał płacić za godziny pracy programisty kodującego wszystko od zera („od ręki”).
Elastyczność: Zmiana układu czy dodanie nowych zdjęć to kwestia „przeciągnij i upuść”.
Wiedziałam, że wybierając page builder, zaciągam pewien „dług technologiczny” (cięższy kod). Ale wiedziałam też, że ten dług da się spłacić dobrą optymalizacją.
Diagnoza: Co hamowało stronę?
Liczby wyjściowe nie były tragiczne, ale audyt pokazał kilka hamulców:
Desktop: 95/100 (Bez uwag).
Mobile: 74/100 (Poprawnie, ale niestabilnie).
Główne problemy:
Brak Cache: Serwer „mielił” kod przy każdym wejściu, co dawało opóźnienia rzędu 4 sekund (TTFB).
Skacząca treść (CLS): Zewnętrzny widget opinii Google przesuwał ekran podczas ładowania.
Obrazki: Były ładowane w standardowy sposób, angażując procesor PHP.
Czas na optymalizację.
Krok 1: Instalacja Cache i pułapka „Zaznacz Wszystko”
Zainstalowałam darmową wersję wtyczki WP Fastest Cache. Większość osób w tym momencie popełnia błąd: wchodzi w ustawienia i zaznacza wszystko jak leci („skoro przyspiesza, to włączę”).
Ja zrobiłam inaczej. Wiedziałam, że na urządzeniach mobilnych „więcej nie znaczy szybciej”.
Moja strategia hybrydowa:
✅ Połącz CSS (Combine CSS): WŁĄCZONE. Zamiast kilkunastu małych plików stylów, serwujemy jeden.
❌ Połącz JS (Combine JS): WYŁĄCZONE!
Dlaczego nie połączyłam JS? Połączenie wszystkich skryptów w jeden gigantyczny plik (często ważący ponad 1 MB) powoduje, że procesor telefonu musi go pobrać i „przemielić” w całości, zanim wyświetli stronę. To blokuje ekran. Pozostawienie plików JS osobno pozwoliło przeglądarce ładować je równolegle.
Uwaga – pułapka! W sekcji ustawień ODZNACZYŁAM opcję „Urządzenia mobilne”. W darmowej wersji tej wtyczki zaznaczenie tej opcji paradoksalnie wyłącza cache dla telefonów!
Krok 2: Elementor i Kadence – ukryte „Turbo”
Zamiast instalować kolejne wtyczki, zajrzałam pod maskę samego Elementora i motywu Kadence. Okazuje się, że wiele funkcji wydajności było wyłączonych.
Weszłam w Elementor > Ustawienia > Funkcje i zmieniłam:
Inline Font Icons: Włączone. Elementor zamienia te kilka użytych ikonek w lekki kod SVG, zamiast ładować całą bibliotekę Font Awesome.
Font Swap: Tekst pojawia się natychmiast, nie czekając na załadowanie ozdobnej czcionki.
W motywie Kadence włączyłam lokalne ładowanie Google Fonts i Preload CSS.
Zrozumieć PageSpeed (Infografika)
Zanim przejdziemy do „Game Changera”, warto zrozumieć, co tak naprawdę mierzymy i dlaczego niektóre wskaźniki są ważniejsze od innych.
Krok 3: Walka ze skaczącą treścią (Fix CLS)
Wynik 74 punktów był zaniżany przez tzw. CLS (przesunięcia układu). Winowajcą był widget opinii z Google Maps. Avatary klientów ładowały się bez wymiarów, przez co tekst „rozjeżdżał się” w trakcie wczytywania.
Dodałam w CSS prosty kod narzucający im sztywne ramy (width: 50px). Efekt? Przesunięcia spadły do zera. Strona jest stabilna jak skała.
Krok 4: „Game Changer” – skok z 79 na 92 punkty!
To był moment przełomowy. Po wdrożeniu powyższych zmian utknęłam na wyniku 79/100. Raport wciąż narzekał na cache obrazków.
Używam wtyczki Converter for Media do formatu WebP. Okazało się, że domyślnie działała ona w trybie Passthru (przez PHP). Co to znaczy? Każde wyświetlenie zdjęcia angażowało procesor serwera, co opóźniało ładowanie.
Rozwiązanie: W ustawieniach wtyczki zmieniłam tryb serwowania na: „Za pomocą .htaccess” (via .htaccess). Dzięki temu przeglądarka pobiera zdjęcia bezpośrednio z dysku, omijając PHP.
Wynik: Natychmiastowy strzał z 79 na 92 punkty! 🚀
Pro Tip: Pułapka „Zimnego Cache’a”
Na koniec lekcja, którą warto zapamiętać. Czyścisz cache, robisz test i… wynik jest gorszy niż przed optymalizacją, a czas serwera to 5 sekund!
To normalne. Po wyczyszczeniu wtyczki, strona „nie istnieje” w wersji statycznej. Pierwszy użytkownik (lub robot Google), który na nią wchodzi, zmusza serwer do ciężkiej pracy.
Zasada: Po każdym czyszczeniu cache’a, wejdź na stronę w trybie Incognito i przewiń ją. „Rozgrzej” serwer. Dopiero wtedy rób testy.
Podsumowanie wyników
PO:
Desktop: 97/100
Mobile: 92/100
Okazuje się, że można mieć „ciężkiego” Elementora i wynik powyżej 90 punktów. Kluczem nie są drogie wtyczki, ale świadoma konfiguracja tych darmowych i zrozumienie, jak działa serwer.
Chcesz powtórzyć ten wynik? (Darmowa Checklista)
Przygotowałam dla Ciebie skondensowaną checklistę PDF z wszystkimi ustawieniami, o których pisałam. Możesz ją wydrukować i mieć zawsze pod ręką przy optymalizacji.
Ważna uwaga: Pamiętaj, że każda strona WordPress jest inna (inny serwer, inny motyw, inne wtyczki). To konfiguracja, która zadziałała idealnie w moim przypadku (Elementor + Kadence). U Ciebie może być wymagane np. włączenie łączenia JS. Traktuj tę listę jako sprawdzony punkt startowy, a nie żelazną regułę. I zawsze rób backup przed zmianami!
