Все знают, что интернет сейчас дешёвый, быстрый и надёжный, типичная Московская точка зрения. И не смотря на то, веря Вконтакту, в Интернет имеет выход пол-страны, дела где-нибудь в Твери или Екатеринбурге несколько другие.

В России дорогой инет. Странно, но единственное, что в Москве дешевле - так это связь. В Томске, например, безлимитки вообще нет, даётся лишь 2 Гб за 600 р в месяц. Вот представьте теперь, зайдет человек на какой-нибудь Вконтакт, а у него за то со счёта снимают 500 рублей. Ещё года 4 назад я сам сидел на точно таком же провайдере и считал каждый килобайт, всегда висела программка на видном месте с активностью интернета - вдруг винда начнёт скачивать обновления, это была бы катастрофа мирового масштаба.

К чему же это я. Дело в том, что обычный веб-сёрфинг, нагнетающий сотни мегабайт траффика уже никого не пугает. Ну анлим и анлим. Дело катится к тому, что на сайт ставят что-то вроде Жумлы, которая даже не выводя абсолютно ничего умудряется выдавать гигантские по размеру страницы. Обладателям не быстрых интернетов остаётся только диву даваться, куда исчезают их деньги. Таким образом выходит, что оптимизацией страниц не занимается никто.

Типичный сайт

Вы можете, естественно, возразить: сайт нацелен на Московскую аудиторию, и флешку в 4 мегабайта с нашего сайта скачают без лишних вопросов, а ещё на фоне играет музыка и посетителям нравится. НО. Во-первых, не у всех инет быстрый и безлимитный. Это частенько нервирует пользователей, так как счёт на 3 тыс. рублей предоставить некому. Во-вторых активно развиваются мобильные технологии. Мобильникам уже выросли из поколения вап-интернета,  они спокойно могут читать обычные страницы html и на полных правах путешествовать во всемирной паутине. А любой обладатель мобильника знает, что интернет там не только дорого, но и очень медленно. Вай-фай технология тоже не блещет, особенно на бесплатных точках. Хотя бы из-за наличия везде и всюду интернета по воздуху следует особое внимание обратить на оптимизацию передачи данных и их сжатие. В конце концов, кому будет приятно следить, как минут 5 ползёт полоска загрузки одной страницы? Более того, компания Google заявила, что будет ранжировать страницы по скорости загрузки! Именно поэтому я считаю, что данная проблема, проблема оптимизации веб-страниц по скорости, не уходит в прошлое, а становится только актуальнее.

Решение вопроса уже частично было в CMS Scriptum заложено, в её идеологии, а именно, это устройство шаблонизатора системы. Он позволяет делать html-код компактным, насколько это только возможно. Мы всегда придерживались концепции двух-трех основных составляющих шаблонов на сайте, таким образом код проще править да и читать. Как следствие - минимальное количество тегов на странице. Кроме того, у наших верстальщиков практикуется использование по максимуму таблиц стилей. Почему? Элементарно, Ватсон. Хоть стилевая таблица и растет до оглушительных размеров, скажем, в 20 кб, но она грузится всего лишь единожды, а HTML-код - каждый раз, когда Вы заходите на сайт. Поэтому как можно больше кода мы старались упрятать внутрь CSS таблиц. Например, вставка картинки обычно подразумевает тег img с атрибутом src, в котором указан адрес. Минусом такого подхода несомненно будет то, что адрес большой, и занимает много места. Если же просто вставить пустой тег а, задать ему в CSS размеры, соответствующие размеру картинки, задать там эту картинку как бекграунд - совсем другое дело! А прописав этому тегу а ещё и атрибут href получаем картинку-ссылку. Добившись такими методами размера шаблона в 2-4 Кб, можно было бы решить, что совершенство достигнуто и отправляться на покой.

