Как ускорить работу сайта для посетителя

Проблемы ускорения работы web-сайтов и их решения
Недостатки сайта infoCOM.UZ и его ликвидация
Aсрор Закиров,
Студент ТУИТ
Существующие проблемы ускорения web-ресурсов и их решения, разработка
в этом направлении универсальных технологий, методов, классификаций
являются требованием времени. Сегодня ни один современный человек не может
представить жизнь без интернета. Потому, что интернет считается основным
полем распространения данных по всему миру. Каждый день испытываем
потребность в услугах интернета и это естественно.
Развитие интенета с каждым годом ускоряется. Сегодня сайты, созданные
Uznet е по дизайну, функциональности, интегрированным модулям сравниваются
с интернет web-сайтами других стран (Россия, США, Германия, Koрея и другие).
Сегодня в Узбекистане широко распространены следующие интернет-услуги
(точнее среди более 40 процентов пользователей):
 Отправлений через электронную почту письма или файлов (Mail.ru,
Почта.ru, Gmail.com, Ramber.ru, Inbox.uz, ...);
 Онлайн общение с использованием разных мессенджеров (Mail.ru
agent, Scype, Google talk, Qip, MSN, ….);
 Поиск информаций (Google.com, Rambler.ru, Nigma.ru, b2b.com,
Yandex.ru);
 Сайты, основанные на систему “E – Commerce” (Torg.uz, Zor.uz,
Alo.uz, List.uz, …);
 Системы оплаты (PayNet,, Payment-plyus);
 Порталы переводов (Uz-Translations – языковой портал);
 Системы онлайн-чатов (Chat.uz, Narod.uz, …);
Кроме этого, имеется всеми энакомый, среди пользователей Uznet (интернет
Узбекистана), в основном, среди студентов и учашихся, ресурсы. В этих ресурсах
имеется возможность получения более широких сведений по компьютерам и
информационным технологиям (ref.uz, Uforum.uz,…). И www.infocom.uz webсайт тоже можно отнести к этим ресурсам.
Анализ существующей проблемы
По роду своего занятия и интерсов очень часто заглядываю на официальный
web-сайт журнала Infocom.UZ http://www.infocom.uz . на этом сайте очень часто
даются данные, необходимые и интересные для меня. Кроме этого, стараюсь
читать все номера журнала “Infocom”. Дизайн и контент сайта неплохой, но … !
Наряду с развитием языков программирования и серверных технологий,
соданием совершенных CMS (Content Management System) имеются следующие
аспекты, на которые необходимо обратить внимание.
Статистические данные
За последние 5 лет средний объем web-страниц увеличился в 3 раза. А за
последние полугодие увеличился в 1,5 раза.
Основными причинами этого являются следующие:
 Для создания привлекательного дизайна используются десятки фотографий,
таблицы Kaскадного стиля (CSS) и в некоторых случаях широко
используются javascript (JS).
 Принцип работы сайтов разрабатывается расчетами с помощью Javascript,
основанного в сложной системе;
 На сайтах в Uznet в большинстве случаях используются широко
размерными мультимедиа файлами (Flash, Images, Video);
 В несколко раз увеличился основной html размер файла;
 Увеличивается и общий размер сайтов.
Статистические данные
Каждая web-страница на сайтах Uznet загружается вместе в среднем 40
объектами (рисунки, Multimedia файлы, JavaScript, CSS ), а это отрицательно
сказывается на общем времени загрузки сайта.
Многие сайты Uznet красивые и богаты данными, но наряду с этим, они в
определенном уровне, «тяжелые». Причиной этому считается написание
пользователем в сторку адреса браузера (Opera, Firefox, Safari, IE) www.<sayt
nomi>.uz до загрузки компьютера проходит много времени.
Исходя из своих знаний и опыта, предложил данную проблему,
постарался найти решения этой проблемы! Но для этого уточним то, как
работают web-программы, использующие сушествующие на интернете
TCP/IP, в том числе http,https протоколов и на какие аспекты необходимо
обратить внимание для оптимизации сайта. Вообще, используемые нами webсерверы (сайты, online системы тестов и др.) основаны на архитектуре “Mijoz Server” и сами web-сайты могут быть statik или dinamik.
Statik web-сайты:
 В основном, широко применяются на сайтах типа “Sayt – vizitka”
