1 - Минимизация HTTP-запросов:
Большинство времени при загрузке страницы у пользователя занимает загрузка всех компонетов страницы: HTML структура страницы, JS скрипты, CSS, изображения, флеш и т.д. Снижение числа компонентов в разы снижает число HTTP запросов. Это ключевой фактор к быстрой загрузке страницы. Объединяйте Javascript в один и CSS файлы в одну цсс-ку. Например, 10 JS-файлов = 10 HTTP запросов, 1 JS-файл = 1 запрос, притом большинство браузеров остановит загрузку остальных елементов страницы, пока каждый файл JavaScript загружается и обрабатывается. Используйте СSS-спрайты, их использование поможет снизить количество запросов картинок, которые используются фоном.
2 - Использование компрессии:
Наиболее популярным методом компресии есть Gzip. Применять компрессию можно к HTML, CSS, JS, но изображения и PDF-файлы лучше не сжимать Gzip, поскольку они уже сжаты. Попытка сжать их с помощью Gzip потенциально только может увеличить размеры файла. В Drupal используются модули CSS Gzip и Javascript Aggregator.
3 - Минимизация JavaScript и CSS:
Минимизацией является практика удаления ненужных символов из кода, чтобы уменьшить его размер таким образом улучшая время загрузки. В коде уменьшенной версии файла все комментарии будут удалены, а также ненужные пробельные символы (пробел, новая строка, и табуляции). В случае JavaScript, это повышает производительность и время отклика, поскольку размер загружаемого файла уменьшается. Двумя самыми популярными инструментами для минимизации кода JavaScript являются JSMin и YUI Compressor. Компрессор YUI может также уменшать CSS. В Drupal можно использовать модуль Javascript Aggregator. В Drupal 7 минимизация цсс включается автоматически, при включении компрессии css.
4 - Правильный порядок подключения стилей и скриптов в документ:
Первыми в теге
страницы дожны идти метатеги и
. После них должны быть расположены таблицы стилей. Это объясняется тем, что многие браузеры, включая Internet Explorer блокируют рендеринг, чтобы избежать необходимости перерисовки элементов страницы, если их стили изменятся. Пользователь будет видеть белый екран, пока стили не начнут загружаться.</p>
<p><span style="white-space: pre;"> </span>Пропишите JS скрипты после всех елементов <head>. Проблема, вызванная сценариями является такой, что они блокируют параллельную загрузку. Спецификации HTTP/1.1 предполагает, что браузеры скачивают не более двух компонентов параллельно из одного хоста. Если сценарий загружается, браузер не будет начинать любые другие загрузки, даже из разных хостов. По этому, если это возможно, вынесите все возможные скрипты в самый низ документа.</p>
<p><strong>5 - Избегайте CSS Выражений и фильтров:</strong></p>
<p><span style="white-space: pre;"> </span>CSS выражения - мощный и опасный инструмент динамичного изменения CSS. Они поддержываются Internet Explorer с 5 по 7 версии.<span style="white-space: pre;"> </span>Проблема с <span style="white-space: pre;"> </span>выражения в том, что они выполняются более часто, чем большинство людей думают. Мало того, что они выполняются, когда страница отображается и изменяется, но и когда страница прокручивается и даже тогда, когда пользователь перемещает курсор мыши на странице. Добавление счетчика в CSS выражение позволяет отслеживать, когда и как часто CSS выражения выполняются. Перемещение мыши по странице может легко создавать более 10000 выполнений выражения. Если вам нужно использовать CSS выражения, помните, что они могут влиять на производительность вашей страницы. </p>
<p><span style="white-space: pre;"> </span>Проблемой с фильтром AlphaImageLoader (исправление проблемы с полупрозрачным PNG в IE версий <7) является то, что он блокирует рендеринг и "заморажывает" окно браузера, когда изображение загружается. Это также увеличивает потребление памяти и применяется для каждого элемента, а не на изображение, так что проблема умножается. Лучше всего избегать AlphaImageLoader полностью и использовать PNG8, вместо потери производительности в IE. Если вам абсолютно необходим фильтр AlphaImageLoader, используйте хак с подчеркиванием _filter, чтобы не наказывать вашых IE7+ пользователей (если у вас есть оддельный CSS файл для всех IE) или, найлучшый вариант, вы можете использовать JavaScript. </p>
<p> </p>
<p><strong>6 - Используйте внешние JavaScript и CSS:</strong></p>
<p><span style="white-space: pre;"> </span>Использование внешних файлов усокоряет скорость загрузки страницы, поскольку JavaScript и CSS файлы кэшируются в браузере. JavaScript и CSS, которые встроены в документах HTML получить скачиваются каждый раз, когда запрашивается документ HTML. Единственное исключение, где встронные стили могут быть предпочтительным, это домашняя страница, когда есть несколько (возможно, только один) просмотров страницы за сессию, тогда Вы можете обнаружить, что встраивание JavaScript и CSS приводит к более быстрой загрузке у конечных пользователей. </p>
<p> </p>
<p><strong>7 - Удаление повторяющихся скриптов:</strong></p>
<p><span style="white-space: pre;"> </span>Очень плохо для производительности это включить JavaScript файл дважды на одной странице. Это не так необычно, как Вы могли бы подумать. Yahoo! пишет что в 2 из 10 топ американсих сайтах было найдено повторение одного Javascript. В Internet Explorer, если внешний скрипт <span style="white-space: pre;"> </span>включен два раза и не кэшируем, это порождает два HTTP-запроса в течении загрузки страницы. Даже если сценарии кэшируемые, дополнительные запросы HTTP появляются, когда пользователь перезагружает страницу. </p>
<p> </p>
<p><strong>8 - Пост-загрузка компонентов:</strong></p>
<p><span style="white-space: pre;"> </span>JavaScript является идеальным кандидатом для расщепления до и после события. Например, если у вас есть JavaScript код и библиотеки, для перетягивания и анимации, они могут подождать, потому что перетаскивания элементов на странице проходит после начального рендеринга. Другие кандидаты на пост-загрузку включают скрытое содержание (контент, который появляется после действий пользователя) и выпадающие изображения. Пост-загрузка хороша, когда она используется вместе с другими наилучшими практиками веб-разработки. В этом случае, идея прогрессивного улучшения говорит нам, что JavaScript, если поддерживается, может улучшить юзабилити, но вы должны убедиться, что страница работает даже без JavaScript. Так, после того как вы убедились, что страница работает нормально, вы можете увеличить юзабилити с некоторыми пост-загруженными сценариями, которые дают вам больше излишеств, таких как перетягивание и анимации. </p>
<p> </p>
<p><strong>9 - Предварительная загрузка:</strong> </p>
<p><span style="white-space: pre;"> </span>С помощью предварительной загрузки Вы можете передать цсс стили, картинки или скрипты, которые на данной странице не используются, но которые понадобятся ему на следующих. Это уменьшает скорость загрузки на данной странице, но на следуюющих, эти элементы будут уже закешированны браузером пользователя.</p>
<p><span style="white-space: pre;"> </span>Есть действительно несколько типов предварительной загрузки: </p>
<p><span style="white-space: pre;">- </span>Безусловная предзагрузка - как только происходит подгрузка елементов, вы идете вперед и загружаете некоторые дополнительные компоненты. Проверьте google.com для примера того, как загружается спрайт изображений. Этот спрайт изображений не требуется на google.com главной странице, но он необходим на последовательных страницах результатов поиска. </p>
<p><span style="white-space: pre;">- </span>Условные преднагрузки - на основе действий пользователя вы делаете обоснованное предположение, куда пользователь попадет далее и делаете предзагрузки соответственно.</p>
<p><span style="white-space: pre;">- </span>Ожидаемые предзагрузки - подгузка идет заранее до начала реорганизации. Часто бывает, после доработки, что вы слышите: "новый сайт это здорово, но это медленнее, чем раньше". Частью проблемы может быть то, что пользователи имели возможность посетить ваш старый сайт с полным кэш, но новых елементов всегда нет в кэше. Вы можете уменьшить этот побочный эффект путем предварительной загрузки некоторых компонентов, прежде чем вы даже начали редизайн. Ваш старый сайт может использовать время, пока браузер находится в режиме ожидания и подгружать стили, картинки и сценарии, которые будут использоваться на новом сайте. </p>
<p> </p>
<p> </p>
<p><strong>10 - Сократите количество элементов DOM:</strong></p>
<p> Большое количество элементов DOM может быть признаком того, что есть нечто, что должно быть улучшено с разметки страницы без необходимости удаления содержимого. Используете ли вы вложенные таблицы для разметки? Вы делали больше <div> только для устранения вопросов по макету? Может есть лучший и более семантически правильный способ сделать разметку? Например, используйте <div> только тогда, когда это имеет смысл семантически, и не потому, что он делает новую строку. </p>
<p><span style="white-space: pre;"> </span>Число элементов DOM легко проверить, просто введите в консоли Chrome Devtools: </p>
<p><span style="white-space: pre;"> </span>document.getElementsByTagName ('*'). lenght </p>
<p><span style="white-space: pre;"> </span>А сколько DOM элементов слишком много? Проверьте другие подобные страницы, которые имеют хорошую разметку. </p>
<p> </p>
<p><strong>11 Минимизируйте количество iframe:</strong></p>
<p><span style="white-space: pre;"> </span>Iframes позволяют документ HTML включить в основной документ. Важно понять, как фреймы работают, таким образом эффективно использовать их. </p>
<p>Плюсы <iframe>:</p>
<ul>
<li>Помогает при медленных сторонних приложениях: напр. баннеры</li>
<li>Безопасность</li>
<li>Скачивание сценариев параллельно </li>
</ul>
<p>Минусы <iframe>:</p>
<ul>
<li>Дорогостоящие даже если пустой </li>
<li>Блокирует загрузку страницы</li>
<li>Не семантически</li>
</ul>
<p> </p>
<p><strong>12 Оптимизация изображений:</strong></p>
<p><span style="white-space: pre;"> </span>Используйте GIF-файлы для очень маленькой или простой графики (например, менее чем 10x10 пикселей, или цветовой палитры менее 3-х цветов) и для изображений, которые содержат анимацию. Попробуйте преобразование GIF-файлы в PNG-и посмотрите, если есть сбережения. Чаще всего, есть. Разработчики часто не решаются использовать PNG-изображения из-за ограниченной поддержки в браузерах, но это уже дело прошлого. Единственной реальной проблемой является альфа-прозрачность PNG-изображений в истинном цвете, но с другой стороны, GIF тоже не истинный цвет и не поддерживает переменную прозрачность вообще. Так что все что можно сделать на GIF, PNG (PNG8) могут сделать тоже (за исключением анимации). </p>
<p><span style="white-space: pre;"> </span>Используйте файлы JPG для всех изображений фотографического стиля. </p>
<p><span style="white-space: pre;"> </span>Не используйте BMP или TIFF. </p>
<p><span style="white-space: pre;"> </span>Используйте инструмент оптимизатора PNG на все ваши PNG-файлы и JPEG оптимизатор (например smush.it)</p>
<p><span style="white-space: pre;"> </span>Вы должны видеть выгоду для любого файла, который может быть сокращен на 25 байт или больше (если меньше, это не приведет к заметному приросту производительности). </p>
<p><span style="white-space: pre;"> </span>Организируйте изображения в спрайт горизонтально, в отличие от вертикального спрайта он обычно получается меньшый размер файла. </p>
<p><span style="white-space: pre;"> </span>Сочетание цветов в аналогичных спрайт поможет вам сохранить количество цветов на низком уровне, идеально ниже 256 цветов так, чтобы вписаться в PNG8. </p>
<p><span style="white-space: pre;"> </span>Не оставляйте большие пробелы между изображениями в спрайте. Это не сильно влияет на размер файла, но требует меньше памяти для браузера пользователя для распаковки изображения в пиксель карту. 100x100 изображения составляет 10 тыс. пикселей, а 1000x1000 составляет 1 млн. пикселей. </p>
<p><span style="white-space: pre;"> </span>Не используйте большее изображение, чем нужно, то есть не переопределяйте размеры картинки с помощью HTML. Если вам нужно <span style="white-space: pre;"> </span><img width="100" height="100" src="yolka.png" alt="Yolka" />, Ваше изображение должно быть размерами 100x100px, а не 500x500px сжатое до 100x100 аттрибутами width & height.</p>
<p>Статья написана по материалам Best Practices for Speeding Up Your Web Site и Web Performance Best Practices. </p>
<comments href="/blog/nemnogo-teorii-pro-optimizatsiyu-skorosti-zagruzki-stranitsy" numposts="10" width="478" publish_feed="true"></comments> </div>
</div>
<!-- /#node-358 -->
</div>
</div>
<!-- /content-inner -->
</div>
<!-- /content -->
</div>
<!-- /content-wrapper -->
<div id="sidebar_right">
<!-- start block.tpl.php -->
<div class="block-wrapper odd">
<div id="block-views-blog-block_2" class="block block-views">
<h2 class="title block-title pngfix">Последние публикации</h2>
<div class="content">
<div class="view view-blog-block_2 view-blog view-style-normal view-id-blog view-display-id-block_2">
<div class="view-content">
<div class="views-row-1 views-row-odd views-row-first">
<div class="views-field-title">
<span class="field-content"><a href="/blog/creating-formatter-cck-field">Создание форматтера для CCK-поля</a></span>
</div>
</div>
<div class="views-row-2 views-row-even">
<div class="views-field-title">
<span class="field-content"><a href="/blog/start-servisa-drupalguide">Старт сервиса DrupalGuide</a></span>
</div>
</div>
<div class="views-row-3 views-row-odd">
<div class="views-field-title">
<span class="field-content"><a href="/blog/sass">SASS (Syntactically Awesome StyleSheets)</a></span>
</div>
</div>
<div class="views-row-4 views-row-even">
<div class="views-field-title">
<span class="field-content"><a href="/blog/ctools-multistep-wizard-example">Создание многошаговых форм используя ctools multistep wizard</a></span>
</div>
</div>
<div class="views-row-5 views-row-odd">
<div class="views-field-title">
<span class="field-content"><a href="/blog/career-fair">Наше участие в "Ярмарке карьеры"(ФОТО)</a></span>
</div>
</div>
<div class="views-row-6 views-row-even">
<div class="views-field-title">
<span class="field-content"><a href="/blog/ctools-modal-api">Ctools modal API. Пример использования</a></span>
</div>
</div>
<div class="views-row-7 views-row-odd">
<div class="views-field-title">
<span class="field-content"><a href="/blog/drupal-states">#states: Мощное улучшение для разработки интерфейса пользователя в Drupal 7</a></span>
</div>
</div>
<div class="views-row-8 views-row-even">
<div class="views-field-title">
<span class="field-content"><a href="/blog/commercebox-besplatnyi-distributiv-internet-magazina-na-osnove-drupal-7-i-drupal-commerce">CommerceBox — бесплатный дистрибутив интернет-магазина на основе Drupal 7 и Drupal Commerce</a></span>
</div>
</div>
<div class="views-row-9 views-row-odd">
<div class="views-field-title">
<span class="field-content"><a href="/blog/xml-rpc-v-drupal-7">XML-RPC в Drupal 7</a></span>
</div>
</div>
<div class="views-row-10 views-row-even views-row-last">
<div class="views-field-title">
<span class="field-content"><a href="/blog/titanium-appcelerator-mobile-for-android-1">Создание приложения для Android OS на платформе Titanium Appcelerator. Часть 1. Первое знакомство</a></span>
</div>
</div>
</div>
</div> </div>
</div>
</div>
<!-- /end block.tpl.php -->
<!-- start block.tpl.php -->
<div class="block-wrapper even">
<div id="block-views-blog-block_3" class="block block-views">
<h2 class="title block-title pngfix">Популярные статьи</h2>
<div class="content">
<div class="view view-blog-block_3 view-blog view-style-normal view-id-blog view-display-id-block_3">
<div class="view-content">
<div class="views-row-1 views-row-odd views-row-first">
<div class="views-field-title">
<span class="field-content"><a href="/blog/sozdanie-prostogo-modulya-field-api-v-drupal-7">Создание простого модуля с использованием Field API в Drupal 7</a></span>
</div>
</div>
<div class="views-row-2 views-row-even">
<div class="views-field-title">
<span class="field-content"><a href="/blog/titanium-appcelerator-mobile-for-android-1">Создание приложения для Android OS на платформе Titanium Appcelerator. Часть 1. Первое знакомство</a></span>
</div>
</div>
<div class="views-row-3 views-row-odd">
<div class="views-field-title">
<span class="field-content"><a href="/blog/database-api">Построение запросов с использованием Database API</a></span>
</div>
</div>
<div class="views-row-4 views-row-even">
<div class="views-field-title">
<span class="field-content"><a href="/blog/display-pdf-file">Отображение PDF-файла</a></span>
</div>
</div>
<div class="views-row-5 views-row-odd views-row-last">
<div class="views-field-title">
<span class="field-content"><a href="/blog/google_and_pagespeed">Google и скорость загрузки страниц Вашего сайта</a></span>
</div>
</div>
</div>
</div> </div>
</div>
</div>
<!-- /end block.tpl.php -->
</div>
<!-- /sidebar_right -->
</div>
<!-- /inmain-wrapper -->
</div>
<!-- /main-wrapper -->
</div>
<!-- /main -->
</div>
<!-- /page -->
<!--<div class="yolka"><img src="/sites/all/themes/internetdevels/i/yolka.png" alt="yolka" width="164" height="238"/></div>-->
<div id="footer" class="clearfix">
<div id="infooter" class="clearfix every">
<!-- start block.tpl.php -->
<div class="block-wrapper odd">
<div id="block-block-33" class="block block-block">
<div class="content">
© 2007-2012 Internetdevels ® </div>
</div>
</div>
<!-- /end block.tpl.php -->
</div>
</div>
<!-- /footer -->
<div id="fb-root"> </div>
</body>
</html>
