Способы ускорения загрузки страниц

Главная идея ускорения загрузки веб-страницы заключается не только в уменьшении объема файлов разными средствами, но также в использовании определенных методик, позволяющих добиться появления основного содержания, которое будем называть контент, до загрузки других элементов на странице. Далее описаны некоторые действия, позволяющие достичь данной цели:

* размещайте важную информацию наверху страницы — веб-страницы загружаются сверху вниз, информация в верхней части страницы появляется раньше, нежели та, что размещается внизу. Поэтому более важные для пользователя материалы располагайте ближе к началу страницы. Чтобы заинтересовать читателя, необходимо размещать "цепляющие взгляд" заголовки над сгибом. Этот термин пришел из газет, и означает часть страницы, которую можно видеть, не прокручивая ее содержание на экране. На деле все обстоит несколько сложнее. Если макет страницы состоит из трех колонок, то загрузка их содержания произойдет не параллельно, как полагают некоторые,а последовательно;

* многократно используйте одни и те же изображения - применяйте от страницы к странице повторяющиеся графические элементы, такие как логотип и элементы навигации. При первой загрузке рисунка файл с изображением помещается в кэш браузера, и повторное использование данного рисунка ускоряет его появление на других страницах, где он встречается. Кэш — это локальное хранилище данных сайта, с которым работает браузер, он служит для более эффективной загрузки страниц. Открывать файлы с локального компьютера гораздо быстрее, чем скачивать их из Интернета. Этим и объясняется ускорение работы сайта при его последующем посещении. Задача разработчика, зная особенности кэша, заставить его работать в своих целях для ускорения загрузки страниц;

* применяйте каскадные таблицы стилей — стили позволяют существенно сократить код HTML за счет применения одного действия сразу ко всей группе атрибутов форматирования. С помощью стилей можно, например, быстро изменить вид всех заголовков. Вместо форматирования заголовка в три приема, когда сначала задается его размер, затем шрифт и, наконец, выравнивание по центру, то же самое можно сделать одновременно, применив стиль к определенному тегу. Сейчас ни один сайт не обходится без стилей в силу их удобства, гибкости и широких возможностей. Хранить стили можно в отдельном файле, подключая их к любой веб-странице. Это позволяет, редактируя один документ, изменять оформление множества страниц. Оптимизация страниц с использованием стилей происходит за счет отделения оформления от содержания и тем самым сокращения объема документов. Файл со стилем, кроме того, помещается в кэш, и его последующая загрузка происходит быстрее;

*учитывайте особенности таблиц — ограничения языка HTML породили множество неожиданных способов создания веб-страниц. К наиболее популярному приему верстки сайтов относится использование таблиц с невидимой границей. Таблица выступает в роли каркаса (модульной сетки), в ячейках которой размещается нужный материал. Использование таблиц в таком качестве противоречит ортодоксальному подходу, который утверждает, что таблицы надо использовать только там, где они действительно необходимы, и никак иначе. Однако хуже другое. Особенность таблиц такова, что пока последнее слово в самом конце таблицы не загрузится, на экране содержимое ячеек отображаться не будет. Браузеры используют такой подход, чтобы получить всю информацию о таблице для правильного форматирования ее содержимого. Если таблица велика по высоте, может пройти много времени, прежде чем мы увидим нужную информацию. Вдобавок, при усложнении макета, приходится использовать вложенные друг в друга таблицы, а это также увеличивает объем документа. Учет этих особенностей и их обход с использованием некоторых приемов позволит сократить время появления содержимого веб-страницы;