или “Portfolio”.
 Состоят только из HTML документа (.html, .htm, .vml, .xhtml, .xml)
и Multimedia файлов, JavaScriptы, CSS.
 Пользователь за свои действия (к примеру написать чтото в форму
и нажатие Enter) не может ответит через сервер.
 Создание относительно легко (с помощью WYSIWYG editor а или
MS Word или на notepadda)
Dinamik web сайты:
 Используется при создании больших web-порталов, Internetмагазинов, социальных сетей и других.
 При написании применяются виды сервер-скриптов (PHP, PERL,
ColdFusion, ASP, ASP.NET и т д.).
 HTML страницы с помощью сервера (Apachi, Share Point yoki
Nginx) динамично генерируются.
 Использует Relyatsion или базой данных, направленных на объект
(MySQl, MsSQL, PostGreSQL va h.k.)
 Действиям пользователя (например, написание на форме слова и
нажатие Enter) можно получить ответ от сервера (синхронно или
асинхронно).
 Создание несколько осложнено: для того, чтобы работала быстрее,
необходимо использование программы типа “Web Developer” (PHP
Designer, Adobe Dreamveawer, MS Visual Studio 2008 и т. д.).
Выше мы сказали, что HTML-страницы при помощи сервера (Apachi,
Share Point или Ngnix) динамично генерируются:
В качестве примера, приведем генерацию программы, написанной на языке
PHP:
Генерируется
простым
PHP-кодом сервера (Apachi) и
передается
пользователю
HTML код:
После загрузки браузером
данного html, кода появляются
следующие записи
на Brauzerе Необходимо
создан указанный код
Только 5-10 процентов обшего времени на загрузку сайта приходится на
сервер (на генерацию кода). Это составляет примерно 50-100 мс. А остальное
время зависить, от архитектуры Клиента. Согласно исследованиям если время
загрузки сайта (со всеми элементами) привышает 8-10 минут и не появляется
сообщение о процессе загрузки сайта (“Loading.. Please wait” kabi), то данная
ситуация может отрицательно действовать на психику пользователя!
Кроме этого, оказывается, ADSL internet-пользователи более
требовательны скорости работы сайта чем Dial – up-пользователи. По данным,
проведенного в 2008-году опроса, 33 процента пользователей ADSL-internet не
желают ждать загрузки более 4 секунд, 43 процентов более 6 секунд. В таких
случаях пользователи, если в течение 5-8 секундов сайт не появится на экране
отключают браузер или переходят на другой сайт. Здесь очень дорога каждая
микросекунда. Большинство пользователей обращают внимание на скорость
загрузки web-порталов, таких как Google, Amazon, Flickr, Netflix, Яндекс,
вКонтакте и Однокласники, MAIL.ru., это самое правильное решение в
нынешних условиях рыночной экономики и сильной конкуренции. Каждые
потерянные микросекунды - это потеря сотни пользователей.
представте
Вы срочно должны получить сведения о SDH-технологии, применяемой в
телекоммуникации. Ваши действия (вы пользователь простого Dial-Up или
ADSL 128 кб/с):
 С помощью Call Back или напрямую отправляете запрос
провайдеру и соединяеев с интернетом
 Запускаете Brauzer
 Вы очень спешите, поэтому начинаете поиск информации на сайте
который первым вспомнили.
 B строку адреса браузера пишете название сайта, например:
поиск.uz и ждете, когда появится необходимое сведение
 Но ужас ! прошло 1 минута а сайта нет: на браузере пустой экран.
 Вы нервничаете, не знаете, что делать, в конце концов, нервничая
на строке адреса Brauzerа пишете Yandex.ru.
 Сайт загрузился за 10 секунд и за 1 минуту нашел необходимое
вам сведение и закончили работу.
 Теперь если кто-нибудь вам скажет положительное мнение о сайте
