В момент открытия пользователем страницы большая часть времени уходит на загрузку всех её компонентов, таких как: 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, блокируют рендеринг, дабы уйти от необходимости перерисовывать элементы страницы при изменении их стилей. И пока стили не начнут загружаться, у пользователя перед глазами будет белый экран. Пропишите JS скрипты после всех елементов . Проблема со сценариями состоит в том, что они блокируют параллельную загрузку. Спецификация HTTP/1.1 предполагает, что браузеры скачивают из одного хоста не более двух компонентов параллельно. Если сценарий загружается, браузер не будет начинать никакие другие загрузки, даже из разных хостов. Поэтому, насколько это возможно, вынесите все скрипты в самый низ документа. 5 - Избегайте CSS Выражений и фильтров: CSS выражения - мощный и опасный инструмент динамичного изменения CSS. Они поддерживаются Internet Explorer с 5й по 7ю версии. В случае с выражениями проблема заключается в том, что они выполняются намного чаще, чем большинство пользователей полагают. Мало того что их выполнение происходит, когда страница отображается и изменяется, но также и когда страница прокручивается, и даже тогда, когда пользователь просто перемещает курсор мыши по странице. Добавление счетчика в CSS выражение позволяет проконтролировать время и отследить частотность выполнения CSS выражения. Перемещение мыши по странице может легко создавать более 10000 выполнений выражения. Если вам нужно использовать CSS выражения, помните, что они могут влиять на производительность вашей страницы. Проблема с фильтром AlphaImageLoader (исправление проблемы с полупрозрачным PNG в IE версий 6 - Используйте внешние JavaScript и CSS: Использование внешних файлов ускоряет скорость загрузки страницы, поскольку JavaScript и CSS файлы кэшируются в браузере. JavaScript и CSS, встроенные в документах HTML, скачиваются каждый раз, когда запрашивается документ HTML. Единственным исключение, когда встроенные стили могут быть более предпочтительными, есть домашняя страница, в случае нескольких (или даже одного) её просмотров за сессию. В этом случае можно обнаружить, что встраивание JavaScript и CSS приводит к более быстрой загрузке у конечных пользователей. 7 - Удаление повторяющихся скриптов: Существенно замедляет производительность ситуация, когда JavaScript файл включается дважды на одной странице. Такой сценарий не так уж и необычен, как это можно себе представить. Yahoo! утверждает, что в 2 из 10 американских сайтов из топ-листа было найдено повторение одного Javascript. В случае с Internet Explorer, если внешний скрипт включен два раза и не кэшируем, это порождает два HTTP-запроса в течение одной загрузки страницы. Даже если сценарии кэшируемые, дополнительные запросы HTTP появляются в момент загрузки страницы пользователем.

8 - Пост-загрузка компонентов:

JavaScript является идеальным кандидатом для расщепления до и после события. Например, если у вас есть JavaScript-код и библиотеки, то в момент когда выполняется перетаскивание и анимация они могут и подождать, потому что перетаскивание элементов на странице проходит после начального рендеринга. Другие кандидаты на пост-загрузку включают скрытое содержание (контент, который появляется после действий пользователя) и выпадающие изображения. Пост-загрузка работает, когда её используют вместе с другими лучшими практиками веб-разработки. В таких условиях логика улучшения подсказывает, что JavaScript - если поддерживается - может улучшить юзабилити, но следует, всё же, убедиться, что страница работает и без JavaScript. И только после того как есть уверенность в том, что страница работает нормально, можно приступать к улучшению юзабилити с использованием некоторых пост-загруженных сценариев, предлагающих большие излишества, такие как перетягивание и анимация.

9 - Предварительная загрузка:

С помощью предварительной загрузки можно передавать цсс стили, картинки или скрипты, которые на данной странице не используются, но которые могут понадобиться на следующих. Это уменьшает скорость загрузки на данной странице, но на следующих, эти элементы будут уже закешированны браузером пользователя.

На самом деле есть несколько типов предварительной загрузки:

- Безусловная предзагрузка - как только происходит подгрузка елементов, вы идёте вперед и загружаете некоторые дополнительные компоненты. Проверьте google.com на предмет того, как загружается спрайт изображений. На главной странице google.com этот спрайт изображений не требуется, но он необходим на следующих страницах результатов поиска.

- Условные предзагрузки - на основе анализа действий пользователя делается обоснованное предположение о том, куда пользователь попадёт далее и, соответственно, производятся под загрузки.

- Ожидаемые предзагрузки - подгузка идет загодя, до начала реорганизации. Часто после доработки можно услышать: "обновлённый сайт всем хорош, но работает медленнее, чем раньше". Частично, проблема объясняется тем, что пользователи имели возможность посетить ваш старый сайт, у которого кэш полон, но новых елементов в кэше никогда нет. Этот побочный эффект можно уменьшить путем предварительной загрузки некоторых компонентов, даже до того как вы начали редизайн. Ваш старый сайт может использовать время нахождения браузера в режиме ожидания и подгружать стили, картинки и сценарии, которые будут использоваться на новом сайте.

10 - Сократите количество элементов DOM:

Чрезмерное количество элементов DOM можно рассматривать как признак того, что что-то следует улучшить с помощью разметки страницы, но без удаления содержимого. Ипользуете для разметки вложенные таблицы. Или воспользовались большим количеством

с тем, чтобы снять вопросы по макету? А если попробовать лучший, более семантически правильный способ сделать разметку? Например, используя

только тогда, когда это имеет смысл семантически, а не потому, что он делает новую строку.

Количество элементов DOM легко проверить, просто введите в консоли Chrome Devtools:

document.getElementsByTagName ('*'). lenght

А как определить, что DOM элементов слишком много? Просто проверьте другие подобные страницы, те что с оптимальной разметкой.

11 - Минимизируйте количество iframe:

Iframes позволяют включить документ HTML в основной документ. Важно понять, как работают фреймы, с тем чтобы использовать их эффективно.

Плюсы :

Помогает при медленных посторонних приложениях: например, в случае с баннерами
Безопасность
Параллельное скачивание сценариев

Минусы :

Дорогостоящий, даже если пустой
Блокирует загрузку страницы
Не семантичен

12 - Оптимизация изображений:

Используйте GIF-файлы для очень маленькой или простой графики (например, менее чем 10x10 пикселей, или при наличии цветовой палитры не более чем из 3-х цветов) и для изображений, которые содержат анимацию. Попробуйте использовать преобразование GIF-файлов в PNG-и посмотрите, есть ли сохранение. Чаще всего, оно есть. Веб разработчики, зачастую, не решаются использовать PNG-изображения из-за ограниченной поддержки в браузерах, что, впрочем, уже в прошлом. Единственной реальной проблемой является альфа-прозрачность PNG-изображений в истинном цвете, но с другой стороны, GIF тоже не истинный цвет и не поддерживает переменную прозрачность вообще. Так что, все что можно сделать на GIF, могут сделать также и PNG (PNG8) (за исключением анимации).

Используйте файлы JPG для всех изображений фотографического стиля.

Воздержитесь от использзования BMP или TIFF.

Используйте инструмент оптимизатора PNG на все ваши PNG-файлы и JPEG оптимизатор (например smush.it)

Любой файл можно и нужно пытаться сократить, как минимум на 25 байт и более (если сокращать меньше, это не приведет к заметному приросту производительности).

Организуйте изображения в спрайт горизонтально. В отличие от вертикального спрайта, в горизонтальном, обычно, получается меньший размер файла.

Сочетание цветов в аналогичных спрайт поможет вам сохранить количество цветов на низком уровне, в идеале - ниже 256 цветов (так, чтобы вписаться в PNG8).

Не оставляйте большие пробелы между изображениями в спрайте. Это влияет на размер файла несущественно, но требует от браузера пользователя меньше памяти для распаковки изображения в пиксель карту. 100x100 изображения составляет 10 тыс. пикселей, а 1000x1000 составляет 1 млн. пикселей.

Не используйте большее, чем того требует ситуация, изображение. То есть, не предопределяйте размеры картинки с помощью HTML. Если вам нужно , Ваше изображение должно быть размером 100x100px, а не 500x500px сжатое до 100x100 атрибутами width & height.

Статья подготовлена на основе материалов Best Practices for Speeding Up Your Web Site.

Также по теме

Вход по SSH без пароля

Development

3805 views

SSH — сетевой протокол сеансового уровня, c помощью которого производится удалённое управление...

Пишем jQuery плагин

Development

7955 views

Если вам известно, что такое jQuery, или вы только начинаете его изучать, в любом случае рано или поздно вы заинтересуетесь тем, как написать свой jQuery плагин. А сделать это довольно...

Автоперевод текста

Development

7377 views

Довольно часто при реализации сайта необходимо обеспечить поддержку мультиязычности, т.е. возможности перевода содержимого сайта на разные языки, при этом перевод на тот или иной...

Заметка: Как отключить проверку пароля пользователя при регистрации

Development

2580 views

В Drupal по умолчанию происходит проверка пароля пользователя при регистрации. Иногда заказчики просят отключить данный механизм.

Руководство по созданию draggable-интерфеса

Development

3099 views

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

Категории

Немного теории по оптимизации скорости загрузки страницы

Также по теме

Need a quote? Let's discuss the project!