Sveiki, mieli tinklaraščio svetainės skaitytojai. Šiandien noriu sulaužyti tradiciją (rašyti tolygiai visuose skyriuose) ir atkreipti jūsų dėmesį į antrąją straipsnio dalį apie.

Faktas yra tas, kad daug lengviau rašyti, kaip sakoma, persekiojant, o vėliau neprisiminti: „kaip aš sugebėjau tai padaryti?“, o tai gali būti gana sunku, ypač praėjus tam tikram laikui.

Pabandykime toliau didinti greitį naudodami tokį įrankį kaip „Page Speed“, kuris yra įdiegtas kaip „Mazilla“ arba „Chrome“ priedas. Iš principo tikriausiai veltui ankstesniame straipsnyje sakiau, kad pats šis įskiepis nieko negali pagreitinti jūsų projekto, o tik pateikia rekomendacijas, į ką konkrečiai pirmiausia turėtumėte atkreipti dėmesį. Pasirodo, jis pats gali būti kažkam geras.

Paskutiniame straipsnyje mes išsamiai apžvelgėme, kaip įdiegti puslapio greičio įskiepį ir kaip optimaliai sukonfigūruoti statinių objektų (vaizdų, scenarijų, stilių) talpyklą vartotojų naršyklėse.

Po to, kai sukonfigūravome žiniatinklio serverį, šis įskiepis nebeskundžiasi smarkiai sumažėjusiu greičiu dėl „Panaudoti naršyklės talpyklą“:

Iš esmės „Paige Speed“ nurodo, kad beveik visi stiliaus failai, kurie įkeliami į lankytojo naršyklę kartu su mano tinklaraščio tinklalapiu, gali būti žymiai optimizuoti (suspausti), kad būtų sumažintas jų svoris.

Jei paspausite pliuso ženklą šalia „Sumažinti CSS“, atsidarys objektų, kuriuos būtų pageidautina optimizuoti (suspausti), sąrašas:

Bet puiku yra tai, kad visą optimizavimo (glaudinimo) darbą atliks pats įskiepis. Atidžiai pažiūrėkite, eilutės su kiekvieno neoptimizuoto stiliaus failo pavadinimu jos lange pabaigoje būsite paprašyti peržiūrėti optimizuotą (suglaudintą) versiją ir, jei norite, atsisiųskite be šiukšlių kaskadinio stiliaus failą. lakštų, kurie leis, nors ir šiek tiek, padidinti pakrovimo greitį svetainėje.

Optimizavimas susideda iš visų nereikalingų tarpų ir komentarų pašalinimo iš jų, kurie niekaip neįtakoja Jūsų resurso veikimo, tačiau savo, nors ir nedideliu, bet vis tiek papildomu svoriu lėtina jo krovimąsi.

Pavyzdžiui, mano neoptimizuotas style.css, kuris buvo su WordPress tema, susideda iš beveik 2000 eilučių, o po optimizavimo sugebėjau sumažinti eilučių skaičių iki 400, o pats failas prarado penktadalį savo originalus svoris. Ir po to man daug labiau patinka jame užrašytų savybių išvaizda.

Spręskite patys, taip atrodė, kol man nepavyko suspausti puslapio greičio:

Ir štai kaip atrodo po optimizavimo:

Taigi, norėdami tai padaryti, turėsite atsisiųsti tik suspaustą versiją iš nuorodos „Išsaugoti kaip“. Ar atsisiuntėte?

Dabar prisijunkite per FTP, eikite į aplanką, kuriame turite originalų stiliaus lapo failą (žr. kelią Puslapio greičio lange) ir pakeiskite seną nesuspaustą nauju (tuo, kuris buvo optimizuotas jums), o ne pamiršus suteikti jam tokį patį pavadinimą kaip ir originalus, kitaip kaskadiniai stiliaus lapai neveiks. Tai viskas, mėgaukitės tomis milisekundėmis, kuriomis paspartėjo jūsų svetainės įkėlimas.

Tačiau be pagrindinio CSS failo, kuris paprastai pateikiamas kartu su jūsų naudojama tema, puslapio greičio lange taip pat galite matyti tuos stiliaus failus, kuriuos naudoja „WordPress“ (ar bet kurio kito variklio) įskiepiai ir plėtiniai. tu naudoji). Iš esmės galite juos suspausti taip pat, kaip aptarta aukščiau.

Tačiau geriausias variantas būtų sujungti visą išorinį CSS į vieną ir tik tada suspausti naudojant Page Speed. Tai būtų idealus pasirinkimas norint sutaupyti dar kelias milisekundes atsisiuntimo greičiui. Tiesą sakant, pats papildinys siūlo būtent tokią parinktį lauke „Sujungti išorinį CSS“:

