Jak przestać ładować niepotrzebne pliki i zmniejszyć liczbę żądań HTTP witryny — porady dotyczące optymalizacji WordPress
Opublikowany: 2020-09-08
Na Crunchify opublikowaliśmy wiele samouczków dotyczących optymalizacji prędkości, z których możesz skorzystać w dowolnym momencie.
Jako naszego dostawcę treści używamy MaxCDN. Minęły prawie 4 lata i jak dotąd działa zbyt dobrze. Genesis WordPress Framework i MaxCDN to najlepsza kombinacja. Domyślnie Genesis Framework zawiera wiele optymalizacji, schemat Google Markup, strukturę przyjazną dla urządzeń mobilnych i wiele więcej.
W zeszłym tygodniu patrzyłem na moje konto MaxCDN i nagle zauważyłem najlepsze zasoby do pobrania. Jak widać na powyższym obrazku top 9 out of 10 resource files zostało pobranych ponad ~ 5 millions razy w zeszłym tygodniu.
Byłem zaskoczony i pomyślałem, że naprawdę powinienem potrzebować tych zasobów? Czy muszę ładować te pliki osobno? Jak pozbyć się tych plików, jeśli nie jest to wymagane, z wyjątkiem pliku style.css , który jest absolutnie wymagany do załadowania witryny.
Zacznijmy od tego, jak pozbyłem się tych wszystkich 9 plików za pomocą prostych sztuczek
Nie dla wszystkich czytelników
Te kroki nie dotyczą wszystkich czytelników WordPressa. W Crunchify używamy Crayon Syntax Highlighter i niestandardowych obrazów specyficznych dla motywu, więc dotyczy to ograniczonych użytkowników
Krok 1
Wypiszmy list all of those 9 files . Druga kolumna pokazuje liczbę pobrań.
|
1 2 3 4 5 6 7 8 9 |
/ wp - includes / js / wp - embed . min . js 12 , 626 , 575 2.41 GB / wp - content / plugins / crayon - syntax - highlighter / themes / neon / neon . css 11 , 406 , 345 2.61 GB / wp - content / plugins / crayon - syntax - highlighter / css / min / crayon . min . css 11 , 259 , 474 4.50 GB / wp - content / themes / crunchify / images / bg . png 9 , 268 , 221 3.45 GB / wp - content / themes / crunchify / images / bg - pattern . png 9 , 135 , 288 3.41 GB / wp - content / themes / crunchify / images / h3 . png 6 , 289 , 690 1.18 GB / wp - content / themes / crunchify / images / crunchify - logo . png 5 , 476 , 295 7.05 GB / wp - content / themes / crunchify / images / crunchify - sprite . png 5 , 334 , 562 7.45 GB / wp - content / plugins / crayon - syntax - highlighter / js / min / crayon . min . js 4 , 344 , 704 2.60 GB |
Krok 2
Zgrupujmy razem pliki Crayon Syntax Highlighter Plugin.
Istnieją 3 pliki:
neon.css , crayon.min.css i crayon.min.js . Napisałem kompletny osobny samouczek z 7 szczegółowymi krokami, aby pozbyć się tych plików. Uprzejmie przejrzyj to i daj mi znać, jeśli zauważysz jakiś problem.
Krok 3
Teraz przejdź do wp-embed-min.js . Odwiedź samouczek Jak wyłączyć automatyczne osadzanie skryptu dla WordPress 4.4+. Przestanie wczytywać osadzony plik w interfejsie użytkownika.
Krok 4
Przejdźmy do 3 more .png :
wzór-bg.png
Ładowałem ten obrazek w tle nagłówka i stopki. Pozbyłem się go, używając zamiast tego koloru #333 .
crunchify-sprite.png
Ładowałem ten obrazek duszka, aby pokazać przyciski obserwowania społecznościowego na pasku bocznym. Zastąpiłem go fontawesome czcionkami.
h3.png
Ładowałem to, aby wyświetlić znacznik wyboru dla postów H3 w niektórych lokalizacjach. Zamieniłem go na fontawesome fonts. Poniżej znajduje się niesamowity odpowiednik.
Krok-5
Teraz zostały nam tylko 2 pliki. crunchify-logo.png i bg.png , które pomyślałem o zachowaniu go. Więc zamiast wywoływać jako obraz, dodałem odpowiednik obrazu base64 dla tego pliku.
Zanim:
|
1 2 3 4 5 6 7 8 9 10 |
. header - image . site - title a { display : block ; float : left ; min - height : 60px ; text - indent : - 9999px ; width : 100 % ; background - position : center ! important ; background - size : contain ! important ; background : url ( images / crunchify - logo . png ) no - repeat ; } |
Później:
|
1 2 3 4 5 6 7 8 9 10 |
. header - image . site - title a { display : block ; float : left ; min - height : 60px ; text - indent : - 9999px ; width : 100 % ; background - position : center ! important ; background - size : contain ! important ; background : url ( data : image / png ; base64 , iVBORw0KGgoAAAANSUhEUgAAAmIAAACACAYAAAHfQjXQAABi3UlEQVR42u1dCXhVxfXPQlhcUBEEAQUheQmEPTtucV9xAcLm2r91qYraWnetkR2Sl7AoikutXbRSq9ba1qot1rpVcamKVVFBUZGEbCQkJG + 5 //O778xjMrlbFpJHmPN957vv3WXu3Llzz/zmnDPnxMVp0hQTVF6Sd3zowaONsAPrVpJomz8nuL00x3DjwsK4hM6uW1VVVdjDOcHq6upgp1WqekWu4aXBZk3cb3BnNxg1xF+oQULyPsMw4pUGM2pra0d1WqUa75/sqcHo1Jld8QWgQaz2Ec/jRv0XelmnVaiiNOdxLw0298RBzzmV09TUhIcIoAdUVlbW46F27NhhNDQ0mA8cDAYN6YHrsaXzjqYHXoTrampqkqXjgZ07dxpKA4WpJ0X3id91dXWGuFcoFDLEfvn6DicvDfbyz9K3uvSEEDVAQyAQwANsFD1DbKkhE6R9YWqok6TGeB4PTvuMtWvXJqrXogehAWh7p7TveblnYT9RIpVRJD5j3heVvZXFKc/RxeYnXVmU8qohyeVKf8qrVX7feM+NVliQ3lPwmisykgrz83tckRHZ4r/XzwcVFHIGDyAehD8fAw8u9qufndhWVFTkyo2B8uTGo3KeUD9X3v+JXA/aPieXs2tlqrF+TUZSwwqfQY0XXlsQl0hbo9rvW1J7/7jD8Nvg454abfHMLMONl87KrndptAD3GvMTlXqR4KDyHxyihy2Tz1Wvo+PredSMl/YtU89XPuPoMfQm6kF+NFRVccou2n6ABqos9tXVlZoNiPPiA/emGqH7Uo0qf8qXnhrtqhPTNnlquJnZf3EqB71I9CxlX7T3SfsS5E9HvVb8l0dI+Rx8xtxrvxafI/3vSb+/Id7OjVse2R/5JI21BYnikzTWxkXqUhDXvL50judPdImHRgPffNaYUXExRKJHicGA+D2IAgw0xH/a4xVYNjvbU8PFYqNBJNDoeYkdPNmjtGhmZshLw3XFjEAlgijoURNVeUaQY0CnVyZ7RP+XSfCT8M8yGZ+uYKm3jdCTTk2aNMUqAZ/UrcqtV/VmUb3amqMNTOp1S7Vi7ll3b16nNxjhre1i2uSiJMDMYume71mFhQleGqtyRU64K16kPG+1IlYMhDrnM6R5lpfGKivpmsbatm3bQCsNrTq/lKdge/wzLg==) no-repeat; } |
Przekonwertowałem oba obrazy na obrazy base64. Przewaga, jaką uzyskamy, to brak konieczności otwierania kolejnego połączenia i wysyłania żądania HTTP do serwera w celu uzyskania obrazu.
Mniej żądań = lepszy czas ładowania strony
Używanie obrazu SVG (Scalable Vector Graphic) image ma pewne zalety, ponieważ obrazy skalują się do dowolnego rozmiaru bez utraty przejrzystości (z wyjątkiem bardzo małych), co świetnie wygląda na wyświetlaczach Retina.
Te Data URIs nie ograniczają się do .png lub obrazów, ale do dowolnych zasobów. Oto proste narzędzie do konwersji plików .png na .svg, z którego korzystałem online.
Streszczenie
Ten samouczek jest częścią sekcji Jak przyspieszyć WordPress i zwiększyć wydajność. Znajdziesz tam wszystkie sztuczki i wskazówki dotyczące optymalizacji WordPressa.
Wykonując te kroki, pozbyłem się wszystkich 9 niechcianych zasobów z 10. Co oznacza – moja strona ładuje się znacznie szybciej, ponieważ na każdej stronie będzie 9 mniej żądań
Daj mi znać, jeśli masz inne wskazówki, które poprawią szybkość strony. W Crunchify szybkość jest głównym kryterium i dlatego używamy bardzo mniej wtyczek. Wszystkie strony ładują within half a second .
