Veb saytlarni ishlashishini tezlashtirish muammolari va ularning yechimlari. “InfoCOM.UZ” saytining kamchiliklari va ularni bartaraf etish usullari

1. Kirish
Yildan yilga internet tarmog‘i faqat oldinga qarab ildam qadam tashlamoqda. Shu bilan birga hozirgi kunda O‘znetda yaratilayotgan saytlar ham o‘z dizayni, funksional qismi, integratsiyalashgan modullari bilan internet tarmog‘idagi boshqa davlatlar (Russia, USA, Germany, Korea va h.k.) veb dasturlari bilan tenglashmoqda.

Hozirgi kunda O‘zbekistonda keng tarqalgan (aniqrog‘i 40% da ortiq foydalanuvchilar orasida) internet xizmatlari:
• Elektron pochta orqali xat yoki fayllar yuborish (Mail.ru, Pochta.ru, Gmail.com, Ramber.ru, Inbox.uz, …);
• Turli messendjerlardan foydalangan holda onlayn muloqot qilish (Mail.ru agent, Scype, Google talk, Qip, MSN, ….);
• Ma’lumotlar qidiruvi (Google.com, Rambler.ru, Nigma.ru, b2b.com, Yandex.ru);
• “E – Commerce” tizimiga asoslangan saytlar (Torg.uz, Zor.uz, Alo.uz, List.uz, …);
• To‘lov tizimlari (PayNet,, Payment-plyus);
• Tarjima portallari (Uz-Translations – языковой портал);
• Onlayn chat tizimlari (Chat.uz, Narod.uz, …);
Bundan tashqari O‘znet (O‘zbekiston Interneti) foydalanuvchilari va asosan talaba, o‘quvchilar asosida orasida Kompyuter va Axborot texnologiyalari bo‘yicha kengroq ma’lumot olish mumkin bo‘lgan resurslar (ref.uz, Uforum.uz,…) ham ma’lum va mashxur. Shu qatorga ajoyib www.infocom.uz veb saytini ham qo‘shish mumkin.

2. Mavjud muammoning tahlili
O‘z o‘quv mashg‘ulotlarim va qiziqishlarim yuzasidan “Infocom”ning rasmiy veb sayti http://www.infocom.uz ga ko‘p qadam ranjida qilaman. Bu saytda men uchun qiziqarli va muhim ma’lumotlar tez tez chop etiladi. Bundan tashqari “Infocom”ning barcha sonlarini qoldirmay o‘qib borishga harakat qilaman. Saytni dizayni va kontenti yomon emas, ammo…!

Dasturlash tillari va server texnologiyalarining rivojlanishi, mukammal CMS (Content Management System)lar yaratilishi bilan bir qatorda quyidagi aspektlar ham mavjudki, ularga e’tibor bermaslikning iloji yo‘q.

Statistik ma’lumot
Oxirgi 5 yilda veb saxifalarning o‘rtacha xajmi 3 barobar ortgan. Oxirgi yarim yillikda esa taxminan1,5 barobarga ortgan.

Bunga asosiy sabab quyidagilar hisoblanadi:
• Ajoyib dizaynni yaratish uchun o‘nlab rasmlar, kaskadli stil jadvallari (CSS) va ayrim hollarda javascript (JS) lardan keng foydalanilmoqda.
• Saytlar ishlash prinsiplari murakkab tizimga asoslangan, Javascript yordamida ko‘plab hisoblashlar olib boriladi;
• O‘znet dagi saytlarni ko‘pchiligida katta o‘lchamli multimedia fayllar (Flash, Images, Video) keng qo‘llanilmoqda;
• Saytlardagi asosiy html fayl o‘lchami ham bir necha barobarga ortdi;
• Yuqoridagilardan kelib chiqib saytlarning umumiy o‘lchamlari ham ortib bormoqda.

Statistik ma’lumot
O‘znetdagi saytlardagi har bir veb saxifa o‘rtacha 40 ta obyekt (Rasmlar, Multimedia fayllar, JavaScriptlar, CSS lar) bilan birgalikda yuklanadi va bu saytni umumiy yuklanish vaqtiga o‘ta salbiy ta’sir ko‘rsatadi.

