background image

27.6. Êàê îïòèìèçèðîâàòü âðåìÿ çàãðóçêè?

Ñêëåéêà CSS ôàéëîâ  ìîæíî ïðîñòî ñêëåèòü âñå CSS ôàéëû ñòðàíè-

öûäðóã ñ äðóãîì è îòäàâàòü èõ êëèåíòó îäíèì ôàéëîì  îáûêíîâåííî ýòî

äåëàåòñÿ ïðè ïîìîùè îòäåëüíîãî ñêðèïòà. Ñêëåèâàòü CSS ôàéëû äðóã ñ

äðóãîì ìîæíî ïðàêòè÷åñêè áåç âñÿêîãî ðèñêà, ÷òî âû ÷òî-òî ïîëîìàåòå

èëè ñòðàíèöà áóäåò ïîñëå ýòîãî îòîáðàæàòüñÿ íåïðàâèëüíî.

Ñêëåéêà javascript ôàéëîâ  òîæå ñàìîå âåðíî è äëÿ javascript ôàéëîâ,

íî íóæíî áûòü ÷óòü îñòîðîæíåå  ìîãóò ïðîÿâëÿòüñÿ ïîáî÷íûå ýôôåêòû

è êàêèå-òî ñêðèïòû ïåðåñòàþò ðàáîòàòü.

Ñêëåéêà ìåëêèõ êàðòèíîê  äëÿ óñêîðåíèÿ çàãðóçêè ìåëêèõ êàðòè-

íîêïðèìåíÿåòñÿ èíòåðåñíûé ìåòîä. Áðàóçåðû ïîñëåäíèõ ïîêîëåíèé ïîçâî-

ëÿþò ïðè ïîìîùè CSS ïîêàçûâàòü òîëüêî êóñî÷åê êàðòèíêè. Íå âñþ êàð-

òèíêó, à òîëüêî åå ìàëåíüêèé êóñî÷åê.

Ïðåäïîëîæèì, ÷òî ó âàñ íà ñàéòå èñïîëüçóåòñÿ 50 ðàçíûõ èêîíîê ðàçìå-

ðîì 32 íà 32 ïèêñåëÿ èëè 16 íà 16. ×àùå âñåãî ðàçðàáîò÷èêè ñàéòà âêëþ-

÷àþò âñå 50 êàðòèíîê â HTML ôàéë. Òîãäà îíè áóäóò çàãðóæàòüñÿ ïî îò-

äåëüíîñòè  êàæäàÿ èç íèõ îòäåëüíûì çàïðîñîì. Êîíå÷íî, ýòî ïðèâåäåò ê

íèçêîé ñêîðîñòè çàãðóçêè.

Îïòèìèçèðóþò ýòî ñëåäóþùèì îáðàçîì  êàðòèíêè ñêëåèâàþò â îäíó

îáùóþ ïîëîñêó èëè êâàäðàòèê (îáû÷íî äåëàþò â îäíó ïîëîñêó, ïîòîì èõ

ëåã÷å îòòóäà âûäåðãèâàòü). Äàëüøå ïðè ïîìîùè CSS â íóæíîì ìåñòå ïî-

êàçûâàþò òîëüêî êóñî÷åê ýòîé ëåíòû  âûäåðãèâàþò èç áîëüøîé êàðòèíêè

íåîáõîäèìóþ ïèêòîãðàììó. Òàêîé ïðèìåð ðåàëèçîâàíà íà yandex.ru, à òàê-

æå íà äðóãèõ ñàéòàõ. Ïîýòîìó, åñëè ó âàñ åñòü ìàëåíüêèå èêîíêè è èõ ìíîãî,

èõ íàäî ñêëåèâàòü â îäèí ôàéë è ñ ïîìîùüþ ýòîãî ïðèåìà ïîêàçûâàòü òîëü-

êî íåîáõîäèìûå êóñî÷êè ýòîãî ôàéëà. Èñïîëüçîâàíèå ýòèõ ïðèåìîâ ïîçâî-

ëèò âàì óâåëè÷èòü ñêîðîñòü çàãðóçêè âàøåãî ñàéòà è îáåñïå÷èòü êëèåíòàì

áîëåå óäîáíûé ïðîñìîòð âàøèõ ñòðàíèö.

Îïòèìèçàöèÿ DNS çàïðîñîâ Åñëè âû ññûëàåòåñü èç ñòðàíèöû íà äðó-

ãèå ñàéòû, ñ êîòîðûõ çàãðóæàþòñÿ ôàéëû(êàðòèíêè, css, ñêðèïòû)  òî

ïðîèñõîäèò ïîâòîðíûå îáðàùåíèå ê DNS ñåðâåðó. Ïåðâûé çàïðîñ, êîòîðûé

áðàóçåð âûïîëíèë â ñàìîì íà÷àëå, îáåñïå÷èë òîëüêî îïðåäåëåíèå èìåíè

www.yahoo.com. Åñëè âû çàïðàøèâàåòå êàðòèíêè ñ img.yahoo.com  òî äëÿ

òîãî ÷òîáû ïîëó÷èòü IP àäðåñ âñå ðàâíî ïðèõîäèòñÿ äåëàòü íîâûé DNS çà-

ïðîñ (äàæå åñëè îáà ýòèõ äîìåéíà íàõîäÿòñÿ íà îäíîì ñåðâåðå è èìåþò îäèí

è òîò æå IP àäðåñ). Òî åñòü ãäå-òî ê ñåðåäèíå çàãðóçêè HTML ñòðàíèöû ìî-

æåò îêàçàòüñÿ, ÷òî áðàóçåð íå çíàåò ïî êàêèì IP àäðåñàì îáðàùàòüñÿ, è

îí îïÿòü íà÷èíàåò äåëàòü DNS çàïðîñû. Ýòî òîæå ïðèâîäèò ê ñíèæåíèþ

ñêîðîñòü çàãðóçêè.

Åñëè âû äåëàåòå ñàéò, íàäî èìåòü ñåðüåçíûå îñíîâàíèÿ äëÿ òîãî, ÷òîáû

ðàçáðàñûâàòü êîíòåíò ïî ðàçíûì äîìåííûì èìåíàì è ïî ðàçíûì ïîääî-

ìåíàì. Äàæå ðàçíèöà ìåæäó www.yahoo.com è yahoo.com ñìîæåò ñûãðàòü

çëóþ øóòêó. Ñ òî÷êè çðåíèÿ DNS ýòî äâà ðàçíûõ ñåðâåðà. Åñëè îíè ïðî-

ïèñàíû êàê ññëûêè äðóã íà äðóãà (CNAME), òî òîãäà âû èõ ïîëó÷èòå â

îäíîì îòâåòå DNS ñåðâåðà, à åñëè íåò  òîãäà áóäóò ïðîèñõîäèòü 2 çàêðïñà

ê DNS. Åñëè ó âàñ ÷àñòü ññûëîê ñòîèò ñ www, à ÷àñòü áåç www - ýòî ñòîèò

102