Čia jis mums siūlo visus jo rastus išorinius failus (išorinius scenarijus galima sujungti ir į vieną - „Sujungti išorinį JavaScript“), įkeltus į lankytojų naršyklę, į vieną bendrą, bet tokiu atveju tai bus būtina išjungti visus nereikalingus stiliaus failus. Problema kyla dėl to, kad daugelis jų kuria ir prijungia prie jūsų variklio papildinius ar kitus plėtinius.

Žinoma, galite pereiti į papildinio kodą ir iš ten išjungti stilius, bet jei atnaujinsite šį plėtinį, gali tekti dar kartą įsigilinti į papildinio vidų, kad jį vėl išjungtumėte. „WordPress“ yra būdas išspręsti šią problemą centralizuotai per tą, kurį žinote, kuris turėtų būti aplanke su jūsų naudojama tema:

/wp-content/themes/WordPress temos pavadinimas/functions.php

Jei nerandate functions.php, galite jį tiesiog sukurti, pavyzdžiui, Notepad++ redaktoriuje ir įkelti į WordPress temos aplanką. Bet, žinoma, jis vis tiek bus rastas. Turėsite pridėti nedidelę PHP kodo dalį, maždaug taip:

Add_action("wp_print_styles", "my_deregister_styles", 100); function my_deregister_styles() ( wp_deregister_style("google-ajax-translation"); wp_deregister_style("syntaxhighlighter-theme-default"); wp_deregister_style("syntaxhighlighter-core") q" ;))

Tai darydami išregistruojame kai kurių „WordPress“ papildinių dizaino stilius. Dėl to atskiri šių papildinių CSS failai nebus įkeliami į lankytojų naršykles.

Ir net jei atnaujinsite bet kurį iš jų, niekas nepasikeis ir jums nereikės dar kartą naršyti jų kodo. Na, nes... Jie atnaujinami gana dažnai, tada su šiuo gudriu išjungimo būdu sutaupysime savo laiką ir nervus.

Atrodo, kad viskas paprasta - išjunkite ir viskas, galite apie tai pamiršti. Taip, bet ne taip. Pirma, kiekvieno WP įskiepio kode (kuriame išjungiame stilių įkėlimą) vis tiek reikia rasti registrą, atsakingą už jų prijungimą.

Jei atidžiau pažvelgsite į aukščiau pateiktą kodą, pastebėsite eilutes, kuriose išvardyti tie patys registrai:

Wp_deregister_style("google-ajax-translation"); wp_deregister_style("syntaxhighlighter-theme-default"); wp_deregister_style("syntaxhighlighter-core"); wp_deregister_style("wp-pagenavi"); wp_deregister_style("cfq");

Tai yra, pavyzdžiui, nuostabaus „WordPress“ papildinio registras bus vadinamas „wp-pagenavi“, o komentarų formos „Quicktags“ papildinys - „cfq“. Jei naudojate tuos pačius plėtinius kaip aš, tuomet negalite įsigilinti į jų PHP kodą, o pasiskolinti registrus iš nurodyto kodo.

Tačiau išjungus visus papildinius, kurių stiliaus failai yra išjungti, turite nepamiršti nukopijuoti viso šių išjungtų CSS turinio, kad būtų galima sujungti į bendrą failą iš aplanko su tema (mano vadinamas style.css). Matau, tiesa?

Jūs tikriausiai suprantate, apie ką mes kalbame. Pavyzdžiui, tokia CSS nuosavybė galėtų atrodyti taip:

Translate_links .translate_flag(background:url(flags.png) ne-kartojimas;border:0;margin:0;padding:0;)

Įrašas url(flags.png) reiškia, kad paveikslėlio, pavadinto flags.png, reikės ieškoti tame pačiame aplanke, kuriame yra pats pakopinio stiliaus lapo failas. Tačiau faktas yra tas, kad kai nukopijuosite visų įskiepių stilių turinį, jie tikriausiai naudos tokius santykinius kelius į vaizdus.

Ir tai lems tai, kad „WordPress“ negalės rasti reikiamų vaizdų nurodytu santykiniu keliu. Juk jie vis tiek lieka įskiepių aplankuose. Todėl, derinant CSS, būtina pakeisti santykinius fono vaizdų kelius absoliučiais keliais, kurie atrodo maždaug taip:

Kai tai padarysite, visi fono vaizdai, kuriuos naudoja papildiniai, kurių stilius išjungėte, grįš į savo vietas. Taigi, manau, jūs galite tai susitvarkyti.

Beje, kai turėsite visą stiliaus kodą viename bendrame faile, nepamirškite jo dar kartą suspausti naudodami „Page Speed“, jo lange surasdami eilutę „Minify CSS“ ir spustelėdami pliuso ženklą šalia šio užrašo ir nukopijuodami optimizuotą failą „Išsaugoti kaip“. Tada pakeiskite pradinį failą aplanke su naudojama „WordPress“ tema.

Dabar naudokime konkretų pavyzdį, kad parodytume, kur reikia ieškoti „WordPress“ papildinio registro pavadinimo, leidžiančio išjungti jo stiliaus įkėlimą. Tiesą sakant, norėdami rasti reikiamą registrą, mums reikės failo su PHP plėtiniu iš aplanko su šiuo papildiniu. Apskritai jie visi gyvena tame pačiame aplanke:

/wp-content/plugins

Todėl čia turėtumėte ieškoti norimo katalogo. Pažiūrėkime į SyntaxHighlighter Evolved kaip pavyzdį, nes... jis turi gana neįprastą situaciją, nes naudoja kelis stiliaus failus, priklausomai nuo to, kokias dizaino parinktis pasirinkote šio papildinio nustatymuose.

Kaip matote, pasirinkau rodinį, kuris buvo antroje įskiepio versijoje, ir naudojama numatytoji SyntaxHighlighter spalvų schema. Dabar turėsiu eiti į jo aplanką, prisijungdamas prie tinklaraščio per FTP:

/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/styles

nukopijuokite dviejų CSS failų, kuriuos planuojame išjungti: shCore.css ir shThemeDefault.css turinį, nes Būtent į tai pirštu rodo „Page Speed“ (na, nustatymuose pasirinkau numatytąją temą, kuriai, visai logiška, reikia CSS su atitinkamu pavadinimu).

Po to atidarykite redaguoti:

/wp-content/plugins/syntaxhighlighter/syntaxhighlighter.php

Tada ieškok ir skaityk. Turite ieškoti visko, kuriame yra „CSS“. Syntaxhighlighter.php tai bus kodo dalis:

// Užregistruoti temų stilių lapus wp_register_style("syntaxhighlighter-core", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shCore.css"), array(), $this->agshver); wp_register_style("syntaxhighlighter-theme-default", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeDefault.css"), array("syntaxhighlighter-core"), $this->agshver); wp_register_style("syntaxhighlighter-theme-django", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeDjango.css"), array("syntaxhighlighter-core"), $this->agshver); wp_register_style("syntaxhighlighter-theme-eclipse", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeEclipse.css"), array("syntaxhighlighter-core"), $this->agshver); wp_register_style("syntaxhighlighter-theme-emacs", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeEmacs.css"), array("syntaxhighlighter-core"), $this->agshver); wp_register_style("syntaxhighlighter-theme-fadetogrey", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeFadeToGrey.css"), array("syntaxhighlighter-core"),sh $this); wp_register_style("syntaxhighlighter-theme-midnight", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeMidnight.css"), array("syntaxhighlighter-core"), $this->agshver); wp_register_style("syntaxhighlighter-theme-rdark", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeRDark.css"), array("syntaxhighlighter-core"), $this->agshver);

Pažiūrėkime, kurie registrai leis išjungti stilių shCore.css ir shThemeDefault.css įkėlimą. Nukopijuojame jų pavadinimus (mano atveju tai bus: syntaxhighlighter-theme-default ir syntaxhighlighter-core) ir prie funkcijos.php (iš aplanko su jūsų tema) pridedame dvi papildomas eilutes prie aukščiau aprašyto kodo:

Wp_deregister_style("sintaksės paryškinimo-temos-numatytasis"); wp_deregister_style("syntaxhighlighter-core");

Ir pakartokite tai kiekvienam „WordPress“ papildiniui, kurio įkėlimo stilius planuojate išjungti. Tikiuosi, kad jums viskas tapo aišku ir suprantama. Jei ne, tai pabandyk dar kartą perskaityti, nes tema perprasta ne per paprasta, nors stengiuosi be reikalo neapsunkinti ir neapkrauti teksto (kam reikia detalių, nes kuo paprasčiau tuo geriau).

Dėl visų atliktų manipuliacijų turėsite visą eilučių sąrašą functions.php su įskiepių registrais, kurių stilius reikia išjungti. Ir viename įprastame CSS faile iš aplanko su tema bus visas jūsų svetainės stiliaus kodas. Dar kartą priminsiu – nepamirškite suspausti arba, kitaip tariant, optimizuoti style.css per puslapio greitį aukščiau aprašytu būdu.

Sėkmės tau! Greitai pasimatysime tinklaraščio svetainės puslapiuose

Jums gali būti įdomu

Funkcijos.php failas iš WordPress temos aplanko ir tikri jo naudojimo pavyzdžiai
Kaip maksimaliai padidinti svetainės įkėlimo greitį ir optimizuoti serverio apkrovą Nemokamos temos ir šablonai, skirti „WordPress“ – kur galite juos atsisiųsti
Kaip gauti greitą svetainę - vaizdų ir scenarijų optimizavimas (glaudinimas), taip pat Http užklausų skaičiaus sumažinimas
Kaip rasti ir pašalinti nenaudojamas stiliaus eilutes (papildomus parinkiklius) savo svetainės CSS faile
„WordPress“ temos (šablono) optimizavimas, siekiant sumažinti prieglobos serverio apkrovą, WP Tuner papildinį ir užklausų į duomenų bazę skaičių
CSS sprite kūrimas „Sprites Me“ internetiniame generatoriuje, siekiant sumažinti serveriui siunčiamų užklausų skaičių
„WordPress“ temos – iš kokių šablonų jos susideda ir kaip visa tai veikia
„WordPress“ atminties suvartojimo sumažinimas kuriant puslapius – WPLANG Lite papildinys, skirtas pakeisti lokalizacijos failą
Kaip rašyti straipsnius „WordPress“ – vaizdo ir HTML redaktoriai, antraštės ir raktinių žodžių paryškinimas
Gzip glaudinimas, siekiant pagreitinti svetainės įkėlimą – kaip jį įjungti Js, HTML ir Css naudojant .htaccess failą

HTML, CSS ir JavaScript sujungimas viename faile

Norėdami išvengti papildomų užklausų iš naršyklės, galite tiesiogiai įtraukti stilius ir (arba) scenarijus į patį HTML dokumentą.

Čia verta pasilikti ties šiuo klausimu: jei CSS (arba JavaScript) failo dydis yra didesnis nei 20% (ir tuo pačiu daugiau nei 5 KB suspaustoje formoje), geriau jį pateikti kaip atskirą komponentas. Tai leis jums sukonfigūruoti jos talpyklą įprastiems jūsų svetainės vartotojams.

Turėtumėte apsvarstyti galimybę įtraukti visus išteklius į pradinį HTML puslapį tik tuo atveju, jei pakankamai didelis lankytojų procentas (daugiau nei 90 %) jį aplankė pirmą ir (galbūt) paskutinį kartą. Tuomet ši technologija veiks puikiai: talpyklos talpinimas praktiškai nieko neduos, o papildomos užklausos serveriui sulėtins puslapio įkėlimą naujiems lankytojams, nesusipažinusiems su svetainės specifika (tai gali būti lemiamas veiksnys jų galutiniam pasitraukimui).

Visais kitais atvejais – kai galima skirti pakankamai didelius resursų failus arba kai pakankamai vartotojų ateina ne pirmą kartą – šis metodas netaikomas.

Kaip darbo pavyzdį galime paminėti pagrindinius „Yandex“ ir „Google“ puslapius - jie iškviečia minimalų išorinių išteklių kiekį, o stiliaus taisyklės įtrauktos į patį puslapį.

13 KAMBARYS: Du viename Žmonės yra pasirengę dosniai mokėti už mažas santaupas ir netgi už galimybę sutaupyti. Šį psichologinį niuansą rinkodaros specialistai naudoja jau seniai, o kompiuterių pramonėje galima rasti daugybę to pavyzdžių. Pavyzdžiui, jei prisimenate, pagrindinis

4.1. HTML ir CSS failų užklausų skaičiaus derinimas yra didžiausia puslapio įkėlimo kliūtis. Remiantis naujausiais tyrimais, apie 40% įkrovos laiko praleidžiama vien užmezgant naujus ryšius su serveriu. Atsižvelgiant į tai, bet kokie metodai, kurie sumažina skaičių

4.2. „JavaScript“ failų sujungimas Visi išoriniai „JavaScript“ failai iš svetainės gali būti sujungti į vieną didelį, įkeliamą tik vieną kartą ir visam laikui. Tai labai patogu: naršyklė nepateikia serveriui tūkstančio užklausų, kad būtų rodomas vienas puslapis, o įkėlimo greitis smarkiai padidėja. A

„JavaScript“ ir CSS derinimas viename faile Tačiau yra būdas sujungti CSS su „JavaScript“ ir sumažinti atsisiuntimų skaičių iki vieno. Ši technika pagrįsta tuo, kaip CSS ir JavaScript analizatorius veikia IE ir Firefox. Kai CSS analizatorius susiduria su HTML komentaro simboliu (