* применяйте вместо таблиц верстку с помощью слоев - вот еще один альтернативный способ ускорения загрузки страниц. Использование слоев для верстки имеет множество преимуществ по сравнению с таблицами. Основное — быстрая загрузка содержимого слоя на страницу. Видом и положением слоев гораздо легче управлять, ведь они напрямую связаны со стилями, а это уменьшает код и увеличивает гибкость в разработке сайтов. Используйте фреймы — фреймы разделяют окно браузера на отдельные области, расположенные вплотную друг к другу. В каждую из таких областей загружается самостоятельная веб-страница. С помощью фреймов веб-страница делится на два или более документа, которые обычно содержат навигацию по сайту и его контент. Механизм фреймов позволяет открывать документ в одном фрейме, по ссылке, нажатой в совершенно другом фрейме. Такое разделение веб-страницы на составляющие интуитивно понятно и логически обусловлено. Для верстки без фреймов характерно размещение на одной странице и навигации и содержания. Это увеличивает объем каждой страницы и в сумме может существенно повлиять на объем загружаемой с сайта информации. А т. к. фреймы используют разделение информации на части, страницы с ними будут загружаться быстрее. К этому совету нужно прислушиваться с осторожностью. Несмотря на указанные преимущества, количество сайтов, где используются фреймы, снижается. Это связано с определенными недостатками фреймов, такими как: плохая индексация поисковыми системами, невозможность добавления внутренних страниц сайта в Избранное браузера (прячется адрес текущей страницы), отсутствие навигации при открытии внутренних страниц напрямую и т. д. Тем не менее, несмотря на минусы, существуют области использования фреймов, где их недостатки несущественны. Сюда, например, можно от нести систему администрирования сайта или чаты;

* уменьшайте размер графических файлов — чтобы графические изображения быстрее загружались, следует уменьшать размер файлов картинок при сохранении их качества. Для оптимизации графики существуют специальные программы, позволяющие управлять различными параметрами оптимизации с учетом форматов файлов. Например, Adobe ImageReady, Ulead SmartSaver Pro, Macromedia FireWorks, Adobe Photoshop и др. Использование подобных программ позволяет подобрать наиболее подходящий формат для сохранения графического изображения и параметры его оптимизации;

* разрезайте изображения — прием разрезания изображений на фрагменты с их последующей состыковкой давно обосновался в арсенале дизайнеров. Каждый такой кусочек можно оптимизировать индивидуально, снижая общий объем всех файлов, использовать его в качестве ссылки, а также создать эффект перекатывания. Следует принимать во внимание и психологический фактор — с позиции человеческого восприятия кажется, что несколько изображений загружаются быстрее, чем одно целое;

* оптимизируйте скрипты — скриптами традиционно называют программы, которые размещены в теле веб-страницы и выполняют при ее просмотре определенные действия. Это может быть проверка данных формы, создание разного рода меню и даже небольшие игры. При создании развитого сайта без скриптов обойтись весьма сложно, для них всегда найдется работа. Скрипты, хотя и являются частью сайта, создаются не с помощью HTML, а с использованием полноценного языка программирования. Поэтому скорость выполнения скрипта недостаточно велика, ведь браузеру требуется время для его анализа и интерпретации. Если в коде содержится ошибка, то загрузка веб-страницы замедляется. К оптимизации скриптов подходят двояко — уменьшая код программы и делая ее более эффективной;

* оптимизируйте код веб-страниц — существует множество различных советов и хитростей, как ускорить загрузку веб-страницы, уменьшив ее код. В итоге общий объем всех документов может существенно сократиться, и загрузка контента будет происходить быстрее.

Динамичный сайт

Представьте, что вам требуется создать сайт с разделами, подразделами и десятком статей. Самый простой путь — взять программу для редактирования веб-страниц, построить в ней отдельные документы и связать их между собой. Многие разработчики сайтов начинают именно так. Ведь современные редакторы обладают развитыми средствами верстки, работы с шаблонами, отслеживания ошибок и многими другими. Однако наступает период, когда возможностей обычного HTML становится недостаточно. Хочется добавить на сайт голосование, гостевую книгу, способ писать комментарии к статьям, в общем, то, что можно встретить на множестве других веб-страницах. При увеличении количества документов увеличивается также и вероятность возрастания различных ошибок. Все это приводит к тому, что требуется система, которая бы расширяла возможности сайта, упрощала наполнение контента и автоматизировала процесс построения навигации. Так мы приходим ко второму способу построения сайта — через динамическое управление содержанием. Подход к формированию и отправке браузеру документа для динамичных сайтов повторяет этапы работы со статичным сайтом, за исключением серверной стороны. Процесс состоит из следующих шагов.

1. Посетитель запрашивает веб-страницу, указывая в браузере ее адрес.

