Yahoo! inženieri padalās ar lapas ātrdarbības noslēpumiem

Deniss Fedotovs (deni2s), 03.10.2009., 18:42

Atļāvos iztulkot latviski tekstu, kas oriģinālā ir atrodams te:
http://developer.yahoo.net/blog/archives/2009/09/search_performance.html

Ne tikai skaista seja: Ātrdarbība un jaunais Yahoo! Search

22.septembrī mēs atklājām jauno Yahoo! meklēšanas rezultātu lapu, kas ir pielādēta ar plašu jaunu iespēju klāstu. Jūs varat būt pārsteigts uzzinot, ka jaunais dizains patiesībā ir mazliet ātrāks par oriģinālo. Apdomīgi izmantojot mūsdienīgas ātrdarbības tehnikas, mēs ne tikai nepalielinājām lapas kopējo svaru un HTTP pieprasījumu skaitu, bet arī veicām daudzus uzlabojumus lapas ielādes ātrdarbībai. Tagad, kad esat aplūkojuši jauno meklēšanas rezultātu lapu, izskatīsim dažus ātrdarbības uzlabošanas iespējas, kuras mēs izmantojām veidojot jauno veidni.

Koda pārstrāde

Jebkura radikālas dizaina izmaiņa, kā šī, ir lieliska iespēja pārstrādāt kodu, un mēs to izmantojām, pārrakstot Yahoo! Search lapu HTML, CSS un JavaScript no nulles. Ja iedomājamies par veidni kā ietvaru, kas satur "10 zilās saites" lapas centrā, viss kods ap saturu centrā tika pārstrādāts. Tas mums deva iespēju atbrīvoties no veciem koda atlikumiem un izmantot dažas jaunas tehnikas un labāko praksi, samazinot lapas svaru un renderēšanas sarežģītību procesā.

Kā viens ātrs piemērs, par to, kas jauns, mūsu meklēšanas lapa tagad izmanto CSS attēlu pagriešanu. Tā vietā, lai izmantotu dažādus attēlus augšējai un apakšējai bultai mūsu spraitā, mēs izmantojam tikai apakšējo bultu. Lai ģenerētu augšejo bultu lielākajai daļai (izņemot Operu) A-klases pārlūkiem, mēs izmantojam šādu CSS triku:

-moz-trasform: rotate(180deg);
-webkit-transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

Patiesībā tas ieekonomē tikai dažus baitus, taču katrs sīkums skaitās, un šo iestrādāt bija salīdzinoši vienkārši.

Mēs arī izmantojām šoi iespēju uzlabot lapas struktūru un pieejamību. Mēs uzskatam, ka filozofija, ka ir jāveido atsevišķa pieredze pieejamībai, ir maldīga; mēs ticam, ka ir iespējams rakstīt pieejamu kodu nesamazinot ātrdarbību. Būtiskākais uzlabojums jaunajā dizainā ir vienkārši labāka dokumenta struktūras izveidošana, izmantojot <h1>, <h2> un <h3> tagus, kas ļauj ekrānlasītājiem pārvietoties pa lapu daudz vieglāk. Mē arī pievienojām dažas labākas taustiņu kombinācijas, piemēram, ka pirmais spiediens uz tab taustiņa pārvieto pa tiešo uz meklēšanas ievades logu, tā vietā, lai pārvietotu uz navigācijas saitēm, un CTRL-SHIFT DOWN kombinācija ļauj pārlekt pāri galvenei un sānu joslai un fokusēties uz pirmo meklēšanas rezultātu.

Data URI attēli

Jaunais dizains izmanto dažas atkārtojušās krāsu pārejas, kuras izskatās lieliski, taču var būt absolūti ātrdarbības iznīcinātāji. Lai apietu šo problēmu, mēs izmantojām retu iespēju, ko atbalsta visi mūsdienu pārlūki, kas saucas Data URI attēli. Šī tehnika ļauj iekļaut kodētus datus individuāliem attēliem tieši iekš CSS. Šī tehnika ir zināma jau kādu laiku, taču tikai nesen tā ieguva pietiekošu atbalstu, lai to varētu plaši izmantot.