Однако душа программера не знает покоя, а руки постоянно чешутся что-то поменять, подтянуть и подлатать. Возьмём те же картинки на сайте. Добиваться минимального размера картинки оперируя несколькими форматами - это целое искусство. И палитру подобрать можно так, чтобы картинка лучше сжималась, и варьировать между png/gif, и "выжимание" из формата jpg всего возможного и невозможного. Существует очень интересная практика, когда несколько кнопок одинакового размера (скажем, на сайте есть десятка два иконок 16 х 16 пикс.) объединяются в один единый файл. Причина проста: во-первых одна картинка это не двадцать мини-файлов в папке (эстетика), во-вторых суммарный размер будет меньше раза в 3-4, в-третьих одну картинку браузеру проще загрузить нежели 20. Если все кнопки выстроить в одну линию, а потом просто двигать эту большую картинку как фон элемента div, можно добиться потрясающих эффектов вплоть до анимации. Кроме того, этот способ очень актуален, чтобы сделать смену картинки при наведении мыши средствами CSS. Если использовать простою замену файла картинки по помощи JavaScript, вы получите эффект "подгрузки", когда вторая картинка ещё не загрузилась, но уже отображается. В случае с единым изображением такой проблемы не будет. Да что там замена двух картинок. Можно создать одну картинку-ленту и сдвигая её кадр за кадром получить анимацию в jpg формате (см. демо)!

До недавних пор единственное, что умела CMS Scriptum - это резать в шаблоне лишние пробелы и переносы строк. Да, код получался компактным, но не сильно. Максимум таким методом можно "выжать" из оптимизатора процентов 30 сокращения исходника. Есть и очень сложные, нагруженные, я бы сказал монструозные оптимизаторы HTML кода, но они от силы на 5% лучше той функции из 5 строк, что встроена в шаблонизатор системы.
Гораздо более продвинутым решением является сжатие данных, тот самый gzip, который довольно давно с успехом применяется для сжатия страниц с помощью непосредственно РНР. Интеграция gzip прошла успешно, выполнена на уровне ядра системы и послушно жмёт всё, что ей попадается под руку (сжимаются даже AJAX-запросы). Фактически можно праздновать победу: средний размер страниц, сгенерированных системой составляет менее 4-х килобайт!
Считайте сами: CMS Scriptum имеет один из самых простых шаблонизаторов, генерирующих минимальных HTML-код; шаблонизатор умеет вычищать из кода всё лишнее, вплоть до комментариев; всё это обрабатывается gzip-ом. Добавлю, что CMS Scriptum использует компактную с точки зрения веб восьмибитную кодировку (UTF-8 в русском языке - 16-битная).

Оставалась ещё одна маленькая, но неприятная деталь. С недавних пор в систему был интегрирован jQuery, который часто обновляется. Последняя версия, которая была установлена. занимает немногим более 70 килобайт. Много это или мало, но грузится она порядочно долго. Packer уже не спасает: такой объём кода распаковывается безумно долго, что снижает производительность в целом. Packer хорош для мелких скриптов, хотя зачем он тогда вообще нужен?
Библиотека jquery не единственна, в системе много дополнительных модулей, модули аякса, куча своих скриптов. И весь этот зоопарк при обновлении страницы начинает скачиваться. интерпретироваться, выполняться... Однако, и из этой ситуации был найден простой и изящный выход.
Суть метода оптимизации яваскриптов состоит в том, что система сама найдёт подключаемые файлы js, обработает их, и сформирует один http-запрос к специальному скрипту jsmin.php. Теперь для браузера на странице остался один-единственный скрипт. Что же происходит внутри jsmin.php? Оказывается, это очень мощный модуль, который:
1. Склеивает все яваскрипты в один;
2. Сжимает скрипты путём удаления ненужных пробельных символов;
3. Кэширует полученный результат и регулирует кэш браузера, чтобы запросов было как можно меньше;
4. Сжимает полученные данные с помощью gzip с максимальной степенью сжатия.
В итоге jquery со всеми необходимыми скриптами для системы уменьшился в объёме в три раза! Всего лишь 28 кб передается при первом старте системы и затем вообще ничего не загружается. Аналогично сжимается и CSS. Вскоре мной была замечена похожая библиотека на sourceforge, но где она интегрирована неизвестно. В лучшем случае опытные веб-мастера сжимают код скрипта вручную в .gz файл.

Однако... И это ещё не всё. В CMS Scriptum действует уникальный в своём роде модуль асинхронной загрузки контента. Суть состоит в том, чтобы подгружать лишь тот кусок HTML-кода, который действительно изменился, а шаблон не обновлять вообще. В результате работы аякса на сайте трафик уменьшается ещё ровно в два раза, ведь с сервера передаются только те данные, которые изменились с предыдущей страницы. У этого метода почти нет недостатков за исключением того, что в адресной строке появится символ #. AJAX в CMS Scriptum интегрирован таким образом, что отключение яваскриптов на машине пользователя никак не скажется на работу сайта, просто страницы перестанут грузиться асинхронно. Для поисковой машины также не виден яваскрипт и она индексирует данные в полной мере. Дополнительный бонус такого метода серфинга: веб-браузеру не требуется пересоздавать всё DOM-дерево документа заново, парсить CSS и JS, что существенно снижает нагрузку на процессор клиента.