O‘znetdagi ko‘plab saytlar chiroyli va ma’lumotlarga boy bo‘lishi bilan birga yetarli darajada “og‘ir” hamdir. “Og‘ir” deyishimni sababi foydalanuvchi brauzer (Opera, Firefox, Safari, IE) adres qatoriga www..uz deb yozishidan to sayt kompyuuterga yuklanguncha yetarli darajada ko‘p vaqt o‘tadi.

Hozir men o‘z bilim va tajribamdan kelib chiqqan holda bu muammoni to‘liq tahlil qilib, uni yechimini topishga harakat qilaman!
Ammo buning uchun internetdagi http,https protokolidan foydalanuvchi veb dasturlar qanday ishlashi haqida va saytni optimizatsiya qilish uchun qaysi aspektlarga e’tibor qaratishni aniqlashtirib olsak.

Umuman olganda biz foydalanadigan veb xizmatlar (saytlar, onlayn test tizimlari va h.k.) “Mijoz – Server” arxitekturasiga asoslangan va veb saxifalarni o‘zi ham statik yoki dinamik bo‘lishi mumkin.

Statik veb saxifalar:
• Asosan “Sayt – vizitka” yoki “Portfolio” tipidagi saytlarda keng qo‘llaniladi.
• Faqatgina HTML hujjat (.html, .htm, .vml, .xhtml, .xml) va Multimedia fayllar, JavaScriptlar, CSS lardan iborat bo‘ladi.
• Foydalanuvchi harakatiga (Masalan formaga qandaydir yozuv yozib Enter in bosdingiz) server orqali javob qaytara olmaydi.
• Yaratish nisbatan oson (WYSIWYG editorlar yoki MS Word yordamida yoki notepadda)

Dinamik veb saxifalar:
• Ulkan veb portal, Internet magazin, Sotsial tarmoq va h.k. lar yaratishda qo‘llaniladi.
• Yozishda server script turlari (PHP, PERL, ColdFusion, ASP, ASP.NET va h.k.) ishlatiladi.
• HTML saxifalar dinamik ravishda server (Apache, Share Point yoki Nginx) yordamida generatsiya qilinadi.
• Relyatsion yoki obyektga yo‘naltirilgan ma’lumotlar bazasidan foydalanadi (MySQl, MsSQL, PostGreSQL va h.k.)
• Foydalanuvchi harakatiga (Masalan textboxga qandaydir yozuv yozib Enter in bosdingiz) server orqali javob qaytaradi (sinxron yoki asinxron).
• Yaratish murakkabroq: dasturchi tezroq ishlashi uchun “Web Developer” tipidagi dasturlar (PHP Designer, Adobe Dreamveawer, MS Visual Studio 2008 va h.k.) dan foydalanish kerak.

Yuqorida biz HTML saxifalar dinamik ravishda server (Apache, Share Point yoki Ngnix) yordamida generatsiya qilinadi deb aytib o‘tdik:

Bu gapga misol sifatida PHP tilida yozilgan dasturni Apache serverdagi generatsiyasini ko‘rsatib o‘taman:

Misol uchun quyidagi oddiy php koddan foydalanamiz

Bu PHP kod server (Apache) tomonida generatsiya qilinib quyidagi HTML kodni foydalanuvchiga uzatadi:

Brauzerda yuqoridagi HTML kod hosil qilgan yozuv

Saytni yuklanishiga ketgan umumiy vaqtning faqatgina 5-20 % serverga (kodni generatsiyasiga) to‘g‘ri keladi. Bu tahminan 50-300 ms ni tashkil etadi. Qolgan vaqt esa Mijoz arxitekturasi va kanalning o‘tkazish qobiliyati (internet tezligi) ga bog‘liqdir.

Tadqiqotlarga ko‘ra agar sizni saytingizni to‘liq yuklanishi (Hamma elementlar bilan) uchun ketgan vaqt 8-10 soniyadan ortsa va shu jarayonda sayt yuklanayotgani haqida (“Loading.. Please wait” kabi) hech qanday yozuv berilmasa, bu narsa foydalanuvchini esdan og‘dirib qo‘yishi mumkin ekan !

