Пять способов ускорить время загрузки страниц. Как значительно ускорить загрузку страниц в браузере

Ускорение загрузки сайта стоит в одном ряду с другими элементами поисковой оптимизации. Часть вебмастеров склонна недооценивать значимость этого фактора (к счастью, таких становится все меньше), между тем, медленная работа веб-ресурса оказывает влияние не только напрямую на ранжирование страниц в поиске, но и косвенно портит карму за счет ухудшения поведенческих факторов.

Мало кому нравится ждать по 2 минуты, пока нужная информация появится в окне браузера. Результаты многочисленных исследований показывают, что пользователи без проблем готовы ждать загрузки сайта 3 секунды, если речь идет о мобильном трафике, то немного дольше – до 10 секунд. Все что дольше приводит к отказам (уходу посетителей) – люди просто переходят на следующий сайт из предложенных поисковиком.

Думаю, нет необходимости объяснять, что каждый потерянный посетитель – это потерянные деньги – меньше прибыль от рекламы и меньше продаж.

Но есть еще один момент, тесно связанный со скоростью сайта – это нагрузка на сервер, где хостится ваш ресурс. Как правило, медленная работа сайта связана с тем, что в системе протекают не оптимизированные ресурсоемкие процессы, такие как выполнение лишних скриптов или передача неоправданно больших объемов информации. Все это создает на сервера лишнюю нагрузку и хостер может попросить вас перейти на более дорогой тариф. Еще хуже, если чрезмерная нагрузка «положит» хостинг и вместо загрузки страниц (хоть и долгой) посетитель будет получать одну из 500-х ошибок сервера.

Подведем итог, ускорение сайта необходимо для:

Удержания аудитории и улучшения поведенческих факторов страниц;

Повышения ресурса в результатах поисковой выдачи;

Снижения нагрузки на хостинг.

С чего начинать работу по оптимизации

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

Там покажут как общие показатели времени загрузки страницы, объема страницы и числа запросов к хостингу, так и точные цифры по отдельным файлам, скриптам, запросам.

Из общих данных можно сделать первый вывод о срочности начала работ по ускорению:

Load time меньше 3 секунд – это хорошо,
3-10 секунд – повод для беспокойства,
больше 10 секунд – кошмар и ужас, надо срочно исправлять.

Полностью забить на работы по оптимизации можете в том случае, если страницы грузятся быстрее, чем за 1,5 секунды.

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

Кроме того, часть данных на странице может подгружаться с других сайтов. Здесь мы можем понять, какие сервисы и ресурсы портят картинку, например, у меня на скриншоте видно, что рекламные скрипты kwork (биржи фриланса), googlesindications (объявления Adsense) и rotaban (биржа банерной рекламы) создают 50% от объема передаваемых данных. Изменить внешние скрипты возможности нет, поэтому, когда вы обнаружите что-то очень тормозное, просто откажитесь от его использования, поищите аналоги.

И самая подробная информация будет на заключительной диаграмме, где показан, не только объем передаваемых данных, но и реальное время, отнимаемое каждым процессом. Первой строчкой всегда идет запрос к хостингу и получение от него ответа с html кодом страницы. В моем примере это время больше секунды – немало, но еще терпимо. При очень длинной полоске меняйте хостинг.

Самые длинные полоски показывают, что тормозит работу ресурса.

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

13 шагов для ускорения загрузки сайта

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

1. Сжатие медиафайлов

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

На среднестатистическом ресурсе файлы изображений занимают существенную долю всего контента по объему (в байтах). На иллюстрации выше видно, что у меня в блоге на главной странице, эта доля составляет почти 63% (698 кб) – это притом, что они уже оптимизированы под веб (сжаты).

Исходный объем картинок был в 2-3 раза больше и составлял бы от 1,5 до 2 мегабайт – передавать такой трафик каждому посетителю сайта тяжело как для серверного железа, так и для каналов передачи данных, особенно, когда посещаемость растет.

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

Я использую – tinypng.com , о нем и о других я писал инструкцию .

Для тех, кто эксплуатирует CMS WordPress, есть решение еще проще – ставим плагин «Compress JPEG & PNG images». Этот плагин сжимает картинки прямо на лету, при загрузке. Только не забывайте при его использовании, что сжимать надо не только те изображения, которые загружаются через библиотеку, но и те, которые вшиты в вашу тему сайта. Так что из файлов темы изображения все равно надо будет скачать и сжать вручную через сервис.

2. Кэширование страниц сайта