P. S. А вот и подтверждение всего вышесказанного.
Head CMS (сами_знаете_какая):
<script language="javascript" type="text/javascript" src="/firebug/firebug.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="robots" content="index, follow" /> <meta name="keywords" content="1С-Битрикс, CMS, PHP, bitrix, система управления контентом" /> <meta name="description" content="1С-Битрикс: Управление сайтом" /> <link href="/bitrix/templates/site/components/bitrix/search.form/mephi_search/style.css?1238153713" type="text/css" rel="stylesheet" /> <link href="/bitrix/templates/site/components/bitrix/menu/horizontal_multilevel/style.css?1238153713" type="text/css" rel="stylesheet" /> <link href="/bitrix/components/bitrix/menu/templates/.default/style.css?1229083755" type="text/css" rel="stylesheet" /> <link href="/bitrix/templates/site/components/bitrix/news.list/index_page_list_articles/style.css?1268387953" type="text/css" rel="stylesheet" /> <link href="/bitrix/templates/site/components/bitrix/breadcrumb/news_index/style.css" type="text/css" rel="stylesheet" /> <link href="/bitrix/components/bitrix/forum/templates/.default/style.css" type="text/css" rel="stylesheet" /> <link href="/bitrix/components/bitrix/forum/templates/.default/styles/additional.css" type="text/css" rel="stylesheet" /> <link href="/bitrix/components/bitrix/forum/templates/.default/themes/blue/style.css" type="text/css" rel="stylesheet" /> <link href="/bitrix/components/bitrix/photogallery/templates/.default/style.css" type="text/css" rel="stylesheet" /> <link href="/bitrix/components/bitrix/socialnetwork/templates/.default/style.css?1254987368" type="text/css" rel="stylesheet" /> <link href="/bitrix/components/bitrix/socialnetwork.group_menu/templates/.default/style.css?1229532753" type="text/css" rel="stylesheet" /> <link href="/bitrix/components/bitrix/socialnetwork.group/templates/short/style.css?1229532767" type="text/css" rel="stylesheet" /> <link href="/bitrix/components/bitrix/socialnetwork.events_dyn/templates/.default/style.css?1229083773" type="text/css" rel="stylesheet" /> <link href="/bitrix/templates/site/styles.css" type="text/css" rel="stylesheet" /> <link href="/bitrix/templates/site/template_styles.css" type="text/css" rel="stylesheet" /> <script src="/bitrix/js/main/utils.js"></script> <script type="text/javascript">var ajaxMessages = {wait:"Загрузка..."}</script> <script src="/bitrix/js/main/cphttprequest.js"></script> <script src="/bitrix/components/bitrix/forum.interface/templates/.default/script.js"></script> <script src="/bitrix/components/bitrix/forum.interface/templates/popup/script.js"></script> <title>...</title> <!--[if IE]> <link rel="stylesheet" type="text/css" href="/bitrix/templates/site/ie.css"> <![endif]--> <script type="text/JavaScript" src="/bitrix/templates/site/js/jquery-1.3.2.min.js"></script> <script type="text/JavaScript" src="/bitrix/templates/site/js/jquery-ui-1.7.custom.min.js"></script> <script type="text/javascript" src="/bitrix/templates/site/js/jquery.fisheye_cp1251.js"></script> <script type="text/JavaScript" src="/bitrix/templates/site/js/lib.js"></script> <!--[if lt IE 7]> <style type="text/css"> .dock img { behavior: url(/bitrix/templates/site/js/iepngfix.htc) } </style> <![endif]-->

Head CMS Scriptum:
<link rel="stylesheet" type="text/css" href="jsmin.php?q=style.css" media="screen" /><script src="jsmin.php?q=jscripts/jq.js,scripts.js,modules/ajax_request/ajax.js" type="text/javascript"></script><title>...</title><meta http-equiv="Content-Language" content="ru" /><meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /><meta name="generator" content="CMS Scriptum 0.1"/><meta name="keywords" content="" /><meta name="description" content="" /><script type="text/javascript">var abspath = '/'; var ajax_links_test = /^http:\/\/(?:index\.php)?[?]?([^.]*?)(?:\.htm|\.html)?$/;</script>

© RPG