Bundan tashqari xDSL yoki FTTx internet foydalanuvchilari Dial – up foydalanuvchilariga qaraganda saytni sekin ishlashiga yanada talabchan ekanlar. 2008 yili o‘tkazilgna so‘rovlar natijasida shu narsa ma’lum bo‘ldiki 33% yuqori tezlikdagi internet foydalanuvchilari sayt yuklanishini 4 soniyadan, 43% esa 6 soniyadan ortiq kutishni xohlamaydilar. Bunday hollarda foydalanuvchi 5-8 soniya davomida ekranda sayt ko‘rinmasa shartta brauzerni ‘o‘chirishadi yoki bo‘shqa saytga o‘tib ketishadi.

Bu yerda har bir mikrosekund oltinda tengdir. Ko‘plab sondagi foydalanuvchilarga ega Google, Amazon, Flickr, Netflix, Яндекс, вКонтакте va Одноклассники, MAIL.ru kabi veb portallar o‘z saytlarini yuklanish tezligiga katta e’tibor qaratadilar. Chunki bu saytlar bir biriga o‘xshamasa xam, ularga 1 kunda 1000 tadan ko‘p odam kiradi. Bu hozirgi bozor iqtisodiyoti va katta raqobat holatida eng to‘g‘ri qarordir. Chunki saytni yuklanishiga ketgan har bir ortiqcha mikrosekund yuzlab yo‘qotilgan foydalanuvchilarga teng bo‘lishi mumkin.

Shunday qilib sizda yoki sizning kompaniyangizda veb sayt bor va siz uni ishlash tezligidan qoniqmayapsiz. Xo‘sh nima qilish kerak? Qanday qilib saytni “Raketa” darajasiga yetkazish mumkin? Imkoni yo‘q narsani o‘zi yo‘q! Ammo ishni avvalo mavjud saytni chuqur o‘rganib chiqishdan boshlash kerak.

Eslatma! Ushbu maqolam uchun tadqiqot obyekti sifatida O‘znetdagi qiziqarli saytlardan biri – http://www.infocom.uz saytini tanlab oldim!

Bunday qilishimdan maqsad men olib borgan izlanishlar keyinchalik bu sayt ravnaqiga hissa qo‘shishini juda xoxlardim.

Shunday qilib ishni boshladik! >>>

Bu masalada biz kerakli dasturiy ta’minot kompyuterimizga o‘rnatamiz. Bundan tashqari veb saytlarni onlayn analizi uchun http://webpagetest.org/, http://site-perf.com/ yoki http://webo.in kabi veb xizmatlardan foydalanish mumkin

Zaruriy dasturiy ta’minot:

Firefox Mozilla 3.5 Brauzeri. Bu brauzer o‘zining ishonchliligi va ajoyib pluginlari bilan e’tiborni qozonadi.

