Lazy Load Social Buttons kasama ang Socialite.js

bilis ng keyboard

Ngayon ay nagkaroon ako ng isang kamangha-manghang araw kasama ang web team sa Angie's List. Ang Lista ni Angie ay binubuo ang kanilang site sa isang hindi kapani-paniwala na library ng mapagkukunan ... at sa lahat ng panahon ay nagpatuloy silang mapabilis ang kanilang site. Naglo-load ang kanilang mga pahina sa bilis ng pagkabulag. Kung hindi ka naniniwala sa akin, i-pop up ang pahinang ito Mga Pintuan ng Garahe.

Ang pahina ay nagsasama ng mga imahe, video, at mga social button ... at naglo-load pa rin sa milliseconds. Ang paghahambing sa kanilang site sa minahan ay tulad ng karera ng isang Prius na may F-16. Hindi pa sila tapos, alinman, palaging naghahanap ng mga paraan upang mapagbuti ang karanasan ng customer at makuha ang nilalaman na maibahagi at maibahagi.

Wala kaming isang buong-panahong koponan sa pag-unlad o ang mga mapagkukunan ng isang pampublikong kumpanya, kaya ang aming pag-unlad ay medyo mas mabagal kaysa sa Listahan ni Angie. Mayroon kaming hindi kapani-paniwala na host bolante - Paggamit ng kanilang advanced na pag-cache at CDN, ngunit alam namin na may ilang mga bagay pa rin na nasasaktan tayo. Halimbawa, ang aming mga imahe ay hindi na-optimize. Mayroong mga serbisyo doon na maaari mong i-convert ang iyong mga imahe sa isang maliit na bahagi ng kanilang laki habang pinapanatili ang kanilang kalinawan ... tinitingnan namin sila.

Habang ipinapakita ko sa kanila ang aming site, napaurong ako at isinabit ang aking ulo habang nanigas ang pahina sa paglo-load ng isang social button. Sa tingin ko ito ay Facebook. Argh ... isang segundo o dalawa mamaya lumitaw ang pindutan at na-load ang natitirang pahina. Ugh

Nang inilarawan ko ang isyu, agad na may solusyon ang kanilang engineer, sosyalidad.js. Nagbibigay ang Socialite ng isang napakadaling paraan upang ipatupad at buhayin ang isang kalabisan ng mga pindutan sa pagbabahagi ng lipunan - anumang oras na nais mo. Sa pag-load ng dokumento, sa pag-hover ng artikulo, sa anumang kaganapan! Dahil ang socialite ay naglo-load ng mga pindutan nang hindi magkakasabay, ang dokumento ay hindi mag-hang habang naghihintay para sa 50kb ng social media.

Sa kabutihang palad, mayroon nang isang WordPress plugin na isinasama ang Socialite, tinawag WPSocialite. Ngayong gabi ay natanggal ko ang lahat ng aking na-customize na code para sa paglo-load ng mga pindutan at ipinatupad ang WPSocialite. Nagawa kong ipasadya ang CSS at mabago ang mga pindutan na gusto ko. Inaasahan ko ang ilang karagdagang mga pindutan na idinagdag sa hinaharap - tulad ng Buffer o Reddit ... ngunit ito ay perpekto para sa ngayon!

Ano sa tingin ninyo?

Ang site na ito ay gumagamit ng Akismet upang mabawasan ang spam. Alamin kung paano naproseso ang data ng iyong komento.