Data URI attēli ļāva mums izvairīties no papildus sprite attēlu smaguma, kas būtu saistīts ar krāsu pāreju attēliem, kas atkārtojas, tajā pašā laikā uzlabojot ātrdarbību, izvairoties no "ielekšanas" efekta, kuru dažreiz iespējams redzēt ar veidņu attēliem. Tradicionālās CSS failā, kas satur atsauces uz ārējiem attēliem, pārlūks ielādē CSS, apstrādā CSS un sāk attēlot lapu. Jebkuras atsauces CSS uz attēliem rada jaunu HTTP pieprasījumu. Atkarībā no pieslēguma ātruma, lapa var būt jau attēlota uz to brīdi, kad attēls ielādējas, kas rada "ielekšanas" efektu, ka pēkšņi lapā "ielec" attēls. Data URI attēli palīdzēja mums pilnībā izvairīties no "ielekšanas" efekta un nozīmīgi samazināt HTTP pieprasījumu skaitu.

Lai saglabātu atpakaļejošu savietojamību, mēs piedāvājam atsevišķu spraita attēlu ar gradācijām priekš IE6 un IE7. Tas nozīmē, ka šo pārlūku ātrdarbība būs mazliet mazāka par mūsdienīgāku pārlūku ātrdarbību, taču kopējais ieguvums vienalga ir tā vērts. Protams, sadalīta koda menedžēšana ir mazliet riskanta. Vairākas mājaslapas dod priekšroku to darīt ar nosacījuma komentāriem vai citām tehnikām. Mūsu gadījumā kopīgā atšķirība patiesībā ir ļoti maza - mūsu izstrādes rīki nosūta vajadzīgos statiskos resursus uz mūsu Satura Sadales Tīklu (CDN), un mūsu frontend nosaka pārlūku un ievieto vajadzīgo CSS failu.

Semantiska lapas padeve

Tā vietā, lai sagaidītu, kamēr serveris ģenerēs lapu pilnībā un tad nosūtītu to visu kopā, mēs nosūtam lapu klientam trīs semantiski nozīmīgās daļās, kas ļauj pārlūkam sākt attēlot lapu un pieprasīt statiskos resursus ātrāk.

Pirmā daļa sastāv no lapas galvenes un meklēšanas ievades loga, un tā tiek nosūtīta pirms mēs pat pieprasam meklēšanas rezultātus no backend. Tas ļauj pārlūkam sākt ielādēt statiskos resursus, kamēr mūsu serveris vēl apstrādā meklēšanas pieprasījumu.
Otrā daļa sastāv no visa redzamā lapas satura un reklāmām, bet ne JavaScript. Tas ļauj lietotājam acumirklī sākt meklēšanas rezultātu skanēšanu un darbības ar tiem, pirms pārlūks vēl ir ielādējis un sācis darbināt jebkuru Javacript kodu.
Pēdējā daļa satur JavaScript, kas pievieno būtisku, bet ne kritisku funkcionalitāti kā Search Assist un Search Pad.

Tīkla efekts ir tāds, ka lietotājs redz lapas ielādi un var ar to darboties daudz ātrāk. Nosūtot pēc iespējas ātrāk pārlūkam informāciju, kas nepieciešama, lai tas varētu ielādēt statiskos komponentus, mēs arī samazinam kopējo ielādes laiku.

Ņemiet vērā, ka vecais dizains arī izmantoja semantisku lapas padevi, bet ne tik agresīvi. Būtiskākā atšķirība ir tā, ka iepriekšējā dizainā pirmajā daļā tika iekļauts tikai kods līdz <head>. Pārstrādājot kā mūsu backend loģika darbojas, mēs varējām pirmajā daļā iekļaut arī daļu no <body> elementa un iekļaut būtiskus vizuālos elementus kā lapas galvene un meklēšanas ievades logu. panākot, ka vizuālais kods sāk nākt pa vadiem, tas rada iespaidu, ka lapa ielādējas, ka "kaut kas notiek".

Slinkā ielāde