2. Веб-сервер определяет, что запрашиваемый документ является CGI-npoграммой и запускает его интерпретатор.

3. CGI-программа обращается к базе данных и запрашивает требуемую информацию.

4. База данных возвращает результат запроса обратно в программу.

5. Программа анализирует полученную информацию и сохраняет ее в одной или нескольких переменных. Затем текст выводится на экран с помощью специальных функций.

6. Окончательно сформированный программой код HTML отправляется на веб-сервер, который пересылает его посетителю.

7. Браузер принимает данные и интерпретирует их согласно внутреннему алгоритму.

8. Происходит отображение веб-страницы в окне браузера пользователя.

Динамичный сайт характеризуется двумя составляющими — CGI-программой и работой с базой данных. Аббревиатурой CGI (Common Gateway Interface, общий шлюзовый интерфейс)обозначается протокол, с помощью которого любые внешние программы взаимодействуют с веб-сервером. С помощью CGI на сервере можно выполнять программы на любом языке программирования и результат их действия выводить в виде веб-страницы. Наиболее популярны следующие языки -- Perl, PHP, Си. Написанная на этих языках программа позволяет обращаться к базе данных и манипулировать информацией, которая в ней хранится. Для ускорения работы динамичных сайтов серьезное внимание следует уделить следующим моментам: По оптимизации кода программы — чем быстрее выполняется программа на сервере, тем быстрее результат ее работы будет отправлен пользователю. Однако часто это проще сказать, чем реализовать.

Оптимизация программы представляет собой комплекс мер по уменьшению размера кода и ускорению ее работы и требует от разработчика глубоких знаний принципов программирования и высокой квалификации. С другой стороны, меры по оптимизации программ снижают время ожидания посетителей сайта и повышают эффективность работы сайта; По снижению количества обращений к базе данных — база данных используется для хранения информации, которая затем выводится в веб-документе. Содержимым базы удобно манипулировать, извлекая, добавляя и изменяя данные. Кроме того, современные системы управления базами данных одновременно поддерживают множество запросов, что позволяет обслуживать синхронно несколько пользователей. Тем не менее при увеличении количества посетителей сайта, а соответственно, и числа запросов, происходят задержки при обращении к базе данных и снижение скорости работы сайта. Чтобы этого не случилось, уменьшите количество запросов к базе. Это можно осуществить с помощью следующих средств:

• использованием cookie — данный термин переводится как "печенье", но поскольку это название лишь сбивает с толку, его оставляют без перевода. Технология cookie позволяет сохранять техническую информацию на локальном компьютере посетителя в виде небольших текстовых файлов. Cookie можно использовать для сохранения даты последнего посещения читателя, паролей, значений переменных, а также любой информации о действиях посетителя на сайте. Такой метод позволяет снизить нагрузку на веб-сервер, обращаясь к информации, хранимой на локальном компьютере, что значительно быстрее запросов к веб-серверу или базе данных;

• переходом на HTML-документы — большая часть информации, вроде текстов статей, в базе данных изменяется довольно редко. Поэтому веб-страницу, полученную динамически с помощью программы, можно сохранить как обычный HTML-файл. Сохранение делается автоматически один или несколько раз в сутки, в те часы, когда поток посетителей наименьший. Конечно, такие веб-страницы теряют часть своей интерактивности по сравнению со страницами, которые формируются динамически в ответ на запрос пользователя. Но найти документы с неизменяемым содержанием и перевести их в готовые HTML-файлы можно всегда. Этим достигается высокая скорость доступа к сайту из-за того, что веб-сервер выполняет меньше запросов к базе;

• оптимизацией запросов — под этим будем понимать написание такого текста запроса, который позволяет максимально быстро получить необходимые данные из базы без вторичного обращения к ней и без существенного увеличения нагрузки на сервер базы данных. По оптимизации SQL-запросов -- команды, которые направляются к базе данных, называются запросами, они пишутся на специальном языке SQL (Structured Query Language — структурный язык запросов). SQL — это стандартный язык для интерактивного взаимодействия с базами данных. Скорость получения запрашиваемых данных зависит от множества характеристик: типа базы данных, индексации полей таблиц, объема информации и др. Вместе с тем, бесспорно, что чем точнее и правильней выражен запрос, тем быстрее данные будут переданы из базы в программу. При этом следует избегать необязательных запросов, а использовать в коде программы переменные для временного хранения часто запрашиваемых величин. Кроме того, для повторного использования результатов запросов, их можно помещать в кэш — временное место на диске или оперативной памяти для хранения промежуточных итогов. Создание динамичных сайтов -- достаточно трудоемкая процедура, поскольку требует от разработчика множества знаний по программированию, SQL и базам данных. Запас знаний должен быть достаточно обширен, чтобы с легкостью оптимизировать для быстрого исполнения любые модули. Понятно, что добиться быстрой и эффективной работы собственной программы непросто, поэтому большой популярностью пользуются готовые системы управления контентом (CMS, Content Management System), в которые уже включены все необходимые блоки. Вопрос о том, насколько высока производительность готовых CMS, достаточно сложен, но их разработчики стараются не пропускать эту тему и делают все возможное, чтобы обеспечить максимальную скорость передачи информации пользователю.

Принципы ускорения загрузки документов 

Главная идея ускорения загрузки веб-страницы заключается не только в уменьшении объема файлов разными средствами, но также в использовании определенных методик, позволяющих добиться появления основного содержания, которое будем называть контент, до загрузки других элементов на странице. Далее описаны некоторые действия, позволяющие достичь данной цели:

* размещайте важную информацию наверху страницы — веб-страницы загружаются сверху вниз, информация в верхней части страницы появляется раньше, нежели та, что размещается внизу. Поэтому более важные для пользователя материалы располагайте ближе к началу страницы. Чтобы заинтересовать читателя, необходимо размещать "цепляющие взгляд" заголовки над сгибом. Этот термин пришел из газет, и означает часть страницы, которую можно видеть, не прокручивая ее содержание на экране. На деле все обстоит несколько сложнее. Если макет страницы состоит из трех колонок, то загрузка их содержания произойдет не параллельно, как полагают некоторые,а последовательно;

* многократно используйте одни и те же изображения - применяйте от страницы к странице повторяющиеся графические элементы, такие как логотип и элементы навигации. При первой загрузке рисунка файл с изображением помещается в кэш браузера, и повторное использование данного рисунка ускоряет его появление на других страницах, где он встречается. Кэш — это локальное хранилище данных сайта, с которым работает браузер, он служит для более эффективной загрузки страниц. Открывать файлы с локального компьютера гораздо быстрее, чем скачивать их из Интернета. Этим и объясняется ускорение работы сайта при его последующем посещении. Задача разработчика, зная особенности кэша, заставить его работать в своих целях для ускорения загрузки страниц;

* применяйте каскадные таблицы стилей — стили позволяют существенно сократить код HTML за счет применения одного действия сразу ко всей группе атрибутов форматирования. С помощью стилей можно, например, быстро изменить вид всех заголовков. Вместо форматирования заголовка в три приема, когда сначала задается его размер, затем шрифт и, наконец, выравнивание по центру, то же самое можно сделать одновременно, применив стиль к определенному тегу. Сейчас ни один сайт не обходится без стилей в силу их удобства, гибкости и широких возможностей. Хранить стили можно в отдельном файле, подключая их к любой веб-странице. Это позволяет, редактируя один документ, изменять оформление множества страниц. Оптимизация страниц с использованием стилей происходит за счет отделения оформления от содержания и тем самым сокращения объема документов. Файл со стилем, кроме того, помещается в кэш, и его последующая загрузка происходит быстрее;

*учитывайте особенности таблиц — ограничения языка HTML породили множество неожиданных способов создания веб-страниц. К наиболее популярному приему верстки сайтов относится использование таблиц с невидимой границей. Таблица выступает в роли каркаса (модульной сетки), в ячейках которой размещается нужный материал. Использование таблиц в таком качестве противоречит ортодоксальному подходу, который утверждает, что таблицы надо использовать только там, где они действительно необходимы, и никак иначе. Однако хуже другое. Особенность таблиц такова, что пока последнее слово в самом конце таблицы не загрузится, на экране содержимое ячеек отображаться не будет. Браузеры используют такой подход, чтобы получить всю информацию о таблице для правильного форматирования ее содержимого. Если таблица велика по высоте, может пройти много времени, прежде чем мы увидим нужную информацию. Вдобавок, при усложнении макета, приходится использовать вложенные друг в друга таблицы, а это также увеличивает объем документа. Учет этих особенностей и их обход с использованием некоторых приемов позволит сократить время появления содержимого веб-страницы;

* применяйте вместо таблиц верстку с помощью слоев - вот еще один альтернативный способ ускорения загрузки страниц. Использование слоев для верстки имеет множество преимуществ по сравнению с таблицами. Основное — быстрая загрузка содержимого слоя на страницу. Видом и положением слоев гораздо легче управлять, ведь они напрямую связаны со стилями, а это уменьшает код и увеличивает гибкость в разработке сайтов. Используйте фреймы — фреймы разделяют окно браузера на отдельные области, расположенные вплотную друг к другу. В каждую из таких областей загружается самостоятельная веб-страница. С помощью фреймов веб-страница делится на два или более документа, которые обычно содержат навигацию по сайту и его контент. Механизм фреймов позволяет открывать документ в одном фрейме, по ссылке, нажатой в совершенно другом фрейме. Такое разделение веб-страницы на составляющие интуитивно понятно и логически обусловлено. Для верстки без фреймов характерно размещение на одной странице и навигации и содержания. Это увеличивает объем каждой страницы и в сумме может существенно повлиять на объем загружаемой с сайта информации. А т. к. фреймы используют разделение информации на части, страницы с ними будут загружаться быстрее. К этому совету нужно прислушиваться с осторожностью. Несмотря на указанные преимущества, количество сайтов, где используются фреймы, снижается. Это связано с определенными недостатками фреймов, такими как: плохая индексация поисковыми системами, невозможность добавления внутренних страниц сайта в Избранное браузера (прячется адрес текущей страницы), отсутствие навигации при открытии внутренних страниц напрямую и т. д. Тем не менее, несмотря на минусы, существуют области использования фреймов, где их недостатки несущественны. Сюда, например, можно от нести систему администрирования сайта или чаты;

* уменьшайте размер графических файлов — чтобы графические изображения быстрее загружались, следует уменьшать размер файлов картинок при сохранении их качества. Для оптимизации графики существуют специальные программы, позволяющие управлять различными параметрами оптимизации с учетом форматов файлов. Например, Adobe ImageReady, Ulead SmartSaver Pro, Macromedia FireWorks, Adobe Photoshop и др. Использование подобных программ позволяет подобрать наиболее подходящий формат для сохранения графического изображения и параметры его оптимизации;

* разрезайте изображения — прием разрезания изображений на фрагменты с их последующей состыковкой давно обосновался в арсенале дизайнеров. Каждый такой кусочек можно оптимизировать индивидуально, снижая общий объем всех файлов, использовать его в качестве ссылки, а также создать эффект перекатывания. Следует принимать во внимание и психологический фактор — с позиции человеческого восприятия кажется, что несколько изображений загружаются быстрее, чем одно целое;

* оптимизируйте скрипты — скриптами традиционно называют программы, которые размещены в теле веб-страницы и выполняют при ее просмотре определенные действия. Это может быть проверка данных формы, создание разного рода меню и даже небольшие игры. При создании развитого сайта без скриптов обойтись весьма сложно, для них всегда найдется работа. Скрипты, хотя и являются частью сайта, создаются не с помощью HTML, а с использованием полноценного языка программирования. Поэтому скорость выполнения скрипта недостаточно велика, ведь браузеру требуется время для его анализа и интерпретации. Если в коде содержится ошибка, то загрузка веб-страницы замедляется. К оптимизации скриптов подходят двояко — уменьшая код программы и делая ее более эффективной;

* оптимизируйте код веб-страниц — существует множество различных советов и хитростей, как ускорить загрузку веб-страницы, уменьшив ее код. В итоге общий объем всех документов может существенно сократиться, и загрузка контента будет происходить быстрее.