Web Developer Toolbar v1.1.8 (http://chrispederick.com/work/web-developer/)

Bu instrumentlar paneli brauzerda yuklangan veb saytlarni html kodi ustida ishlash uchun kerak.

Firebug 1.4.5 (http://getfirebug.com/)

Firebug yordamida istalgan hajmdagi html, css, js kod bilan ishlash mumkin. Bundan tashqari uning 10 dan ziyod ajoyib imkoniyatlari bor va biz ular bilan ish jarayonida tanishamiz.

Live HTTP Headers v2 (http://livehttpheaders.mozdev.org/)

Live HTTP Headers plugini yordamida biror saytning serveri tomonidan yuborilgan sarlavha (header) larni aniq ko‘rish mumkin.

YSlow (http://developer.yahoo.com/yslow/) Firefox ning Yslow plugini ham veb saytlarni analizida dasturchilarni qo‘lidagi muhim uskuna hisoblanadi. Uni yordamida saytning html kodi bilan yuklanayotgan barcha obyektlar haqida to‘liq ma’lumot olish mumkin.

PHP Designer 2008. Veb dasturlash tillari bilan ishlash uchun juda qulay dasturiy ta’minot (IDEA)

Adobe Dreamveawer CS4. Veb dasturlash tillari va Kaskadli stillar jadvali (CSS) bilan vizual ishlash uchun juda qulay dasturiy ta’minot (IDEA).

Hullas foydalaniladigan dasturlarni aniqlab oldik. Bu dasturlarning barchasi istalgan murakkablikdagi veb loyihalar ustida ishlashda dasturchiga kerak bo‘ladi.

Men http://infocom.uz saytining har tomonlama analizi uchun yuqoridagi dasturlardan va veb servislardan foydalandim.

http://infocom.uz saytining analizi natijalari

http://infocom.uz veb serverining analizi

http://infocom.uz saytini qanchalik tezlashtirish mumkin?

Men http://infocom.uz saytida, uni yuklanish tezligiga jiddiy ta’sir ko‘rsatuvchi quyidagi muammolarni aniqladim:

• HTML fayllarni o‘lchami haddan tashqari katta. (116 kb )
• HTML fayllar uchun GZIP algoritmi ishlatilmagan.
• CSS fayllarni o‘lchamini kichraytirsa bo‘ladi.
• CSS fayllarni soni 1 ta dan ko‘p.
• Statik fayllar uchun Kesh funksiyasi yoqilmagan
• Sayt uchun ETag yoki Last-Modified sarlavhalari yoqilmagan
• JavaScript fayllarni o‘lchamini juda katta (175 kb !)
• JavaScript fayllarni soni 1 tadan ko‘p (7 ta !)
• Serverga dublikat so‘rovlar bo‘lmoqda, ya’ni bitta CSS yoki JS fayl 2< ta joyda kiritilgan (Jiddiy xato) • Ayrim GIF rasmlarni o‘lchamini kichraytirsa bo‘ladi • Ayrim JPEG rasmlarni o‘lchamini kichraytirsa bo‘ladi • Ayrim PNG rasmlarni o‘lchamini kichraytirsa bo‘ladi • FON uchun 1 tadan ortiq rasm yuklanmoqda • Javascript kutubxona (JS LIBRARY) sifatida SAMARASI KAM bo‘lgan “Prototype” ishlatilgan. (121 kb) Eslatma:
Yuqoridagi muammolarni o‘znetdagi ko‘plab saytlarda kuzatish mumkin.
Gapimning isboti sifatida 5 – bo‘limda o‘znetdagi eng mashxur 4 ta saytning integral analizini ko‘rib chiqishingiz mumkin!

O‘z saytining ravnaqi uchun harakat qiladigan har bir “VebMaster” (Adminstrator yoki dasturchi) da quyidagi kabi savollar tug‘ilishi tabiiy.

• Xo‘sh bu muammolarni qanday hal qilish mumkin?
• Ularni barchasini bartaraf etish uchun qancha vaqt ketadi?
• Bu ish yuzasidan kimga murojaat etish mumkin?

Quyida men ularga atroflicha javob berishga, veb sayt yuklanish tezligi bilan bog‘liq muammolarning texnologik yechimlari bilan sizlarni tanishtirib o‘tishga harakat qilaman.

Faqat har bir punktga alohida e’tibor qaratishingizni so‘rab qolaman.

3. O‘znetdagi veb saytlar tezkor yuklanishini ta’minlashning texnologik tomonlari:

Veb saytni optimallashtirish va tezlashtirishni asosiy metodlari:
Bu metodlarni mos ravishda 4 ta guruxga ajratish mumkin.

1. Yuklanuvchi ma’lumotlarni hajmini kamaytirish (Turli kompressiya algoritmlaridan foydalangan holda).
2. Yuklangan ma’lumotlarni keshda saqlab qo‘yish (Juftlik server-mijoz “HEADER” sarlavhalar uzatgan holda).
3. Umumiy yuklanuvchi fayllar sonini kamaytirish (Fayllarni o‘zaro birlashtirish usuli bilan).
4. “Vizual” tezlashtirish usuli (Fayllarni turli hostlardan yuklash.)

3.1. Yuklanuvchi ma’lumotlarni hajmini kamaytirish:

3.1.1. HTML kodni Gzip-deflate algoritmlari bilan siqish (kichraytirish)
Buning uchun 2 ta metod qo‘llash mumkin:

• HTML faylni Apache SERVER vositasida “Gzip” lash (Yoki deflate)
• HTML faylni PHP vositasida “Gzip” lash (Yoki deflate)

HTML faylni Apache SERVER vositasida “Gzip” lash (Yoki deflate) hozir deyarli qo‘llanilmaydi, shu sababli 2-metodni ko‘rib chiqamiz:

2-metod: Asosiy Index.php fayliga quyidagi kodni kiritamiz:

<?php
header(“Content-type: text/html; charset=utf-8”);
define(“ASROR_ADMIN”,true);
if (strpos(‘ ‘.$_SERVER[‘HTTP_ACCEPT_ENCODING‘],’x-gzip’) !== false)
{
$encoding = ‘x-gzip’;
}
if (strpos(‘ ‘.$_SERVER[‘HTTP_ACCEPT_ENCODING‘],’gzip’) !== false)
{
$encoding = ‘gzip’;
}
if (isset($encoding))
{
ob_start();
}
function percent($a,$b)
{
$c = $b / $a * 100;
return $c;
}
?>
SHU YERDA NIMANIDIR YOZASIZ !
YA’NI HTML KOD JOYLASHTIRASIZ !
<?
if (isset($encoding))
{
$content = ob_get_contents();
$contentlenn = strlen($content);
$out = gzencode($content,9);
$len = strlen($out);
$content_strlen = strlen($content);
$gzpercent = percent($content_strlen,$len);
$percent = round($gzpercent);
$content = str_replace(‘<!- GZipper_Stats ->‘,’Original size: ‘.strlen($content).
‘ GZipped size: ‘.$len.’ Сompression: ‘.$percent.’%<hr>‘,$content);
$out = gzencode($content,9);
ob_clean();
header(‘Content-Encoding: ‘.$encoding);
echo $out;
}
?>

Bunda sayt tarkibidagi matn gzip yoki deflate algoritmlari bilan siqilib brauzerga uzatiladi. Brauzer “header(“Content encoding: gzip”)” deb yozilgan kodga asoslanib bu matnni yana html kod shakliga keltiradi

Bu usul html yoki xml xujjatlarni o‘lchamini kamaytirishda ancha samaralidir – 80%.

3.1.2 CSS va JavaScript larni Serverdan Gzip-deflate algoritmlari bilan kichraytirish

Buning uchun sayt joylashgan asosiy direktoriyaga quyidagi kod yozilgan .htaccees faylini ko‘chirib qo‘yish kerak:

AddEncoding gzip .gz
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{HTTP_USER_AGENT} !Konqueror
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)\.css$ $1.css.gz [QSA,L]
<FilesMatch \.css\.gz$>
ForceType text/css
</FilesMatch>
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{HTTP_USER_AGENT} !Konqueror
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)\.js$ $1.js.gz [QSA,L]
<FilesMatch \.js\.gz$>
ForceType application/x-javascript
</FilesMatch>

Bu usul CSS va JavaScript xujjatlarni o‘lchamini kamaytirishda ancha samaralidir – 70%.

3.1.3 CSS larni minimizatsiya qilish

Bunda CSS fayllar uchun CSS Tidy dasturidan foydalanamiz. Uni ishlash jarayoni quyida ko‘rsatilgan:

Bu usul CSS xujjatlarni o‘lchamini kamaytirishda maksimum 40% samara beradi.

3.1.4 JavaScript larni minimizatsiya qilish

Bunda JavaScript fayllar uchun Dean Edvards Packer dasturi dan foydalanaman. Unda ishlash jarayoni quyida ko‘rsatilgan:

Bu usul JavaScript xujjatlarni o‘lchamini kamaytirishda maksimum 23% samara beradi.

3.1.4 Rasmlar (PNG,JPG,BMP,GIF..) ni optimizatsiya qilish

Bunda RASM fayllari JPEG, PNG, PNG-24, BMP, GIF tarkibidagi quyidagi ma’lumotlar olib tashlanadi

• Turli kommentariylar
• Qo‘shimcha ma’lumotlar
• Ortiqcha piksellar
• Foydalanilmaydigan palitralar
So‘ngra fayl yangi nom bilan saqlanadi.

Bu maqsad uchun quyidagi dasturlardan foydalanish mumkin:
• GIF: Adobe Photoshop [Lossy], Ultra GIF Optimizer 1.02, SuperGIF 1.5, GIFLite 2.10
• PNG: optipng 0.6.3, pngcrush 1.6.15, pngoutwin 1.0.1
• JPEG: Adobe Photoshop CS2, GIMP 2.6.6, Xat JPEG Optimizer

3.2 Yuklangan ma’lumotlarni keshda saqlab qo‘yish

3.2.1 Statik fayllarni keshda saqlab qo‘yish

Bu usul statik saxifalar va fayllar uchun keng qo‘llaniladi. Masalan umuman o‘zgarmaydigan rasmlar, Javascriptlar, Css lar uchun. Bu elementlar uchun umumiy yechim quyida ko‘rsatilgan. Sayt joylashgan asosiy direktoriyaga quyidagi kod yozilgan .htaccees faylini ko‘chirib qo‘yish kerak:

ExpiresActive On
ExpiresDefault “access plus 10 years”
<FilesMatch \.(php|phtml|shtml|html|xml)$>
ExpiresActive Off
</FilesMatch>
<FilesMatch \.(php|phtml|shtml|html|xml)$>
Header append Vary User-Agent
Header append Cache-Control private
</FilesMatch>
<FilesMatch \.(bmp|png|gif|jpeg|ico|flv|wmf|swf|pdf|doc|rtf|css|js)$>
Header append Cache-Control public
</FilesMatch>
<FilesMatch \.(js|css|bmp|png|gif|jpeg|ico|flv|wmf|swf|pdf|doc|rtf)$>
Header unset Last-Modified
FileETag MTime
</FilesMatch>
ExpiresByType image/jpeg “access plus 333 day”
ExpiresByType image/gif “access plus 333 day”
ExpiresByType image/png “access plus 333 day”
ExpiresByType text/css “access plus 333 day”

Muhim eslatma:
Bu kesh uchun yozilgan dastur to‘g‘ri ishlashi uchun Apache serverda kerakli modullar (mod_header, mod_expires) o‘rnatilgan va yoqilgan bo‘lishi lozim!

3.2.2 E-tag yoki Last Modified sarlavhalarini qo‘llash:

E-tag – bu serverni hr bir fayl versiyasini ideintifikatsiya qilish uchun Veb Server (Apache) tomonidan brauzerga uzatiladi:

HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: “10c24bc-4ab-457e1c1f” <<
Content-Length: 12195

Keyinroq agar brauzer komponentning aktualligini tekshirib ko‘rmoqchi bo‘lsa u If-None-Match sarlavhasini yuboradi.
So‘ngra brauzer If-None-Match ni E-tag bilan solishtiradi, agarda ular o‘zaro teng bo‘lsa serverdan 304 statusli kod qabul qilinadi.

GET /i/yahoo.gif HTTP/1.1
Host: us.yimg.com
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: “10c24bc-4ab-457e1c1f”
HTTP/1.1 304 Not Modified

Muhim eslatma:
Apache serverda E-tag ni yo‘qib qo‘yish uchun quyidagi kodni .htaccess ga kiriting:

FileETag MTime Size

Last modified texnologiyasi E-tagning kloni hisoblanadi va agarda siz E-tag dan foydalansangiz Last-modified ga zarurat yo‘q

Muhim eslatma:
HTML fayllar uchun kech funksiyasini o‘chirib qo‘yishni maslaxat beramn. (Boshqa fayllarga yoqish mumkin). Chunki BackEnd faqatgina html fayldan iborat bo‘ladi

3.3 Umumiy yuklanuvchi fayllar sonini kamaytirish (Fayllarni o‘zaro birlashtirish usuli bilan).

3.3.1 Css Sprites: Bunda saytingizda ishlatilayotgan barcha rasmlarni 1 ta rasmga birlashtirib, so‘ngra CSS[Background-image, Background-position] yordamida undan rasmlar ajratib olinadi.

Agar bu rasmlarni yaratishga vaqtingiz bo‘lmasa CSS Sprite generator.. Servisidan foydalanish mumkin.

3.3.2 Image-Map: Bunda sayt uchun bitta katta o‘lchamdagi rasm ishlatiladi. Barcha ssilkalar esa