{"id":237127,"date":"2022-04-05T10:50:00","date_gmt":"2022-04-05T07:50:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=237127"},"modified":"2022-04-27T12:46:31","modified_gmt":"2022-04-27T09:46:31","slug":"kuidas-optimeerida-css-i-edastamist-wordpressis","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/et\/kuidas-optimeerida-css-i-edastamist-wordpressis\/","title":{"rendered":"Kuidas optimeerida CSS-i edastamist WordPressis"},"content":{"rendered":"

Kui olete siin, siis t\u00f5en\u00e4oliselt saite selle teate Google’i PageSpeed \u200b\u200bInsightsi<\/a> testis:<\/p>\n

\"Kuidas<\/a><\/p>\n

Ehkki k\u00f5igi renderdust blokeerivate failide eemaldamine v\u00f5ib olla keeruline, pole see \u00f5igete t\u00f6\u00f6riistadega nii keeruline.<\/p>\n

Selles juhendis n\u00e4itan teile kolme v\u00f5imalust saidi kiirendamiseks<\/a> optimeeritud CSS-i edastamisega. Siin on valikud nii WordPressi uutele uudistele kui ka arendajatele.<\/p>\n

Alustame \u00fclevalt \u2013 mida t\u00e4pselt t\u00e4hendab CSS-i edastamise optimeerimine oma WordPressi saidil?<\/p>\n

Mida t\u00e4hendab "CSS-i edastamise optimeerimine"?<\/h2>\n

Lubage mul k\u00f5igepealt teha selgeks, mida ma silmas pean.<\/p>\n

CSS-faile kasutatakse veebilehtede stiili kujundamiseks<\/a>. Iga WordPressi teema laadib faili style.css ja t\u00f5en\u00e4oliselt on teil pistikprogrammide poolt lisatud k\u00e4put\u00e4is t\u00e4iendavaid stiililehti (CSS-faile). N\u00e4iteks kui teil on pistikprogramm, mis lisab uue vidina, peab see selle vidina stiilimiseks laadima teise laaditabeli.<\/p>\n

K\u00f5ik CSS-failid laaditakse enne teie saidi renderdamist.<\/strong><\/p>\n

See t\u00e4hendab, et k\u00fclastajad n\u00e4evad seni t\u00fchja valget ekraani. N\u00fc\u00fcd on see asi\u2026<\/p>\n

Suuremat osa laaditud CSS-ist pole vaja mis tahes lehel, millel k\u00fclastaja on, ja veelgi v\u00e4hem on seda vaja selleks, mida nad kohe n\u00e4evad. N\u00e4iteks miks panna nad jaluse stiilide laadimisel ootama? T\u00f5en\u00e4oliselt kulub v\u00e4hemalt paar sekundit, enne kui nad seda n\u00e4evad (kui nad seda kunagi n\u00e4evad).<\/p>\n

CSS-faile edasi l\u00fckates v\u00f5i as\u00fcnkroonselt laadides saame lubada saidil kuvada k\u00fclastaja brauseris enne laaditabelite laadimise l\u00f5petamist.<\/p>\n

Selles juhendis jagan kolme erinevat l\u00e4henemisviisi stiilitabelite edasil\u00fckkamiseks ja CSS-i edastamise optimeerimiseks.<\/p>\n

Optimeeritud kriitilised renderdusrajad tegevuses<\/h3>\n

Kui k\u00fclastate konkureerivate teemade avalehte<\/a>, hoidke saidi laadimise ajal silma peal brauseri vahekaardi laadimisn\u00e4idikul. M\u00e4rkate, et p\u00e4rast seda, kui sait on n\u00e4htav ja n\u00e4ib olevat laaditud, j\u00e4\u00e4b laadimisindikaator veel hetke p\u00f6\u00f6rlema.<\/p>\n

See on n\u00e4ide sellest, kuidas optimeeritud CSS-i edastamine praktikas v\u00e4lja n\u00e4eb.<\/p>\n

Kui soovite n\u00e4ha v\u00e4ga optimeeritud kriitilise renderdustee<\/a> n\u00e4idet, k\u00fclastage Amazoni. Kogu saiti ei laadita korraga. Selle asemel n\u00e4ete m\u00f5ne sekundi jooksul t\u00e4nu hoolikalt optimeeritud renderdusteele erinevaid elemente kogu lehel.<\/p>\n

1 WP rakett<\/h2>\n

Kasutan siin Compete Themes’i<\/a> pistikprogrammi WP Rocket<\/a> ja soovitan seda enne k\u00f5iki muid lahendusi kriitilise renderdustee optimeerimiseks.<\/p>\n

CSS-i edastamise optimeerimine WP Rocketiga ei saa t\u00f5esti olla lihtsam. Men\u00fc\u00fcs Failide optimeerimine on selle funktsiooni sissel\u00fclitamiseks m\u00e4rkeruut.<\/p>\n

\"Kuidas<\/a><\/p>\n

Kui see on m\u00e4rgitud, l\u00fckkab WP Rocket automaatselt k\u00f5ik teie laaditabelid edasi, nii et neid ei laadita enne, kui sait k\u00fclastaja brauseris kuvatakse. Kui n\u00fc\u00fcd kogu CSS edasi l\u00fckata, n\u00e4eks teie sait kuni selle laadimiseni kohutav v\u00e4lja ja WP Rocketi arendajad on selle pistikprogrammiga elegantselt lahendanud.<\/p>\n

Kui l\u00fclitate selle valiku sisse, leiab WP Rocket automaatselt CSS-i, mis on vajalik teie saidi nende osade kujundamiseks, mida k\u00fclastajad teie saidi laadimise hetkel n\u00e4evad, ja see kood lisatakse dokumenti.<\/p>\n

Teisis\u00f5nu kuvatakse teie sait brauseris kiiremini ja n\u00e4ib olevat t\u00e4ielikult laaditud, samal ajal kui edasil\u00fckatud CSS laaditakse j\u00e4rgmise sekundi v\u00f5i kahe jooksul.<\/p>\n

Minu arvates on see vaieldamatult parim lahendus CSS-i edastamise optimeerimiseks WordPressiga.<\/p>\n

WP Rocket on esmaklassiline pistikprogramm, kuid kui kiiremad laadimisajad teenivad teie saidilt rohkem tulu, kaaluksin kindlasti selle oma saidile hankimist. Mul on palju \u00fcksikasjalikum \u00fclevaade WP Rocketist,<\/a> mida saate lugeda, kui soovite rohkem teada saada. Muidu saate nende saiti vaadata siit<\/a>.<\/p>\n

2 Automatiseeri<\/h2>\n

Teine v\u00f5imalus, mida ma soovitaksin, on pistikprogramm Autoptimize<\/a>.<\/p>\n

\"Kuidas<\/a><\/p>\n

See funktsioonirikas j\u00f5udlusplugin pakub m\u00f5ningaid l\u00e4henemisviise CSS-i edastamise optimeerimiseks. Lihtsaim v\u00f5imalus on lihtsalt lisada kogu CSS. See v\u00f5tab kogu teie laadilehtedelt leitud CSS-i ja lisab selle otse lehe dokumenti, nii et laaditabeleid ei laadita.<\/p>\n

Selle valiku leidmiseks peate kl\u00f5psama \u00fclaosas nuppu Kuva t\u00e4psemad s\u00e4tted.<\/p>\n

\"Kuidas<\/a><\/p>\n

Seej\u00e4rel n\u00e4ete valikut lisada kogu CSS.<\/p>\n

\"Kuidas<\/a><\/p>\n

Kuigi see valik v\u00f5ib j\u00f5udlust parandada, v\u00f5ib lehedokumendile liiga palju CSS-i lisatud aeglustada teie saiti. V\u00f5ib-olla tasub katsetada.<\/p>\n

Vastasel juhul on m\u00f5istlik lubada selle asemel sisseehitatud ja CSS-i edasil\u00fckkamine. See l\u00fckkab k\u00f5ik laaditabelid edasi ja lisab ainult kriitilise CSS-i. Siiski ei leia see automaatselt teie jaoks olulist CSS-i, nagu WP Rocket.<\/p>\n

Niisiis, kuidas saate oma saidi kriitilise CSS-i hankida? Isegi kogenud WP-arendaja jaoks v\u00f5ib see olla omamoodi peamurdja.<\/p>\n

Kuigi ma ei ole selle t\u00f6\u00f6riista t\u00f6\u00f6kindluse osas ise testinud, oleks see tasuta kriitilise tee CSS-i generaatori<\/a> t\u00f6\u00f6riist eluj\u00f5uline l\u00e4henemisviis. Sisestage oma saidi URL ja see tagastab CSS-i, mille peate kindlasti laadima.<\/p>\n

Seej\u00e4rel saate selle koodi kopeerida ja kleepida automaatse optimeerimise CSS-i kriitilise tee kasti.<\/p>\n

\"Kuidas<\/a><\/p>\n

Selle l\u00e4henemisviisi kasutamisel peate v\u00f5ib-olla lisama oma saidi erinevatele lehtedele t\u00e4iendava CSS-i ja \u00fchtse stiili tagamiseks peate v\u00f5ib-olla v\u00e4ga h\u00e4sti tundma oma teema CSS-i.<\/p>\n

Teine l\u00e4henemine<\/h3>\n

Seal on pistikprogramm nimega Autoptimizekritikacss.com power-up<\/a>. See on \u00fcsna suut\u00e4ie, kuid see lisaplugin v\u00f5imaldab teil automaatselt genereerida saidi kriitiline CSS kasutades criticalcss.com<\/a> teenust.<\/p>\n

Selle valiku kasutamiseks peate tasulise konto jaoks registreeruma CriticalCSS-iga.<\/p>\n

3 Kiirustage<\/h2>\n

See viimane valik on v\u00e4ga kiire ja WordPressi arendajal on seda lihtne rakendada.<\/p>\n

Speed \u200b\u200bUp<\/a> on kerge pistikprogramm, mis v\u00f5imaldab teil mittekriitilisi laaditabeleid edasi l\u00fckata.<\/p>\n

\"Kuidas<\/a><\/p>\n

Kuigi see ei optimeeri teie CSS-i edastamist t\u00e4ielikult, aitab see siiski.<\/p>\n

Oletame, et teie teema lisab \u00fche laaditabeli ja seej\u00e4rel on pistikprogrammide poolt lisatud veel viis laaditabelit. Kui enne saidi kuvamist on oluline laadida ainult teemalaaditabel, v\u00f5ite \u00fclej\u00e4\u00e4nud viis edasi l\u00fckata.<\/p>\n

Speed \u200b\u200bUp pakub lihtsat filtrit, mille saate lisada alamteema failile functions.php (v\u00f5i pistikprogrammile), et soovitud stiilitabelid edasi l\u00fckata. K\u00f5ik, mida vajate, on iga laaditava laaditabeli k\u00e4epidemed. Siit leiate m\u00f5ned lihtsad funktsioonid<\/a> k\u00f5igi teie saidil registreeritud stiilitabelite k\u00e4epidemete v\u00e4ljastamiseks.<\/p>\n

J\u00e4llegi on see arendaja jaoks kiire ja lihtne, kuid ma ei soovita seda lahendust, kui te koodi ei kirjuta.<\/p>\n

J\u00e4reldus<\/h2>\n

Loodan, et \u00f5ppisite sellest postitusest midagi WordPressi j\u00f5udluse optimeerimise<\/a> kohta.<\/p>\n

Kuigi k\u00f5ik kolm \u00fclaltoodud lahendust v\u00f5ivad h\u00e4sti toimida, pean ma WP Rocketi pistikprogrammile<\/a> viimase h\u00fc\u00fcdlause andma. Nii ajaveebi kui ka WordPressi teema arendajana on minu arvates nii lihtne ja valutu t\u00f6\u00f6tada.<\/p>\n

Kui soovite oma saidi kiirendamiseks veel n\u00e4pun\u00e4iteid, v\u00f5ib teile meeldida see pildi optimeerimise juhend<\/a> v\u00f5i minu WP Engine \u00fclevaade,<\/a> millele Compete Themes tugineb kiirete laadimisaegade jaoks.<\/p>\n

: www.competethemes.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Siit saate teada, kuidas CSS-i edastamise optimeerimiseks oma WordPressi saiti kiirendada, kasutades \u00fchte neist kolmest l\u00e4henemisviisist. Algajatele ja edasij\u00f5udnutele n\u00e4pun\u00e4iteid sees.<\/p>\n","protected":false},"author":1,"featured_media":256898,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[651,662,582,609],"tags":[842],"class_list":["post-237127","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kuidas-teha","category-vabakutseline","category-wordpressi-kiirendamine","category-uncategorized-5","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts\/237127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/comments?post=237127"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts\/237127\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/media\/256898"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/media?parent=237127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/categories?post=237127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/tags?post=237127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}