Gusto mo bang pabilisin ang iyong WordPress site? Gustong malaman ang mga trick sa optimization ng WordPress na makakatulong sa iyo na bawasan ang oras ng pag-load ng iyong site? Sa artikulong ito, ipapakita namin sa iyo kung paano mapabilis ang WordPress sa pamamagitan ng pagbabahagi kung paano namin na-optimize ang aming List25 site upang mapalakas ang pagganap.
Marahil narinig mo ang bilis ng WordPress ay mahalaga para sa SEO. Ang mas mabilis na site ay may mas mahusay na pakikipag-ugnayan ng user, higit pang mga pageview, at mas mahusay na mga benta. Sa isang pag-aaral sa kaso ng strangeloop, napag-alaman nila na ang isang pagkaantala sa isang segundo ay maaaring magdulot sa iyo ng 7% ng mga benta, 11% na mas kaunting mga pageview, at 16% na pagbawas sa kasiyahan ng customer.
Kaya paano mo talaga pinapabilis ang WordPress?
Sa halip na sa pagbabahagi lamang ng isang listahan ng mga tip sa bilis, nagpasya kaming gumawa ng isang buong case-study upang ipakita sa iyo ang mga resulta mula sa aming site List25 kasama ang kung paano namin nagawa ang lahat ng ito.
Pangkalahatang-ideya
List25 ay isang entertainment blog na sinimulan ng aming founder na si Syed Balkhi. Ang site ay may higit sa 1.5 milyong mga tagasuskribi, at ang channel ng YouTube ay may higit sa isang kuwarter BILYON mga tanawin.
Ang nilalaman sa site ay halos lahat ng mga imahe at mga video na tumatagal ng mga terabytes ng bandwidth, kaya pangkalahatang bilis optimization ay mahalaga para sa amin upang panatilihin ang mga gastos down, bawasan ang pag-abanduna ng pahina at pagbutihin ang oras sa site.
Bago namin sinimulan ang pag-optimize, ang aming homepage ay umabot ng 2.21 segundo upang i-load ayon sa Pingdom. Pagkatapos naming magawa, ang oras ng pag-load ng aming pahina ay bumaba sa 1.21 segundo (~ 45% mas mabilis) .
Sa panahon ng pag-optimize na ito, napabilis namin ang oras ng tugon ng aming server, pinabuting ang aming iskor sa pagganap ng pahina, bawasan ang bilang ng kabuuang kahilingan, at pagbutihin ang pangkalahatang oras ng pag-load.
Tingnan natin ang mga diskarte sa pag-optimize na nakatulong sa amin upang pabilisin ang aming WordPress site.
WordPress Hosting
Ang pagkakaroon ng isang mahusay na web host ay napakahalaga para sa bilis ng iyong website. Tulad ng naging mas popular sa aming site, binawi namin ang aming dating hosting company (HostGator).
Ang kanilang mga server ay hindi maaaring hawakan ang isang site ng ganitong laki dahil ang List25 ay nakakatanggap ng sampu-sampung milyong mga pageview. Ang HostGator ay mahusay para sa mas maliliit na mga site, ngunit hindi para sa isang bagay ng magnitude na ito.
Tiningnan namin ang iba’t-ibang pinamamahalaang mga pagpipilian sa pag-host ng WordPress, at sa huli ay natapos ang paggamit ng SiteGround para sa pagho-host ng List25 dahil inaalok nila ang pinakamahusay na kabuuang halaga para sa site na ito.
Maaari mong makita ang pagpapabuti sa oras ng tugon ng aming server kaagad. Nagpunta kami mula sa max 442ms hanggang 172ms oras ng pagtugon. Iyon ay isang 256% na pagpapabuti.
Ang Siteground ay nagtayo ng boosters ng pagganap para sa mga tiyak na platform tulad ng WordPress, Joomla, at Magento. Batay sa platform ng iyong site, lalo nilang i-optimize ang iyong mga server na nagreresulta sa isang mas mahusay na pangkalahatang pagganap.
Sumulat kami ng isang artikulo tungkol sa kung kailan dapat mong ilipat ang iyong web hosting na nagsasalita tungkol sa 7 key tagapagpahiwatig.
lugar
Caching Plugin
Pagdating sa pagpapabilis sa WordPress, ang pag-cache ay ang ikalawang pinakamahalagang salik pagkatapos ng iyong web hosting.
Karaniwan kapag dumalaw ang isang bisita sa iyong WordPress site, ang iyong server ay ipinapasa ang kahilingan ng PHP sa MySQL Database na hahanapin ang pahina na hinihiling, lumilikha ito sa mabilisang, at ipakita ito sa bisita. Ito ay tumatagal ng maraming mapagkukunan. Kapag mayroon kang pag-cache, nakakatipid ito ng oras at mga mapagkukunan.
Itinatampok ng diagram sa ibaba ang proseso. Sa mga tuntunin ng karaniwang tao, isipin ang pag-cache bilang paglikha ng isang desktop shortcut na tumutulong sa iyo na makuha ang file nang mas mabilis.
Para sa site List25, ginagamit namin ang SiteGround SuperCacher, isang plugin na kanilang espesyal na binuo para sa kanilang mga customer. Higit sa na, nagdagdag sila ng mga advanced na dynamic na pagpipilian sa pag-cache gamit ang Varnish (bahagi ng kanilang tagasunod ng pagganap).
Kung wala ka sa Siteground, huwag mag-alala. Maaari mong i-setup ang cache sa iyong WordPress site sa pamamagitan ng paggamit ng isa sa maraming magagamit na mga solusyon tulad ng W3 Kabuuang Cache o WP Super Cache.
gumagamit kami ng W3 Total Cache na nagbibigay ng isang bilang ng mga pagpipilian sa pag-cache ng pahina, pag-cache ng database at pag-cache ng bagay.
Tulad ng higit pang mga hosting kumpanya ay espesyalista para sa WordPress, makikita namin ang higit pang mga pasadyang mga solusyon sa pag-cache na binuo. Ang Pagect at WPEngine ay nag-aalok din ng kanilang sariling built-in na sistema ng pag-cache.
CDN
Ang Mga Network ng Nilalaman ng Paghahatid (CDN) ay maaaring makatulong sa iyo na mapalakas ang bilis ng iyong website. Ginagamit namin ang MaxCDN mula noong simula ng List25, kaya ang bahaging ito ay hindi nagbago.
Sumulat kami ng isang buong artikulo sa kung ano ang isang CDN at kung bakit kailangan mo ito kasama ang isang infographic.
Hinahayaan kami ng CDN na ihatid ang lahat ng CSS, Javascript at mga imahe mula sa isang Network ng Paghatid ng Nilalaman. Gumagana ito sa pamamagitan ng pagtukoy sa lokasyon ng bisita ng site, at paghahatid ng nilalaman mula sa isang server na pinakamalapit sa bisita.
Kung wala ka sa merkado para sa isang premium na solusyon CDN, maaari mong gamitin ang Cloudflare.
Pinagsasama ang Mga File upang Bawasan ang Mga Kahilingan sa HTTP
Habang nagdaragdag ka ng higit pang mga plugin, kadalasan ay nagdaragdag sila ng kanilang sariling mga JavaScript at CSS file. Ang bawat karagdagang file ay isang bagong kahilingan ng HTTP.
Pinagsama namin ang mga JavaScript at CSS na mga file sa isang solong file para sa bawat isa upang mabawasan ang mga kahilingan at pabilisin ang oras ng pag-load. Makakakita ka ng higit pang mga detalye tungkol sa kung paano naaapektuhan ng mga plugin ng WordPress ang oras ng pag-load.
Habang kami ay kasalukuyang naglo-load ng ilang maliliit na pag-andar na maaaring hindi namin kailangan sa isang partikular na seksyon ng site, ang code na ito ay naka-cache sa CDN, at ang mga resulta ay nagpapakita na ang mas kaunting mga kahilingan para sa mga file ay nagbibigay ng mas mahusay na pagganap kaysa sa paglo-load ng ilang mas maliliit na JS file.
Ito ay isang bagay na dapat mong gawin sa isang regular na batayan dahil ang mga plugin na iyong ginagamit ay nagbago ng overtime.
Mga Larawan ng Sprite
Ginawa namin ang paggamit ng isang larawan engkanto na isinama ang ilang mga social at mga icon ng site sa isang solong imahe:
Sa tuwing kailangan namin upang ipakita ang isang partikular na icon, gagamitin namin ang CSS sa:
- I-load ang imahe bilang isang larawan sa background
- Tukuyin ang lapad at taas ng elemento na kailangan namin ang icon para sa
- Itakda ang posisyon ng background para sa aming larawan upang i-load ang kinakailangang icon
Halimbawa, upang i-load ang mga icon ng social media sa sidebar, ginagamit namin ang:
li.widget_social_icons ul li {float: left; lapad: 36px; taas: 36px; margin: 0 10px 10px 0; padding: 0; background: url (../ images / sprite.png) no-repeat; }
li.widget_social_icons ul li.twitter {background-position: 0 -50px; }
li.widget_social_icons ul li.facebook {background-position: -36px -50px; }
li.widget_social_icons ul li.pinterest {background-position: -72px -50px; }
li.widget_social_icons ul li.google {background-position: -108px -50px; }
li.widget_social_icons ul li.rss {background-position: -144px -50px; }
li.widget_social_icons ul li.youtube {background-position: -180px -50px; }
Ang background-position , lapad at taas Tinutulungan kami ng mga katangian ng CSS na i-target ang tukoy na seksyon ng larawan na gusto naming i-output:
Bilang resulta, tanging ang unang kahilingan para sa file na ito ng imahe ay gumagamit ng bandwidth. Ang mga kasunod na kahilingan sa CDN para sa imahe ay magreresulta sa naka-cache na (karaniwang lokal) na bersyon na na-load, pati na rin ang kailangan upang humiling ng isang imahe kumpara sa 6 na magkakaibang mga social icon.
Sa pamamagitan ng pagsasama-sama ng JavaScript, CSS at mga imahe, binawasan namin ang bilang ng mga kahilingan nang malaki.
Code Minification
Ang pagsasama ng code ay nagsasangkot ng pag-alis ng mga whitespace at break ng linya upang mabawasan ang sukat ng file na ginagawa itong mas mabilis upang mai-load kapag hiniling.
Para sa List25, gumagamit kami ng SCSS, isang stylesheet na nakabatay sa syntax (Intro to Sass). Ito ay nagpapahintulot sa amin na buuin ang aming mga file na CSS sa maraming mga lugar ng pag-unlad sa madaling basahin ang layout:
Ginagamit namin ang CodeKit upang isama ang mga SCSS file sa isang solong CSS file. Inaalis din ng CodeKit ang mga whitespace at break ng linya upang matiyak na ang file ay maliit hangga’t maaari:
Bilang resulta, nabawasan namin ang aming laki ng CSS file sa pamamagitan ng 28%.
Pag-optimize ng Larawan
Pinag-optimize namin ang aming mga imahe sa dalawang lugar: aming WordPress tema at na-upload na nilalaman.
Para sa aming WordPress tema, ginamit namin CodeKit upang matiyak na ang lahat ng mga imahe ay losslessly naka-compress. Tinitiyak nito na ang mga sukat ng file ay mas maliit hangga’t maaari, nang walang pagkawala ng kalidad.
Din namin na-aralan ang lahat ng aming mga manunulat tungkol sa kahalagahan ng pag-save ng mga imahe na-optimize para sa web.
Javascript-free Social Sharing
Ang pagbabahagi ng social para sa List25 ay talagang mahalaga tulad ng anumang ibang website. Gayunpaman, ang mga social sharing plugin ay maaaring makapagpabagal sa iyong site.
Habang ang pagsasama ng apat na mga script ng social network ay hindi nakakaapekto sa oras ng pagkarga ng pahina sa aming mga pagsusulit, nakikitang pinabagal nito ang web site kapag tinitingnan sa isang mobile device. Ang mga pindutan ng pagbabahagi ng social ay aabutin ng ilang segundo upang lumitaw, sa kabila ng mga script na naglo-load nang asynchronously, na nagreresulta sa nilalaman ng post na gumagalaw sa paligid habang ang mga pindutan ay na-load sa pagtingin.
Upang matugunan ang problemang ito, lumipat kami sa isang (halos) Javascript-free na solusyon. Ang bawat isa sa mga pindutan sa pagbabahagi ng social network ay nai-render ng aming pasadyang WordPress Plugin, at ang Javascript ng tema ay ginagamit lamang upang buksan ang window ng web browser kapag nag-click ang gumagamit ng isang pindutan.
Gayunpaman, gusto pa rin naming ipakita ang kabuuang bilang ng pagbabahagi ng isang post sa lahat ng mga social network. Upang magawa ito, gumawa kami ng isang maliit na pasadyang Plugin ng WordPress upang kunin at i-cache ang mga bilang ng social share mula sa bawat social network papunta sa Post meta table. Ang mga bilang na ito ay ina-update tuwing 24 na oras, na tinitiyak na ang mga query sa pag-ubos ng oras ay hindi patuloy na tumatakbo.
Maaari mong gamitin ang isang API tulad ng Sharre o mag-dissect ang Floating Social Bar para sa pagpapasadya.
Gamit ang RUM ng Pingdom (Real User Monitoring), ang bagong share plugin na ito ay bumaba sa oras ng pag-load ng ‘totoo’ mula sa 6 segundo hanggang sa mahigit sa 2 segundo. Tinitiyak din nito na binawasan namin ang bilang ng mga kahilingan na ginawa para sa mga script ng third party.
Resulta
Napansin namin nang malaki ang bilis ng aming site. Ang oras ng pag-load ay nagpunta mula sa 2.2 segundo hanggang 1.22 segundo.
Nakuha namin ang aming oras ng tugon ng server nang malaki.
Nakatulong ito na bawasan ang oras na ginugol sa pag-download ng isang pahina ng Google bot na nakatulong sa aming rate ng pag-crawl.
Ang aming kabuuang bounce rate ay bumaba ng 7% dahil ang site ay mas mabilis na naglo-load, at sa pamamagitan ng paglipat ng mga nagho-host na nagawa naming mabawasan ang mga error sa server.
Tulad ng maaari mong isipin na may mas mababang rate ng bounce, ang oras na ginugol sa site ay umakyat din ng higit sa 30 segundo.
Konklusyon
Tulad ng makikita mo ang isang mas mabilis na paglo-load ng web site ay maaaring mapabuti ang pakikipag-ugnayan ng bisita. Ang mga diskarte na aming tinalakay ay sakop ng isang hanay ng mga basic at intermediate na pagpapabuti na maaari mong ipatupad upang ma-optimize ang iyong WordPress site.
Umaasa kami na nakatulong ang artikulong ito na pabilisin ang iyong WordPress site. Maaari mo ring nais na tingnan ang aming artikulo tungkol sa 20 ay dapat may WordPress plugins para sa 2015.