поиск.uz, вы изо всех сил будете возражать.
примечание: это только лишь мое представление!
Таким образом, у вас или у вашей компании имеется web-сайт и вы не хотите,
чтобы ваш сайт оказался в такойже ситуации, как сайт “Qidir.uz”. Итак, что
делать? Каким образом можно тостич скорости “Ракеты”?
Мое личное мнение: не бывает не возможного! Но надо начинать с
основательного изучения существующего сайта.
примечание !
В качестве объекта исследования выбрал один из интересных сайтов в Uznet
- http://www.infocom.uz !
Причина этого выбора, очень хочу, чтобы исследования проведенные мною,
в дальнейшем внесли вклад в развитие данного сайта.
Итак, начинаем! >>>
В компьютере установлены все необходимые программные обеспечения для
web. По моему мнению опытный Web Designer для контроля работы и управления
созданного им web сайта, исправления ошибок и создания широких возможностей
выполнения разных операций пользуется следуюшими программами:
примечание!
Именно эти программы помогут нам при анализе сайта http://www.infocom.uz.
Программы Microsoft Windows XP,Vista,Loghorn,7
Firefox
Brauzeri.
Mozilla
3.5
Данный браузер своей
надежностью
и
интересными плугинами
завоевал внимание.
Web
Toolbar v4
Firebug v2.7
Developer
Live HTTP Headers v2
Fire FTP v1.06
YSlow v3
Firefox Yslow
Firebug Console v1
PHP Designer 2008
(IDEA)
Adobe Dreamveawer
CS4
Наконец,
определили используемые программы. Все эти программы
необходимы при работе над web проектами любых сложностей. Для
всестороннего анализа сайта http://infocom.uz воспользуемся выше указанными
программами. Но по причине, что это очень сложный (даже опытному
программисту!) и продолжительный процесс я сразу перейду к результатам
анализа. Если хотите получить более полные данные можете обратиться на мою
электронную почту
результаты анализа сайта http://infocom.uz
Дата проведения исследования сайтаhttp://infocom.uz
11.12.2009
Общий объем сайта
Количество объектов сайта
Количество дубликат сайтов
763Kb
72
31
Fayllarning saytni umumiy xajmidagi o‘rni:

Rasmlar : 60 foiz - 47 ta asosiy va 11 ta fon sifatida

JavaScript : 18 foiz - 9 ta

CSS 2 foiz

HTML 7 foiz

Multimedia 3 foiz -2 ta fayl
Сервер размещения сайта
nginx/0.6.32
Диаграмма загрузки сайта
здесь:
Время полного открытия канала со скоростью 54,6 Kbit/s
Время полного открытия через канал со скоростью 100
KBayt/s
76.95 sekund
17,4 sekund
Анализ web сервера http://infocom.uz
Насколько можно ускорить сайт http://infocom.uz?
Мои оценки скорости сайта
Интеграл-оценка (по контенту)
Насколько можно ускорить:
43/100
33/100
3.1 раза, то есть на
307 процентов
Я на сайте http://infocom.uz выявил следующие данные, влияющие на его
скорость:









HTML и его объем очень велики. (116 kb !!!)
Для HTML файлов не использовано GZIP-aлгоритмы.
Можно уменшить величину CSS-файлов.
Количество CSS-файлов больше одного.
Не включено кэш функция для статик-файлов
Не включены ETag или Last-Modified заглавия для сайта
Очень велики размеры JavaScript файлов (175 kb !!!)
Количество JavaScript файлов больше одного (аж 7 !!!)
На сервере повторяются дубликат-опросы, то есть один CSS или





JS fayl введен более чем в двух местах (серьезная ошибка)
Можно уменшить размер некоторых GIF-рисунков
Можно уменшить размер некоторых JPEG -рисунков
Можно уменшить размер некоторых PNG -рисунков
Для фона загружается более одного рисунка
В качестве Javascript библиотеки (JS LIBRARY) использовано не
эффективное “Prototype” . (121 kb)
примечание:
Такую ситуацию можно встретить на большинстве сайтов.
Как доказательство в 5 – разделе, проанализировав 3 самых известных сайта
раскрою сушествующие недостатки!
У каждого “WebMaster”а, который стремится к развитию своего сайта
возникают следующие вопросы.
 Как можно решить эти проблемы?
 Сколько времени необходимо для решения всех проблем?
 Кому можно обратиться по этому вопросу?
