Skip to content

Wszystko o WordPressie, tworzeniu stron — i nie tylko

🚀 Jak przyspieszyć stronę na Elementorze: 3 porady dla PageSpeed Insights w 2026 roku
Motywy WordPressSEO
5 min1,083 słów

🚀 Jak przyspieszyć stronę na Elementorze: 3 porady dla PageSpeed Insights w 2026 roku

Elementor składa strony z widżetów, stylów i skryptów, a każde żądanie do zewnętrznego zasobu dodaje milisekundy do czasu ładowania. Google Fonts, Font Awesome, Eicons: trzy żądania czcionek, które wtyczka generuje domyślnie, nawet jeśli nie używa ich Pan świadomie.

Rezultat: spadek punktów w PageSpeed Insights, rozdęty waterfall w GTMetrix i odwiedzający, którzy opuszczają stronę, nie doczekawszy się pełnego wyświetlenia. Tymczasem sam Elementor daje narzędzia do wyłączenia każdego z tych żądań, trzeba tylko wiedzieć, które dźwignie nacisnąć.

Poniżej trzy punktowe optymalizacje, które łącznie obcinają do sekundy czasu ładowania bez wtyczek buforujących i CDN. Każdej towarzyszy gotowy kod do functions.php.

💡 Szybki przegląd:

  • Wyłączamy Google Fonts od Elementora wbudowanym ustawieniem lub hakiem w motywie i hostujemy czcionki lokalnie
  • Zastępujemy Font Awesome od Elementora lokalną wersją Critical, aby przeglądarka ładowała tylko faktycznie używane ikony
  • Podmieniamy Eicons (własne ikony Elementora) na Font Awesome przez CSS, jeden plik zamiast dwóch pakietów czcionek

1. Proszę wyłączyć Google Fonts od Elementora

Zapytania do Google Fonts z Elementora w panelu Network

Elementor domyślnie ładuje Google Fonts dla każdej czcionki użytej w projekcie, nawet jeśli hostuje już Pan te czcionki lokalnie. W waterfallu żądań wygląda to jak osobne wywołanie HTTP do fonts.googleapis.com, które blokuje renderowanie tekstu do pełnego załadowania.

Najprostszy sposób, wbudowane ustawienie Elementora. Proszę przejść do Elementor → Settings → Performance i aktywować Disable Google Fonts. Po tym wtyczka przestanie generować żądanie do CDN Google, a Pan będzie mógł podłączyć czcionki lokalnie przez motyw potomny lub wtyczkę typu OMGF (Optimize My Google Fonts).

Jeśli ustawienie z jakiegoś powodu jest niedostępne lub potrzebuje Pan kontroli programowej, proszę dodać ten kod do functions.php motywu potomnego:

1add_action( 'wp_enqueue_scripts', function() {
2    wp_dequeue_style( 'google-fonts-1' );
3    wp_dequeue_style( 'google-fonts-2' );
4}, 99 );

Hak z priorytetem 99 uruchamia się po tym, jak Elementor ustawia swoje style w kolejce, i usuwa je przed wyprowadzeniem do <head>. Po dezaktywacji proszę podłączyć czcionki lokalnie: pobrać potrzebne odmiany w WOFF2, umieścić w folderze motywu i zdefiniować @font-face w stylach.

2. Proszę zastąpić Font Awesome od Elementora wersją lokalną

Elementor ładuje pełny pakiet Font Awesome, setki ikon, z których na konkretnej stronie faktycznie używa się 5-7 sztuk. Reszta bajtów po prostu spala budżet ładowania.

Rozwiązanie, lokalny Critical Font. Wtyczki buforujące (Swift Performance, LiteSpeed Cache) i wyspecjalizowane narzędzia (OMGF) potrafią przeskanować stronę, zebrać listę faktycznie używanych ikon i zbudować okrojony webfont.css tylko z potrzebnymi glifami. Plik trafia do /wp-content/fonts/ na Pana serwerze, zero zewnętrznych żądań.

