Ako vaša WordPress stranica koristi plaćenu WordPress temu ili popularnu iz službenog repozitorija WordPress tema, velika je vjerojatnost da je tema razvijena za razne slučajeve upotrebe. Možda koristite samo mali skup svih značajki dostupnih u temi.
U tom slučaju, vaša stranica učitava puno neiskorištenog CSS-a koji nije potreban za stiliziranje stranica vaše web-lokacije. Na primjer, WordPress tema koju koristite može imati stilove i za WooCommerce stranice, ali ako na svojoj WordPress stranici vodite samo blog, onda ne koristite CSS uključen za WooCommerce stranice na vašoj web-lokaciji i tako služite neiskorišteno CSS korisnicima.
Ako ste testirali svoju web stranicu na alatu Google Pagespeed, vjerojatno ste već svjesni da vaša stranica ima neiskorištene probleme s CSS-om. U ovom vodiču pokazat ćemo vam kako prvo provjeriti ima li nekorištenog CSS-a, a zatim koristiti besplatni alat za uklanjanje nekorištenog CSS-a sa svoje WordPress stranice.
Kako provjeriti neiskorišteni CSS
Google Chrome DevTools (onaj koji vidite kada kliknete opciju "Inspect" u kontekstnom izborniku) ima značajku pokrivenosti unutar kartice Izvori. Možete koristiti opciju Pokrivenost da pronađete neiskorištene CSS i JS koje vaša web stranica učitava.
- Otvorite svoju web stranicu u Chromeu na radnoj površini.
- Desnom tipkom miša kliknite prazan bijeli prostor na vašoj web-lokaciji i odaberite Pregledati iz kontekstnog izbornika.
- Klikni na Izvori karticu, pritisnite Ctrl + Shift + P da otvorite naredbeni prozor, a zatim upišite pokrivenost i odaberite Pokrenite pokrivenost instrumentacije i ponovno učitajte stranicu iz dostupnih naredbi.
- Na kartici Pokrivenost kliknite na URL filter i ovdje unesite korijensku domenu svoje stranice kako biste prikazali samo interne CSS/JS datoteke.
└ Provjerite Neiskorišteni bajtovi da biste vidjeli postotak podataka koji se učitavaju u CSS/JS datoteci iz vaše teme.
- Kliknite na CSS datoteku da biste vidjeli nekorišteni CSS (označen crvenim trakama) koji je učitala vaša stranica. CSS koji se koristi na trenutnoj stranici bit će prikazan zelenim trakama.
Nakon što analizirate sav neiskorišteni CSS koji se učitava na vašu web stranicu, vrijeme je da ga uklonite. Postoji nekoliko besplatnih alata za uklanjanje nekorištenog CSS-a s web stranica. U nastavku je jedan od popularnih alata koji sam testirao i koristio na vlastitim projektima.
Koristite PurifyCSS Online za uklanjanje nekorištenog CSS-a
Obično možete pronaći dodatak za gotovo sve u WordPressu. Ali za uklanjanje neiskorištenog CSS-a, nažalost, nije dostupan niti jedan dodatak. Stoga ćemo koristiti ručne alate koji nisu specifični za WordPress za uklanjanje neiskorištenog CSS-a s vaše stranice.
PurifyCSS je najviše prijateljski alat koji nije programer možete pronaći za rješavanje neiskorištenog CSS-a. Alat ima jednostavno korisničko sučelje koje korisnicima omogućuje da unesu ili URL web-mjesta ILI HTML i CSS kod. Za WordPress ćemo koristiti opciju URL-a i pružiti veze na sve vrste stranica na vašoj web-lokaciji kako bismo omogućili alatu da preuzme CSS od svih i optimizira za neiskorišteni CSS.
Evo kratkog popisa stranica koje biste trebali staviti u alat:
- URL početne stranice
- Više URL-ova stranica posta iz svake kategorije na vašoj web-lokaciji
└ Time se osigurava da je CSS uključen za sve elemente posta.
- Kontakt, O nama, Privatnost i sve vrste različitih stranica koje možete imati na svojoj web stranici.
- Stranica arhive, stranica za pretraživanje, stranice autora
- Stranice prilagođene vrste posta
Vrući savjet: Izradite post/stranicu sa "značajkama" sa svim elementima teme koje koristite ili biste mogli koristiti u budućnosti, kao što su tablica, galerija slika, kod, unaprijed, poredani popisi, neuređeni popisi, obrasci, kartice, harmonike, Gutenberg blokovi koje općenito koristite , itd.
Upotrijebite ovaj URL objave sa 'značajkama' u PurifyCSS Online alatu kako biste osigurali da je CSS za najčešće korištene elemente uključen.
Udari Očistite CSS Nakon što dodate sve relevantne vrste URL-ova sa svoje stranice u PurifyCSS Online alat.
Kopirajte novi CSS koji je generirao alat i upotrijebite ga na svojoj web stranici. Provjerite jeste li sigurnosno kopirajte izvorni stil.css i druge CSS datoteke u vašoj temi prije nego što zamijenite novi CSS koji je generirao PurifyCSS.
Savjet: Možete koristiti ugrađeni uređivač tema WordPress za uređivanje CSS datoteka svoje teme ili možete koristiti FTP/SFTP program za povezivanje s poslužiteljem i udobno uređivanje datoteka pomoću uređivača Notepad.