Постараюсь подробно ответить на эти вопросы, ознакомить с
технологическими решениями проблем, связанных со скоростью загрузки webсайта.
Только прошу особого внимания на каждый пункт.
 Fayl HTML \Apachi SERVER \“Gzip” \ (Yoki deflate)
 Fayl HTML PHP “Gzip” (Yoki deflate)
<?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.' foiz<hr>',$content);
$out = gzencode($content,9);
ob_clean();
header('Content-Encoding: '.$encoding);
echo $out;
}
?>
AddEncoding gzip .gz
RewriteEngine On
RewriteBase /
RewriteCond foiz{HTTP:Accept-encoding} gzip
RewriteCond foiz{HTTP_USER_AGENT} !Konqueror
RewriteCond foiz{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)\.css$ $1.css.gz [QSA,L]
<FilesMatch \.css\.gz$>
ForceType text/css
</FilesMatch>
RewriteCond foiz{HTTP:Accept-encoding} gzip
RewriteCond foiz{HTTP_USER_AGENT} !Konqueror
RewriteCond foiz{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)\.js$ $1.js.gz [QSA,L]
<FilesMatch \.js\.gz$>
ForceType application/x-javascript
</FilesMatch>
minimizatsiya CSS
CSS kod
Yoki bu php koddan foydalanamiz
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"
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: "10c24bc-4ab-457e1c1f" <<
Content-Length: 12195
.
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
<img
src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3/
/Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8
L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e
0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7"
width="16" height="14" alt="ASROR"/>
$regex=
"!(<link[^>]+rel\\s*=\\s*(\"stylesheet\"|'stylesheet'|stylesheet)([^>]*)>|<st
yle\\s+type\\s*=\\s*(\"text/css\"|'text/css'|text/css)([^>]*)>(.*?)</style>)! is";
preg_match_all($regex, $this->head, $matches, PREG_SET_ORDER);
if (!empty($matches)) {
foreach($matches as $match) {
$file = array();
$file['tag‘] = 'link';
$file['source'] = $match[0];
$file['content'] =
preg_replace("/(<link[^>]+>|<style[^>]*>[\t\s\r\n]*|[\t\s\r\n]*<\/style>)/i", "",
$match[0]);
preg_match_all("@(type|rel|media|href)\s*=\s*(?:\"([^\"]+)\"|'([^']+)'|([\s]+
))@i", $match[0], $variants, PREG_SET_ORDER); if(is_array($variants)) {
foreach($variants AS $variant_type) {
$variant_type[1] = strtolower($variant_type[1]);
$variant_type[2] = !isset($variant_type[2]) ? (!isset($variant_type[3]) ?
$variant_type[4] :
$variant_type[3]) :
$variant_type[2];
switch ($variant_type[1]) {
case "href":
$file['file'] = trim($this->strip_querystring($variant_type[2]));
$file['file_raw'] = $variant_type[2];
break;
default:
if ($variant_type[1] != 'media' || ($variant_type[1] == 'media' &&
!preg_match("/all|screen/i", $variant_type[2]))) {
$file[$variant_type[1]] = $variant_type[2];
}
break;
}
}
}
$this->initial_files[] = $file;
}
}
$this->initial_files = array(
array( 'content' => 'faylning to‘liq nomi',
'media' => 'print|handheld|etc',
'file_raw' => '<link href=’fayl nomi’/>’>'
),
)
foreach ($this->initial_files as $file) {
if (!empty($file['media'])) {
$full_content .= '@media '. $file['media'] . '{';
}
$full_content .= $file['content'];
if (!empty($file['media'])) {
$full_content .= '}';
}
}
Css Selektor
http://torg.uz
http://ziyonet.uz
http://uforum.uz saytining tahlili natijalari
http://uforum.uz
http://cert.uz saytining tahlili natijalari
Saytdagi fayllarni nuing yuklanish tezligiga ta’siri