JavaScript un CSS, kas tiek izmantots meklēšanas rezultātu attēlošanas lapās tagad ielādējas divās atsevišķās daļās. Pirmā daļa izmanto tikai pašu minimālāko CSS un JavaScript, kas nepieciešams 100% meklēšanas rezultātu lapu attēlošanai, tā ka pamatdarbībām nepieciešamais ielādējas tik ātri, cik vien iespējams. Otrā daļa ielādē papildus (bet smagāku) funkcionalitāti kā Search Assist un Search Pad. Mēs tāpat ielādējam papildus CSS un JavaScript daļas saīsinājumiem un citām dinamiskām iespējām tikai pie nepieciešamības, nodrošinot, ka mēs neizmantojam nelietderīgi laiku ielādējot kodu, kurš mums visdrīzāk nebūs nepieciešams.

Kā meklētājsistēmas mājaslapa mēs nevaram izvairīties no smagās slinkās-ielādes, jo meklēšanas pieredze ir ļoti būtiska lietotāju pieredze tīmeklī. Kad lietotājs pieprasa meklēšanas lapu, parasti viņi skanē un klikšķina ļoti ātri. Ja vien mēs varam nodrošināt šīs pamatdarības pēc iespējas ātrākas, mēs varam atlikt pārējās komponentes uz vēlāku laiku. Ja jūsu mājaslapai ir citādāka lietojamības paradigma, jums vajag būt uzmanīgākiem; jūs nevarat slinki ielādēt komponentus, ar kuriem lietotājs vēlas darboties uzreiz.

Dizaineri un inženieri piekrīt: Ātrdarbība ir būtiskākā!

Iespējams, aiz visiem šeit izklāstītājiem tehniskajiem spriedumiem, visnozīmīgākā ietekme bija mūsu filozofijai, ka ātrdarbība ir visu problēma, visos līmeņos. Mūsu frontend inženieru komanda sāka domāt un plānot ātrdarbību vēl pirms dizaini bija uzskicēti. Tas ļāva mums dot agras atsauksmes mūsu Lietotājpieredzes Dizaina departamentam un strādāt kopīgi ar viņiem, kamēr viņi atslīpēja savus dizainus.

Lapas ātrdarbības optimizēšana Mūsu dizaineri jau bija ņēmuši vērā daudzus ātrdarbības principus, kurus viņi iemācījās gadu gaitā, kā, piemēram, spraitu optimizācija. Tomēr, jaunajā dizainā tiek daudz vairāk izmantotas krāsu pārejas, kā iepriekšējā dizainā, kas var izmaksāt ļoti dārgi - īpaši, ja pārejas tiek izstieptas vertikāli vai horizontāli visas lapas garumā.

Par laimi, mūsu dizaineri laicīgi mums norādīja uz savām bažām, un mums bija iespēja veikt kopīgi prāta vētru, kā izmantot grafiskos komponentus efektīvāk. Pēc tam, kad dizaineri saprata dažas tehnikas, kuras mēs vēlējāmies izmantot un dažus ierobežojumus, tie bija spējīgi piedāvāt dažus absolūti brīnišķīgus dizainus, kas iekļāvās mūsu noteiktajās ātrdarbības robežās. Pēc šīm dažām sapulcēm, katrā dizaina pakāpē mūsu Lietotājpieredzes Dizaina departamenta komanda saskaņoja ar ātrdarbības inženieriem, lai pārliecinātos, ka mēs nepārkāpjam mūsu ātrdarbības mērķus. Šī ciešā sadarbība palīdzēja mums atturēties no uztraukumiem par ātrdarbību.

Citiem vārdiem, jauni triki un ātrdarbības tehnikas tikai noved jūs tik tālu. Pateicoties individuālu dizaineru un inženieru bezgalīgām smaga darba stundām jaunā Yahoo! Search lapa piedāvā lielāku funkcionalitāti un vairāk dizaina komponentes pat ātrākā iepakojumā. Un mēs vēl aizvien smagi strādājam kopā ar mūsu kolēģiem dizaineriem, lai veidotu meklēšanas pieredzi vēl ātrāku un labāku turpmākajās nedēļās un mēnešos. Ja jums ir kādi jautājumi par Yahoo! Search un frontend ātrdarbību, mēs gaidam jūsu atsauksmes!

Ryan Grove
Yahoo! frontend inženieris

Stoyan Stefanov
Yahoo! ātrdarbības inženieris

Venkateswaran Udayasankar
Yahoo! ātrdarbības inženieris