Aby Elementor przestał ładować swoją wersję i podchwycił lokalną, proszę dodać w functions.php:

1add_action( 'wp_enqueue_scripts', 'replace_elementor_fa', 3 );
2add_action( 'elementor/frontend/after_enqueue_styles', function() {
3    wp_dequeue_style( 'font-awesome' );
4} );
5 
6function replace_elementor_fa() {
7    wp_enqueue_style(
8        'font-awesome-local',
9        get_stylesheet_directory_uri() . '/fonts/fontawesome/webfont.css',
10        array(),
11        '1.0.0'
12    );
13}

Pierwsza linia ustawia Pana lokalną wersję w kolejce z wysokim priorytetem. Druga, zdejmuje wersję Elementora z uchwytu font-awesome natychmiast po tym, jak wtyczka ją zarejestrowała. Funkcja replace_elementor_fa wskazuje ścieżkę do pliku; proszę zastąpić ją tą, którą wygenerowała Pana wtyczka buforująca.

Po wdrożeniu proszę sprawdzić waterfall w GTMetrix: żądanie do font-awesome.min.css od Elementora powinno zniknąć, a lokalny webfont.css, ładować się z Pana domeny.

3. Proszę zastąpić ikony Elementora (Eicons) na Font Awesome

Zapytania do czcionki eicons w wodospadzie GTMetrix

Elementor używa własnej czcionki Eicons dla ikon w widżetach: strzałki sliderów, ikona hamburgera w menu, krzyżyk zamknięcia. Pakiet ładuje się w całości przy każdym użyciu dowolnej ikony, a to dodatkowe żądanie i opóźnienie renderowania.

Szczegóły zapytania HTTP do pliku eicons w raporcie GTMetrix

Skoro ma Pan już lokalny Font Awesome (krok 2), logiczne jest przełączenie Eicons na niego, jeden plik czcionki zamiast dwóch. Technika zastępuje klasy CSS .eicon i .eicon-menu-bar glifami z Font Awesome.

Najpierw proszę usunąć Eicons z kolejki. Kod trafia do functions.php:

1add_action( 'elementor/frontend/after_enqueue_styles', 'js_dequeue_eicons' );
2 
3function js_dequeue_eicons() {
4    if ( is_admin() || current_user_can( 'manage_options' ) ) {
5        return;
6    }
7    wp_dequeue_style( 'elementor-icons' );
8}

Funkcja pomija panel administracyjny, aby edytor Elementora nadal działał bez zakłóceń, i zdejmuje uchwyt elementor-icons tylko na froncie.

Teraz proszę zdefiniować zastąpienie w CSS, można przez Appearance → Customize → Additional CSS lub w arkuszu stylów motywu potomnego:

1.eicon,
2.eicon-menu-bar {
3    display: inline-block;
4    font: normal normal normal 14px/1 FontAwesome;
5    font-size: inherit;
6    text-rendering: auto;
7    -webkit-font-smoothing: antialiased;
8    -moz-osx-font-smoothing: grayscale;
9}
10 
11.elementor-menu-toggle i:before {
12    content: "\f0c9";
13    font-family: FontAwesome;
14}
15 
16.elementor-menu-toggle.elementor-active i:before {
17    content: "\f00d";
18    font-family: FontAwesome;
19}

Pierwszy blok przypisuje bazowym klasom Eicons krój FontAwesome. Drugi i trzeci definiują konkretne glify: \f0c9 dla ikony hamburgera (fa-bars) i \f00d dla krzyżyka zamknięcia (fa-times). Pozostałe ikony podmienia się na tej samej zasadzie: proszę otworzyć devtools, sprawdzić klasę widżetu i zdefiniować content z kodem potrzebnego glifa ze ściągawki Font Awesome.

Po wdrożeniu proszę sprawdzić konsolę przeglądarki pod kątem braku błędów ładowania czcionek i przepuścić stronę przez PageSpeed Insights, żądanie do eicons.woff2 powinno zniknąć z raportu.

⁉️🤔 Częste pytania

Czy ta metoda działa na aktualnych wersjach Elementora?

Tak, wszystkie trzy porady są aktualne dla bieżącej linii Elementora. Haki elementor/frontend/after_enqueue_styles i wp_enqueue_scripts, część publicznego API wtyczki i zachowują kompatybilność wsteczną. W oficjalnej dokumentacji Elementora dotyczącej wyłączania Google Fonts opisano wbudowany przełącznik w sekcji Elementor → Settings → Performance, dla porady nr 1 proszę użyć go w pierwszej kolejności, a kod pozostawić jako opcję zapasową dla niestandardowych motywów.

Co zrobić, jeśli po zastąpieniu Eicons w edytorze zniknęły ikony?

Kod dezaktywacji Eicons omija panel administracyjny, sprawdzenie is_admin() i current_user_can( 'manage_options' ) gwarantuje, że w edytorze Elementora czcionka pozostaje na miejscu. Jeśli ikony mimo to zniknęły, proszę upewnić się, że dodał Pan kod dokładnie do functions.php aktywnego motywu, a nie przez wtyczkę snippetów, która może wykonywać się również na stronach administracyjnych.

Czy trzeba instalować wtyczkę buforującą do tych optymalizacji?

Dla porad nr 1 i nr 3 wtyczka buforująca nie jest obowiązkowa, wystarczy kod w functions.php. Dla porady nr 2 (Critical Font) potrzebne jest narzędzie, które zbuduje okrojony Font Awesome: Swift Performance, LiteSpeed Cache, OMGF Pro lub ręczne złożenie przez narzędzie fonttools. Bez tego kroku przełączy Pan po prostu ładowanie pełnego Font Awesome z CDN Elementora na swój serwer, oszczędności prawie nie będzie.

Ile realnego zysku w PageSpeed Score dają te trzy porady?

Każdy przypadek jest indywidualny, ale punkt odniesienia jest taki: wyłączenie Google Fonts zdejmuje 200-400 ms ładowania, lokalny Font Awesome oszczędza kolejne 150-300 ms, a zastąpienie Eicons usuwa jedno żądanie HTTP i oszczędza 50-150 ms. Łącznie, do sekundy czasu pełnego załadowania, co na typowym hostingu za 10-20 USD miesięcznie podnosi mobilny wynik PageSpeed Insights o 5-15 punktów.

Czy można całkowicie zrezygnować z Font Awesome i Eicons?

Można, jeśli jest Pan gotów przebudować wszystkie ikony w Elementorze na SVG. W tym celu w widżetach ręcznie zastępuje Pan ikony przesłanymi plikami SVG lub używa wtyczki typu Iconic. Pracochłonność jest wysoka, dziesiątki widżetów na stronie, ale rezultat daje najlżejszy front. Dla większości projektów lokalny Critical Font (krok 2), jest wystarczającym kompromisem.

Co dają te poprawki na realnej stronie?

Trzy opisane techniki nie wymagają wtyczek premium, CDN ani zmiany hostingu. To czysta praca z żądaniami czcionek, najbardziej niedocenianą pozycją kosztów szybkości na stronach Elementora.

Jeśli nie przeszedł Pan jeszcze podstawowej optymalizacji WordPressa, proszę zacząć od pełnego poradnika przyspieszania strony, który obejmuje buforowanie, kompresję CSS/JS oraz optymalizację obrazów. A kiedy dotrze Pan do czcionek, proszę wrócić do tych trzech kroków i wdrażać je pojedynczo, sprawdzając PageSpeed Insights po każdym z nich.

Proszę testować na kopii strony, zrobić backup przed edycją functions.php i wycisnąć z Elementora maksimum szybkości.

Redakcja
RedakcjaZespół redakcyjny→ All publications

Profesjonalny zespół autorów i redaktorów specjalizujących się w tworzeniu treści wysokiej jakości.