Многие данные на страницах сайтов выводятся динамически, то есть извлекаются из базы данных или высчитываются при каждом обращении пользователя. Выводят их разные функции, коих в любой современной CMS множество.

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

На выполнение каждого такого запроса тратятся серверные ресурсы (время). А запросов этих много и каждый раз для каждого пользователя выполняется хостингом небольшая программка.

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

Такой метод как бы превращает сложный PHP сайт в простой статичный HTML.

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

Для WordPress есть несколько плагинов, предназначенных для кэширования, один из них .

3. Кэширование данных в браузере

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

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

Задача вашего сайта, точнее его файла htaccess, сказать браузерам какие данные им нужно кэшировать (скрипты, картинки и т.д.). Причем, не нужно каждый конкретный файл прописывать, просто указываем типы (расширения).

Вот код для htaccess, просто вставьте его в свой файл:

# html и htm файлы будут храниться сутки Header set Cache-Control "max-age=43200" # css, javascript и текстовые файлы будут храниться неделю Header set Cache-Control "max-age=604800" # флэш файлы и изображения будут храниться месяц Header set Cache-Control "max-age=2592000" # Запрещаем кеширование служебных файлов Header unset Cache-Control

# Включаем кэширование в браузерах клиентов

< ifModule mod_headers.c >

# html и htm файлы будут храниться сутки

< FilesMatch "\.(html|htm)$" >

Header set Cache-Control "max-age=43200"

< /FilesMatch >

# css, javascript и текстовые файлы будут храниться неделю

< FilesMatch "\.(js|css|txt)$" >

Header set Cache-Control "max-age=604800"

< /FilesMatch >

# флэш файлы и изображения будут храниться месяц

< FilesMatch "\.(flv|swf|ico|gif|jpg|jpeg|png)$" >

Header set Cache-Control "max-age=2592000"

< /FilesMatch >

# Запрещаем кеширование служебных файлов

< FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$" >

Header unset Cache-Control

< /FilesMatch >

< /IfModule >

4. Gzip сжатие передаваемых данных

Если вы знакомы программами архиваторами, то понимаете, что упакованные по специальным алгоритмам файлы занимают меньший объем. В случае с сайтами за счет сжатия файлов по Gzip технологии объем передаваемых данных с хостинга к пользователю уменьшается, соответственно происходит быстрее загрузка.

Такая упаковка данных снижает их объем в 2-4 раза. Серверное ПО по-умолчанию умеет сжимать данные, надо включить эту функцию с помощью кода в файле htaccess:

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript

# сжатие text, html, javascript, css, xml:

< ifModule mod_deflate.c >

AddOutputFilterByType DEFLATE text / html text / plain text / xml application / xml application / xhtml + xml text / css text / javascript application / javascript application / x-javascript

< /ifModule >

Если у вас работает плагин кэширования Hyper Cache или другой, там уже может быть включено сжатие и добавлять его в htaccess нужды, в таком случае, нет.

Надо понимать, что сам процесс сжатия передаваемых данных отнимает серверные ресурсы, поэтому эффект не пропорционален степени упаковки.

5. Уменьшение количества запросов к сайту

Каждый скрипт, шриф, CSS файл и изображение, подключаемые к странице, создают отдельный запрос к хостингу. Чем больше запросов, тем больше ресурсов сервера уходит на их обработку, что отнимает время.

Мы можем объединить все 4 картинки в одну и выложить ее на хостинг, а дальше под каждую ссылку на социальную сеть выводить только часть картинки, смещая ее. Получится только 1 запрос к сайту. У меня сделано именно так, весь блок соцкнопок в сайдбаре является одной картинкой.

Аналогичным образом объединяем в один файл скрипты и CSS стили.

6. Сокращение HTML, CSS и JS

Когда составляются файлы этих форматов, кодеры всегда пишут их так, чтобы было удобно дополнять и корректировать – вставляются комментарии, делаются отступы и переносы строк. Все эти мелочи увеличивают итоговые размеры файлов, но не имеют никакого значения для обрабатывающих их браузеров.

Браузер – это программа (), которой не нужны комментарии и остальные фишки, она читает только команды в коде и одинаково обработает оба варианта:

Так что, для ускорения сайта мы можем спокойно удалить всё лишнее из итоговых версий HTML, CSS и JS файлов.

Обычно делают так: сохраняют исходник себе для будущих правок, а непосредственно на сайт выкладывают рабочую сжатую версию.

Примеры сайтов, где можно сжать код:

HTML – daruse.ru/kompressor-html-koda-onlajn
CSS – seolik.ru/minify-css
JS – seolik.ru/minify-js

