WordPress automatycznie ładuje skrypt emoji o nazwie wp-emoji-release.min.js na każdej stronie Twojej witryny. Skrypt ten został wprowadzony w WordPress 4.2, aby zapewnić poprawne wyświetlanie znaków emoji w starszych przeglądarkach, takich jak Internet Explorer 10 i wczesne wersje Androida. Działa przez wykrywanie, czy przeglądarka odwiedzającego potrafi natywnie renderować emoji. Jeśli nie, skrypt zastępuje znaki emoji obrazami z CDN WordPress pod adresem s.w.org.
Problem polega na tym, że ten skrypt jest ładowany na każdej stronie, niezależnie od tego, czy Twoja treść faktycznie zawiera emoji. Dla zdecydowanej większości witryn WordPress jest to zmarnowany narzut.
Dlaczego WordPress nadal domyślnie ładuje ten skrypt
WordPress ceni wsteczną kompatybilność bardziej niż prawie wszystko inne. Ponieważ nadal istnieje niewielka liczba użytkowników na bardzo starych przeglądarkach, zespół core zachowuje tę funkcję domyślnie włączoną. Skrypt składa się z dwóch części: inline'owego bloku JavaScript wykonującego test renderowania emoji oraz zewnętrznego pliku wp-emoji-release.min.js, który jest ładowany, jeśli test stwierdzi, że przeglądarka potrzebuje pomocy. Dodatkowo WordPress dodaje style CSS do renderowania emoji oraz wskazówkę DNS-prefetch dla s.w.org w celu przyspieszenia połączenia z CDN.
Rzeczywisty wpływ na wydajność
Chociaż sam skrypt emoji ma rozmiar około 15-20 KB, całkowity koszt jest większy niż tylko rozmiar pliku. Oto co dzieje się przy każdym wywołaniu strony, gdy skrypt emoji jest aktywny:
- Wykonanie inline JavaScript: Test wykrywania emoji działa w sekcji
<head>, co blokuje renderowanie. Przeglądarka musi wykonać ten kod, zanim będzie mogła kontynuować parsowanie reszty strony. - Dodatkowe wyszukiwanie DNS: DNS-prefetch dla
s.w.orguruchamia rozwiązywanie DNS, które w przeciwnym razie nie byłoby potrzebne. Na połączeniach mobilnych o wysokim opóźnieniu może to kosztować 50-100ms. - Dodatkowe żądanie HTTP: Jeśli przeglądarka "zawiedzie" w teście emoji (co jest rzadkie na nowoczesnych urządzeniach), pełny plik skryptu jest pobierany z CDN.
- Narzut CSS: Dodatkowe style związane z emoji są wstrzykiwane zarówno do frontendu, jak i panelu administracyjnego.
Dla witryn skupiających się na wydajności i dobrych wynikach Core Web Vitals usunięcie tego skryptu to jedna z najprostszych korzyści. Zmniejsza całkowity czas blokowania i eliminuje niepotrzebne żądania sieciowe.
Kto faktycznie potrzebuje skryptu emoji
Powinieneś zachować skrypt emoji, jeśli Twoja witryna celuje konkretnie w użytkowników bardzo starych przeglądarek (IE 10 lub wcześniejszy, Android 4.3 lub niższy) i Twoja treść w dużej mierze opiera się na wyświetlaniu emoji. W praktyce dotyczy to prawie nikogo. Każda nowoczesna przeglądarka wydana od 2015 roku obsługuje emoji natywnie poprzez renderowanie czcionek systemu operacyjnego. Nawet bez skryptu WordPress emoji są poprawnie wyświetlane dla ponad 99% Twoich odwiedzających.
Usuń skrypt emoji za pomocą functions.php
Najczystszym sposobem wyłączenia skryptu emoji jest dodanie poniższego kodu do pliku functions.php swojego motywu lub, lepiej, do wtyczki specyficznej dla witryny. Każda linia adresuje określoną część systemu emoji:
/**
* Disable WordPress emoji scripts and styles
*/
function disable_emojis() {
// Remove the inline emoji detection script from the frontend head
remove_action('wp_head', 'print_emoji_detection_script', 7);
// Remove the emoji detection script from the admin area
remove_action('admin_print_scripts', 'print_emoji_detection_script');
// Remove emoji CSS styles from the frontend
remove_action('wp_print_styles', 'print_emoji_styles');
// Remove emoji CSS styles from the admin area
remove_action('admin_print_styles', 'print_emoji_styles');
// Stop converting emoji in RSS feed content
remove_filter('the_content_feed', 'wp_staticize_emoji');
// Stop converting emoji in RSS comment text
remove_filter('comment_text_rss', 'wp_staticize_emoji');
// Stop converting emoji in outgoing emails
remove_filter('wp_mail', 'wp_staticize_emoji_for_email');
// Remove the DNS prefetch for the emoji CDN
add_filter('wp_resource_hints', function($urls, $relation_type) {
if ('dns-prefetch' === $relation_type) {
$urls = array_filter($urls, function($url) {
return strpos($url, 'https://s.w.org/images/core/emoji/') === false;
});
}
return $urls;
}, 10, 2);
// Prevent the emoji script from loading via the block editor
add_filter('emoji_svg_url', '__return_false');
}
add_action('init', 'disable_emojis');Alternatywa: użyj wtyczki
Jeśli wolisz nie edytować kodu bezpośrednio, istnieje kilka lekkich wtyczek, które zrobią to za Ciebie. Najpopularniejsze opcje to:
- Disable Emojis (SUSPENDED): Przez lata była ulubionym rozwiązaniem. Bardzo mały ślad, robi dokładnie to samo co kod powyżej. Uwaga: ta wtyczka została usunięta z repozytorium wtyczek WordPress, ale istnieją alternatywy.
- Autoptimize: Ogólna wtyczka optymalizacyjna z opcją usuwania skryptów emoji w zakładce ustawień "Extra". Jeśli już używasz Autoptimize do optymalizacji CSS/JS, jest to wygodne podejście all-in-one.
- Wtyczki wydajnościowe: Wiele wtyczek cachujących i wydajnościowych, takich jak WP Rocket, LiteSpeed Cache i Perfmatters, zawiera przełącznik do wyłączania skryptu emoji. Sprawdź ustawienia swoich istniejących wtyczek, zanim zainstalujesz coś nowego.
Co się stanie z wyświetlaniem emoji po usunięciu
Nic złego. Nowoczesne przeglądarki używają wbudowanej czcionki emoji systemu operacyjnego do renderowania znaków emoji. Na Windows jest to czcionka Segoe UI Emoji. Na macOS i iOS to Apple Color Emoji. Na Androidzie to Noto Color Emoji. Te czcionki systemowe obsługują wszystkie standardowe emoji Unicode bez pomocy WordPress.
Jedyna widoczna różnica, jaką możesz zauważyć, to że emoji wyglądają nieco inaczej w zależności od systemu operacyjnego odwiedzającego. Użytkownik Apple zobaczy emoji w stylu Apple, użytkownik Windows w stylu Microsoft i tak dalej. Jest to standardowe zachowanie w całej sieci i nie jest specyficzne dla WordPress.
Jak sprawdzić, że skrypt zniknął
Po dodaniu kodu lub aktywowaniu wtyczki należy potwierdzić, że skrypt emoji nie jest już ładowany. Oto trzy sposoby, aby to sprawdzić:
- Wyświetl źródło strony: Otwórz swoją witrynę w przeglądarce, kliknij prawym przyciskiem myszy i wybierz "Wyświetl źródło strony". Wyszukaj
wp-emoji. Jeśli nie znajdziesz wyników, skrypt został pomyślnie usunięty. - Browser DevTools: Otwórz zakładkę Network w narzędziach deweloperskich przeglądarki, przeładuj stronę i przefiltruj po "emoji". Powinieneś zobaczyć zero żądań związanych ze skryptami emoji.
- Skanowanie InspectWP: Uruchom nowe skanowanie InspectWP swojej witryny. Sekcja WordPress raportuje, czy skrypt emoji jest nadal obecny. Jeśli usunięcie się powiodło, wskaźnik skryptu emoji nie pojawi się już w raporcie.