7. Удаление лишних функций или замена на HTML код

Этот пункт пригодится владельцам сайтов на популярных движках WordPress, Joomla и т.д. Если сайт сделан по индивидуальному заказу, то там должно быть все оптимально сразу.

Что конкретно удалять или менять смотрите по коду в файлах сайта и по исходному коду сформированной страницы.

Для всех вариантов CMS я конкретные примеры не приведу, так как не компетентен (обратитесь к профильным специалистам), а по WordPress совет дам.

Из раздела head удаляем все скрытые ненужные ссылки, пользы от них нет, да и посетителю не видны все равно. А некоторые данные и вовсе могут стать полезной подсказкой для взломщиков.

Чтобы от них избавиться, в файле functions.php вашей темы вставляем код:

/*** Удаление лишнего из Header ***/ remove_action("wp_head","feed_links_extra", 3); remove_action("wp_head","feed_links", 2); remove_action("wp_head","rsd_link"); remove_action("wp_head","wp_generator"); remove_action("wp_head","start_post_rel_link",10,0); remove_action("wp_head","index_rel_link"); remove_action("wp_head","adjacent_posts_rel_link_wp_head", 10, 0); remove_action("wp_head","wp_shortlink_wp_head", 10, 0); remove_action("wp_head", "wlwmanifest_link");

/*** Удаление лишнего из Header ***/

remove_action ("wp_head" , "feed_links_extra" , 3 ) ;

remove_action ("wp_head" , "feed_links" , 2 ) ;

remove_action ("wp_head" , "rsd_link" ) ;

remove_action ("wp_head" , "wp_generator" ) ;

remove_action ("wp_head" , "start_post_rel_link" , 10 , 0 ) ;

remove_action ("wp_head" , "index_rel_link" ) ;

remove_action ("wp_head" , "adjacent_posts_rel_link_wp_head" , 10 , 0 ) ;

remove_action ("wp_head" , "wp_shortlink_wp_head" , 10 , 0 ) ;

remove_action ("wp_head" , "wlwmanifest_link" ) ;

Также, я заменяю на HTML функции выводящие:

- название сайта - описание сайта

- названиесайта

- описаниесайта

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

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

Одним словом, поле для оптимизации обширное, но я советую обходиться без фанатизма.

8. Оптимизация и очистка базы данных

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

Чтобы вернуть ей былую бодрость стоит периодически оптимизировать содержимое таблиц. Для этих целей входите в раздел с базами вашего хостинга, входите в phpMyAdmin – там показываются фрагментированные таблицы, выделяете их и выбираете в вариантах действий “оптимизировать”.

9. Блокировка лишней нагрузки от ботов

Обратиться к страницам вашего сайта может много кто, но среди всех возможных абонентов есть только 2 полезных:

Живой посетитель, который пришел за контентом;

Поисковый робот, заглянувший для индексации страниц.

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

Когда вредных ботов станет много – хостинг будет загибаться от непомерной нагрузки. Крайний случай – DDos атака () – положит ваш сайт вместе с хостингом.

Для блокировки настоящих DDoS атак нужны специальные меры, но беда в том, что при пренебрежении простыми инструментами блокировки лишней активности, в такую атаку превращаются любые случайные приходы ботов и хакеров.

А нем не надо тратить ресурсы на вредоносную активность, лучше сохранить их для нормальных посетителей.

К счастью, у большинства ботов есть характерные черты в именах и их можно блокировать через htaccess. Вот этот код запрещает доступ по именам агентов:

# Запрет хакерских ботов RewriteEngine on RewriteCond %{HTTP_USER_AGENT} ^$ RewriteCond %{HTTP_USER_AGENT} (|"|%0A|%0D|%27|%3C|%3E|%00) RewriteCond %{HTTP_USER_AGENT} .*(libwww-perl|wget|python|nikto|curl|scan|java|winhttp|clshttp|loader).* RewriteRule ^(.*)$ -

# Запрет хакерских ботов

RewriteEngine on

RewriteCond %{HTTP_USER_AGENT} ^ $

RewriteCond %{HTTP_USER_AGENT} (< | > | "| % 0A | % 0D | % 27 | % 3C | % 3E | % 00 )

RewriteCond %{HTTP_USER_AGENT} . * (libwww-perl | wget | python | nikto | curl | scan | java | winhttp | clshttp | loader ) . *

RewriteRule ^ (. * ) $ -

К таким файлам, как вход в админку поставьте запрет для посторонних IP. Для этого в htaccess вставляем код:

order deny,allow deny from all allow from xx.xx.xx.xx

< Files wp-login.php >

order deny , allow

deny from all

allow from xx . xx . xx . xx

< /files >

Вместо xx.xx.xx.xx – ваш ip адрес. Все запросы к этим файлам с посторонних адресов получают 403 ответ сервера (доступ запрещен). Нагрузку этот ответ создает минимальную.

По логам доступа посмотрите какие еще элементы вашего сайта притягивают внимание ботов и блокируйте их.

10. Запрет на прямое использование картинок с сайта

Бывает так, что изображение с вашего сайта решили разместить на другом ресурсе. Но не просто скачать и выложить, а прямо исходную ссылку в src оставить на ваш домен. Получается, что пользователь заходит на сайт конкурента или, еще хуже, вора контента и ему там показывается ваша картинка, подгружаемая с вашего же хостинга. Вы не получаете ничего, но тратите ресурсы своего хостинга на обслуживание сайта пирата.

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

Для этого создайте файл.htaccess в папке, где находятся ваши картинки к постам, у WordPress это wp-content/upload/. Можно использовать и основной htaccess в корне, но тогда блокироваться будут любые изображения, а вдруг вы решите разместить свой баннер на чужом сайта.

А так фильтроваться будут только картинки лежащие в определенной папке, а те файлы которые блокироваться не должны будут лежать в отдельной директории (сделайте ее, например, в корне сайта).

В файле htaccess пропишите следующий код, отклоняющий запросы на изображения, приходящие с других доменов:

RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?.(jpg|jpeg|png|gif)$ -

RewriteEngine on

RewriteCond %{HTTP_REFERER} ! ^ $

RewriteCond %{HTTP_REFERER} ! ^ http (s ) ? : / / (www \ . ) ? biznessystem . ru

RewriteRule \ . (jpg | jpeg | png | gif ) $ -

* в коде указан мой домен – поменяйте его.

Кроме простой блокировки мы можем извлечь еще и пользу – вместо исходной картинки выдавать альтернативное изображение, например с надписью о сайте источнике (бесплатная реклама для вас). Можно альтернативную картинку поместить у себя на сервере, но это, опять же, создаст дополнительную нагрузку, поэтому лучше выложить ее на какой-нибудь бесплатный фотохостинг, например radikal.ru .

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

Алгоритмы ранжирования Google учитывают скорость загрузки страницы

9 апреля 2010 года Google официально объявили о том, что в их алгоритмах учитывается скорость загрузки страницы. Слухи ходили задолго до этого - когда компания стала подчеркнуто внимательно относиться к скорости, выпуская продукты Chrome (быстрый браузер) и SPDY (быстрый протокол передачи веб-контента) и продвигая сверхскоростные широкополосные каналы. В этой статье мы постараемся объяснить, как Google определяет скорость, и как вы можете проверить скорость загрузки своих страниц и увеличить ее.

Мы считаем, что скорость загрузки страницы - отличное дополнение к остальному списку факторов, определяющих ранжирование страниц в Google, и на это есть две основные причины:

1. Скорость загрузки страницы крайне важна для удобства пользователей. Исследования показывают, что в голове среднего пользователя словно тикают часы, пока он ждет открытия страницы. С ростом скорости пользования интернетом вообще, ожидания в плане скорости тоже повысились. можно прочитать пост Google на тему внутреннего тестирования скорости и ее влияния. Итак,

2. Скорость загрузки страницы - это фактор, который разработчик может измерить, отследить и оптимизировать. Многое в алгоритме Google неподвластно нашему контролю, но этот показатель мы можем улучшить. Ниже перечислено несколько средств, с помощью которых можно проанализировать скорость работы сайта, а также 6 советов, как повысить скорость загрузки страниц и увеличить рейтинг.

Как Google определяет скорость?

Два основных метода анализа загрузки страницы:

1. Отклик Google-боту. GoogleBot - это программа-агент, которая сканирует ссылки по всей сети, распределяя страницы и контент по категориям и отправляя все это Google, который обрабатывает полученные данные с помощью собственного алгоритма. Google-бот просто собирает информацию, он не анализирует и не оценивает ее. Однако у него есть некоторые ограничения относительно того, насколько полно он просканирует ту или иную страницу, поскольку просмотр миллиардов страниц занимает много времени. Это одна из причин, по которым рекомендуется иметь «чистый» код, размещать хороший контент в верхней части страницы и помещать повторяющийся код (например, CSS) в отдельные файлы.

2. Время загрузки по данным Google Toolbar. Google очень агрессивно продвигает и популяризирует свои бесплатные инструменты. Одна из причин этому - возможность для Google использовать свою панель инструментов как платформу для анализа отдельных сайтов и страниц.

Инструменты для измерения скорости загрузки страницы

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

1. Если у вас есть аккаунт в Google Webmaster (а он у вас должен быть), то вы можете воспользоваться специальным инструментом в разделе Labs. Он позволит вам получить общее представление о том, насколько быстро грузятся ваши страницы относительно страниц других сайтов в статистике.

2. Page Speed - это плагин для браузеров Firebug/Firefox, который определяет, насколько хорошо грузится страница, и дает рекомендации по ее исправлению.

3. YSlow - еще один плагин для Firebug/Firefox, анализирующий скорость и предоставляющий рекомендации.

Что это изменение алгоритма означает для вас

Улучшение скорости загрузки страницы не так критично, как, скажем, правильные теги title, структура URL, уникальный контент или качественные входящие ссылки. Но при прочих равных у страницы, которая быстрее грузится, есть преимущество. Несомненно, быстрые страницы удобнее для пользователей, а это означает рост посещений, уменьшение показателя ненужных просмотров и увеличение количества просмотров за посещение. В любом случае, лучше сделать все возможное, чтобы ваши страницы грузились быстро.

6 способов повысить скорость загрузки страниц и увеличить рейтинг

1. Оптимизируйте изображения: крупные картинки можно обрезать, сжать и увеличить скорость их загрузки.
2. Вместо фоновых изображений используйте просто цвета: так загрузка будет происходить быстрее.
3. Пользуйтесь кэшем: кэширование удобно для пользователей, поскольку картинки и другие статичные файлы загружаются только при первом посещении, а при последующих этого уже не требуется.
4. Загружайте внешний Javascript и вызываемые объекты в последнюю очередь: худшее, что вы можете сделать - заставить своих посетителей ждать, пока загрузится весь контент одновременно. По возможности сделайте так, чтобы ваш контент грузился первым, а внешний контент - после него.
5. Пользуйтесь отдельными файлами для повторяющегося кода: отдельные файлы чаще всего используются с таблицами стилей CSS и позволяют облегчить html-код страницы (меньше строк кода), а также дают центральный, легко находимый файл для внесения изменений в важные участки кода (например, в таблицы стилей).
6. Для организации страниц используйте стили CSS вместо таблиц HTML: прежде чем загружать саму таблицу, веб-браузеры (IE, Firefox и др.) ждут, пока загрузится весь ее контент. CSS делает этот процесс быстрее (и проще для обновления).

1. Выберите один из приведенных выше инструментов и установите его.
2. Проведите тестирование скорости загрузки для главной и еще нескольких страниц разных типов.
3. Определите, какие компоненты можно улучшить. Обсудите это с вашими техническими сотрудниками и с вебмастером.
4. Для сравнения проведите те же тесты со страницами конкурентов.

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

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

1. Используйте YSlow для отслеживания времени загрузки страниц

Зная количество времени, которое тратится на загрузку страниц, вы сможете определить проблемные места. Также это придаст вам ещё один стимул, для того чтобы залезть в функционал и постараться исправить ситуацию.

Перед тем как мы начнём, вам необходимо установить YSlow, если вы уже конечно этого не сделали. YSlow - это расширение к Mozilla Firefox, которое вы сможете найти на этой странице:

Теперь давайте откроем какой-то сайт. Допустим Six Revisions, для того чтобы данные у нас были примерно одни и те же (просто откройте данный сайт в новой вкладке вашего браузера).

В нижней правой стороне вашего браузера, у вас находится специальная панель с иконкой (смотрите рисунок 1). Чуть поодаль данной панели, после загрузки страницы, рядом с ‘YSlow’ вы увидите число. Данное число - это время загрузки данной страницы в секундах в вашем браузере. Нам необходимо, чтобы данное число было как можно меньше.

Самыми часто встречаемыми «тормозилами» являются следующие объекты или операции:

Слишком много HTTP запросов
Не сжатые файлы JavaScript
Отсутствие времени истечения заголовков для графических файлов

Через несколько минут мы подробнее на этом остановимся.

Для того чтобы освоиться в этой системе, пройдитесь по нескольким сайтам и посмотрите время их загрузки. Можете протестировать сайты Google, Facebook, и парочку ваших любимых блогов/сайтов, где вы чаще всего бываете. Обратите внимание, что больше всего на скорость влияют JavaScript файлы и изображения.

Используем YSlow на полную

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

Для получения подобной информации нажмите на вкладку Performance. После сканирования сайта, YSlow выдаст вам общую оценку, которая будет характеризовать производительность вашей страницы.

Доступ к информации можно ускорить с помощью CDN (сеть доставки контента). CDN лучше использовать для крупных сайтов. Используются они для того чтобы распределять информацию через несколько серверов в разных частях мира. Таким образом, информация будет загружаться с соответствующего сервера (который ближе всего к пользователю), чтобы не проходить через личные маршрутизаторы. YSlow также отслеживает запросы CDN.

Но люди, как правило, не используют CDN (что является довольно-таки дорогим удовольствием).

Классификация типов ошибок

Теперь давайте пройдёмся по каждому пункту, которые есть в выше упомянутом расширении. Далее вы найдёте краткое содержание того, по каким критериям оцениваются ваши страницы и пути решения проблем для достижения максимальной производительности.

Делайте как можно меньше HTTP запросов: HTTP запрос происходит, когда браузер посылает запрос на сервер. То же самое может происходить при подключении скриптов, файлов CSS, изображений, а также при асинхронных запросах, как со стороны клиента, так и со стороны сервера (Ajax и другие подобные технологии). Однако когда речь заходит о производительности системы, то стоит задуматься о том, сколько подобных запросов происходит у вас на странице. В качестве решения можно применить кэширование, чтобы помочь клиентским машинам быстрее подгружать скрипты, CSS и изображения.

Добавление заголовков Expires: 80% загрузки страницы ориентировано на скачивание скриптов, фотографии и файлов CSS. В большинстве случаев данные вещи не меняются на пользовательских машинах. Добавив немного коду в ваш файл.htaccess, вы можете кэшировать дублирующийся файлы на локальной машине пользователя (о том, как это сделать мы поговорим позже).

Компоненты Gzip: Применение Gzip или сжатие JS файлов, изображений, HTML документов, CSS файлов, и т.д. позволяет пользователям скачивать информацию в уменьшенном размере, что значительно увеличивает скорость загрузки страниц. К тому же это позволит сохранить место на сервере, однако распаковка данных может привести к торможению ответа, и напрямую зависит от браузера пользователя.

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

Размещайте JS в нижней части страницы: теперь, когда ваши CSS файлы будут загружаться вверху, самое время расположить скрипты JS прямо перед закрытием тега. Это позволит вашей странице отобразиться, а затем подключить необходимые скрипты.

Избегайте CSS выражений: я лично никогда не использовал CSS выражения (ещё их называют динамическими свойствами). Данные выражения являются собственной концепцией программирования для IE (такие как условные выражения) в CSS. Технология, которая используется в IE8, да и во всех остальных версиях больше поддерживаться не будет, так что в любом случае придётся завязывать с данным написанием CSS выражений. PHP больше подходит для подобных целей, к примеру, для того, чтобы загрузить разные CSS стили в зависимости от какого-то условия, такого как случайное число, время суток или браузер пользователя.

Пишите JS и CSS в отдельных файлах: если вы располагаете ваши скрипты в JS и стили CSS в отдельных файлах, то браузер с лёгкостью сможет их закэшировать, тем самым в последующем позволит вашей странице грузиться быстрее.

Сокращайте время DNS поиска: когда пользователь набирает имя вашего сайта в строке браузера, то тут же начинается DNS поиск IP адреса, по которому находится ваш сайт. Чем больше ваш сайт содержит внешних источников, тем больше будет занимать время DNS поиск. Как правило, один такой поиск длится 60-100 миллисекунд.

Минимизируйте JS: помимо сжатия посредством gzip, минимизация JavaScript файлов позволит вам облегчить скрипты, избавившись от ненужных пробелов, табов, и других специальных знаков, которые в совокупности увеличивают размеры файлов. Это же очевидно - чем меньше файлы, тем быстрее грузятся страницы. Для минимизирования JavaScript файлов можете использовать инструмент JSMIN.

Избегайте перенаправления: не имеет никакого значения, где вы делаете перенаправление, в JS, HTML или PHP. В любом случае ваш браузер получит заголовок с пустой страницей, на загрузку которой потребуется время. Так что просто старайтесь не применять редирект там, где его можно избежать.

Избегайте дублирования загрузки скриптов: если ваш браузер загружает скрипт более одного раза, это значительно сказывается на загрузке страницы. Математика тут не сложная. Чем больше загрузок одних и тех же файлов, тем дольше загрузка страницы. Просмотрите ваши скрипты и убедитесь, что вы не вызываете jQuery 2 или 3 раза. То же самое относится и к скриптам JS.

Что же… думаю этого достаточно. Теперь давайте перейдём к следующей вкладке YSlow, перед тем как рассмотрим некоторые другие техники, которые позволят увеличить скорость загрузки ваших страниц.

Вкладка Components позволит вам определить, какие нужно приложить усилия для улучшения скорости загрузки. Тут вы найдёте информацию о том, сколько весит каждый файл, а также сколько времени ему требуется на загрузку. Также вы сможете увидеть, для каких файлов применяется gzip, узнаете время ответа, а также являются ли файлы закэшированными на пользовательской машине, и когда заканчивается сам кэш. Эта информация может вам пригодиться при оценке проблем вашего сайта, вы будете знать, что у вас не так, и что нужно оптимизировать.

И наконец, перейдём к последней вкладке Stats tab. Тут вы найдёте информацию обо всех HTTP запросах, как для обычных файлов, так и для закэшированных. Значение Empty cache показывает, что данные файлы необходимо загрузить для отображения страницы. В свою очередь Primed Cache - это файлы, которые уже были закэшированы браузером пользователя. Это означает, что их скачивать не нужно.

2. Используйте CSS спрайты для сокращения HTTP запросов

CSS спрайты - это наверное самая значительная вещь, которую придумало человечество, после того как Тесла изобрёл электричество… Я действительно это сказал.. ой, я имел в виду Эдисона.

Ну, может быть не совсем самая крутая, но тем не менее.

CSS спрайты могут помочь значительно увеличить скорость загрузки страницы, сократив количество HTTP запросов, которые формируются для загрузки изображений.

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

Теперь давайте быстренько посмотрим, как на YouTube используют CSS спрайты. Так выглядит спрайт, которым они пользуются:

YouTube использует этот файл довольно оригинально. Загружают они его как фон классу sprite. Когда возникает необходимость в выборе какого-то элемента, происходит выбор изначальной позиции при помощи CSS свойства background-position, а затем применение высоты и ширины.

Давайте и мы попробуем что-то подобное. Поэкспериментируем на этом же самом изображении с сайта YouTube.

В примере, который расположен ниже, мы выводим логотип YouTube на экран. Используя тот же класс sprite, и то же самое изображение image, мы можем создать изображение, которое будет изменяться при наведении мышки.

.sprite { background:url(http://s.ytimg.com/yt/img/master-vfl87445.png); } #logo { width:100px; height:45px; background-position:0 0; }

Таким образом, используя данное изображение, мы можем свести все подключения к одному HTTP запросу. Ну, как эффект?

Ещё одно преимущество CSS спрайтов заключается в том, что при применении псевдо класса:hover, изображение не будет пропадать на несколько мгновений (которые уходят на загрузку нового изображения), как это происходит без использования CSS спрайтов.

.sprite { background:url(http://s.ytimg.com/yt/img/master-vfl87445.png); } #logo { width:100px; height:45px; background-position:0 0; } #button { background-position:0 -355px; padding:5px 8px; } #button:hover{ background-position:-25px -355px; }

3. Загружайте CSS файлы в начале, JavaScript в конце

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

Стоит также отметить:

Загружайте файлы CSS в разделе прямо перед началом тега body.

Подключайте JavaScript перед самым закрытием тега body.

Если вы будете следовать нашему совету, то позволите вашим пользователям любоваться вашим сайтов, в то время как на втором плане будет происходить загрузка ваших JavaScript скриптов.

Примечание: Если вы не хотите перемещать теги JavaScript, потому что боитесь, что падёт функциональность, то я рекомендую вам использовать свойство defer. Применяйте его следующим образом:

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

Параллельная загрузка означает увеличение параллельных загрузок одних и тех же файлов. Пройдясь по множеству сайтов, вы можете заметить, что на многих из них запросы посылаются на static.domain.com и c1.domain.com. Это можно увидеть в нижней панели браузера.

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

Настройка процесса:

Создайте 3 поддомена на вашем сервере

Расположите ваши изображения в папках на разных поддоменах

Замените пути в ваших файлах

5. Добавление заголовков Expires

Некоторые сайты остаются нагруженными даже после применения всех методов, описанных выше. Но есть ещё пару методов.

Пользователь может зайти на ваш сайт и совершить все необходимые HTTP запросы для отображения страницы, изображений, скриптов и т.д.

Когда вы используете заголовки Expires, вы можете закэшировать все эти элементы на пользовательской машине, тем самым не только увеличив скорость загрузки страницы, а ещё и сократив трафик. Заголовки Expires могут быть применены ко всем вашим скриптам, CSS и изображениям.

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

Следующий пример.htaccess файла устанавливает заголовки expires на какое-то число в 2010 году для таких типов файлов как.ico, .pfd, .flv (файлы Flash), .jpg, .png, etc.

Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"

Будьте бдительны: если вы произведёте какое-либо изменение в данных файлах (в случае, если срок ещё не прошёл), то вам необходимо переименовать их (или добавить в название версию), иначе в кэше они не обновятся.

К примеру, если у вас есть файл JavaScript, в котором вы что-то изменили, просто добавьте в название номер версии (что-то типа javascriptfile-1.0.js, javascriptfile-1.1.js и т.д.)

Вывод

Сегодня мы прошлись по многим способам. Надеюсь, вы отметили для себя несколько методов, которые будете активно применять в ваших проектах! Удачи!

1. Используйте YSlow для отслеживания времени загрузки страниц

Самыми часто встречаемыми «тормозилами» являются следующие объекты или операции:

Слишком много HTTP запросов
Не сжатые файлы JavaScript
Отсутствие времени истечения заголовков для графических файлов

Через несколько минут мы подробнее на этом остановимся.

Используем YSlow на полную

Но люди, как правило, не используют CDN (что является довольно-таки дорогим удовольствием).

Классификация типов ошибок

2. Используйте CSS спрайты для сокращения HTTP запросов

Ну, может быть не совсем самая крутая, но тем не менее.

Давайте и мы попробуем что-то подобное. Поэкспериментируем на этом же самом изображении с сайта YouTube.

.sprite { background:url(http://s.ytimg.com/yt/img/master-vfl87445.png); } #logo { width:100px; height:45px; background-position:0 0; }

3. Загружайте CSS файлы в начале, JavaScript в конце

Стоит также отметить:

Загружайте файлы CSS в разделе прямо перед началом тега body.

Подключайте JavaScript перед самым закрытием тега body.

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

Настройка процесса:

Создайте 3 поддомена на вашем сервере

Расположите ваши изображения в папках на разных поддоменах

Замените пути в ваших файлах

5. Добавление заголовков Expires

Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"

Вывод

Многие пользователи хотят, чтобы их компьютер работал быстро, потому используют программы для удаления временных файлов, такие как , и на автомате чистят систему (удаляя в том числе и кэш браузера). А ведь это и является одной из основных причин замедления загрузки страниц в браузере.

Зачем браузеры создают кэш?

В одной из статей Александр Шихов описал, . Пересказывать всю статью не буду, лишь расскажу главную суть. Кэш нужен как раз для того, чтобы сайты открывались очень быстро. Если каждый день удалять его, то при последующем запуске браузера и попытке открыть любимые сайты браузеру придется снова загружать те же данные, которые он мог бы открыть c локального диска (кэша) за доли секунды.

Почему нас приучили чистить кэш?

Многие годы разработчики программ для чистки системы приучали нас, что кэш штука лишняя и его надо очищать. Обосновывали это просто — он занимает много места, которое можно использовать более рационально. Но на деле это лишь уловка, повод прибавить две-три сотни мегабайт и несколько тысяч файлов к статистике найденного «мусора» в системе. Это позволяет выглядеть такому продукту лучше в глазах пользователей за счет того, что он находит больше (или не меньше) конкурентов.

Связано это с тем, что большинство оценивает количество найденного мусора, а не его качество. Если какая-то программа находит 700 мегабайт мусора в системе, а другая 900 мегабайт, то лучше определенно выглядит вторая программа. И плевать, что 200 мегабайт сверху были добавлены за счет прибавления кэша браузеров, который через день восполнит те самые 200 мегабайт. Это отличный повод предложить почистить систему еще раз, не так ли?

Удаляйте историю браузеров и временные файлы без очистки кэша

Чтобы предотвратить удаление кэша при использовании программ для чистки дисков, просто отключите очистку кэша в настройках программы и продолжайте пользоваться. Вы сразу заметите, что она стала находить меньше мусора, но помните, что это из-за отсутствия в «мусоре» кэша, который делает загрузку браузеров быстрее и работу с сайтами удобнее.

Используйте приватный режим (режим «инкогнито»)

Если вы не хотите, чтобы какие-то сайты оставляли следы на вашем ПК, то просто активируйте приватный режим просмотра страниц (в он активируется сочетанием Ctrl+Shift+N), после закрытия которого вся история и данные о просмотренных страницах будут удалены из браузера и никто о них никогда не узнает.

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

Пять способов ускорить время загрузки страниц. Как значительно ускорить загрузку страниц в браузере

Еще на эту тему:

Другие статьи: