Все без исключения владельцы интернет-ресурсов мечтают о большой посещаемости и успешной монетизации своих проектов. Однако удается это, к сожалению, не всем.
Хотите попасть в число избранных и достичь поставленных целей?
В таком случае придется позаботиться о многих нюансах: не только разработать концепцию, выбрать подходящий дизайн, разместить полезный контент, но и увеличить скорость загрузки сайта.
Быстродействие сайта - один из важных показателей, который положительно влияет на ранжирование в поисковых системах и конверсию.
Например, каждая дополнительная секунда загрузки грозит бизнесу потерей 7% целевых действий! Данные анализа Amazon .
Чем плох медленный сайт? Он не просто раздражает, а еще и приводит к серьезным проблемам в решении ежедневных задач. Проблемы с отрисовкой страницы спустя 10 секунд после клика - это сигнал о поломке, который приводит к уходу пользователя, снижению продаж и ухудшению поведенческих факторов.
Существует еще и техническая сторона вопроса. Если вы упустите из внимания столь важный показатель как скорость загрузки, это приведет к увеличению необходимого объема ресурсов хостинга и, соответственно, к дополнительным затратам. То есть работа над улучшением производительности оправдана как с экономической, так и с технической точки зрения.
В этой статье вы узнаете, как повысить скорость загрузки сайта на любом движке с помощью самых эффективных способов.
Пользователи не любят ждать: чем медленнее работает портал, тем ниже их лояльность. Поэтому в ваших интересах разогнать сайт до скорости гепарда:).
И все-таки, на какие показатели стоит ориентироваться?
- 1 секунда - отличный, но труднодостижимый результат.
- 2–3 секунды - стандартное время отклика большинства успешных ресурсов.
- 3–5 секунд - маленькая, но для некоторых проектов терпимая скорость;
- 6–10 секунд - столь низкий показатель негативно влияет на продвижение;
- от 11 секунд - плачевный результат, при котором надо срочно ускорять сайт.
Внимание! Выше представлены обобщенные данные. Идеальные для каждого конкретного случая цифры зависят от местоположения, функционала, объема и типа сайта.
В определенных нишах вполне нормально, если страницы загружаются по 5–6 секунд. Так, широко известная компания OZON не может похвастаться быстродействием интернет-магазина, но это не мешает ей иметь высокую конверсию.
Будет полезно!
Отказ от масштабирования картинок
Не стоит менять размер изображений с помощью CSS, width и height. Лучше предварительно внести корректировки, воспользовавшись графическим редактором.
Вместо одной масштабируемой иллюстрации, которая занимает много места и замедляет загрузку, стоит использовать несколько картинок, адаптированных под разные устройства.
Чтобы браузер каждый раз грузил нужный вариант, установите плагин Imager (для WordPress). Это работает так:
<div
style
=
"width: 240px"
>
<div
class
=
"delayed-image-load"
data-src
=
"httр://placehold.it/{width}"
data-alt
=
"alternative text"
>
</
div
>
</
div
>
<script
>
new Imager({ availableWidths: });
</
script
>
Оптимизация JavaScript и CSS
Специальные методы упрощения кода уменьшают размеры элементов, сокращая названия функций и удаляя мусор. Можно дополнительно улучшить CSS и JavaScript за счет изменения названий переменных (в случае обновления HTML и правильной работы селекторов).
Упростить код несложно - имеется много сервисов: JSCompress или Refresh-SF. Подойдет для этого и Google PageSpeed Insights. После выполнения на нем анализа страницы, нажмите на «Сократить HTML», а затем на «Посмотреть содержание».
Обратите внимание! Лучше всего размещать JS-файлы в конце страницы, а CSS - в начале. Так ваш ресурс произведет на пользователей положительное впечатление как по внешнему виду, так и по скорости.
Оптимизация веб-шрифтов
Подключенные веб-шрифты - стандарт оформления современных сайтов. Но, к сожалению, они негативно сказываются на производительности сайта. Проблема усугубляется при расположении указателей на файлы шрифтов в CSS и применении публичных сервисов, требующих дополнительные подключения.
Начните пользоваться новыми форматами WOFF и WOFF2, при этом исключите все наборы символов, кроме кириллицы и латиницы.
Улучшить ситуацию можно при помощи спецификации link rel=«preload» и CSS-свойства font-display. Первый показатель мгновенно указывает браузеру о необходимости загрузки файла шрифта, второй позволяет управлять поведением браузера в случае задержки.
Использование кэша предполагает то, что файлы сайта будут загружаться с сервера лишь один раз. В дальнейшем они сохраняются на компьютер и «подтягиваются» при загрузке с ПК пользователя.
Для подключения кэша браузера необходимо создать файл.htaccess и, воспользовавшись модулем expires, прописать в нем выбранные директивы:
- Expires - отвечает за актуальность кэша (можно установить срок от недели до года).
- Cache-Control: max-age - аналог предыдущего заголовка, выполняющий те же функции.
- Last-Modified и ETag - устанавливают в кэше уникальный id для каждого url. В Nginx для статичных файлов они включены по умолчанию.
Как увеличить скорость загрузки сайта на определенном движке?
- WordPress
Для оптимизации CSS и JavaScript в таком случае стоит установить плагин Autoptimize. Можно также загружать откорректированные элементы страницы из PageSpeed Tool.
Учтите, что основой «легкости» ресурса является правильно выбранная тема. Если нынешняя версия тормозит ваш проект, есть смысл ее поменять.
- Opencart
Следует уменьшить размеры статичного контента - для Nix-систем подойдет Google ModPagespeed. Также вы можете воспользоваться Gzip, сжатием изображений.
- Joomla
Оптимизируйте иллюстрации под Web, тогда они будут обладать меньшим весом. Никогда не загружайте картинки с высоким разрешением для их последующего уменьшения через CSS и HTML. Большое количество «неблагополучных» элементов приведут к серьезному замедлению работы сайта.
- 1C Битрикс
В административной панели этой CMS существует немало полезных настроек. Например, «Автокэширование» и «Оптимизация CSS», где можно выбрать подходящие вам функции: объединение файлов, создание сжатых копий и т. п.
Заключение
Теперь вы знаете, насколько важно быстродействие ресурса для его конверсии, индексации и ранжирования. Надеемся, статья ответила на все ваши вопросы и помогла оптимизировать сайт с минимальными усилиями!
Ускорение загрузки сайта стоит в одном ряду с другими элементами поисковой оптимизации. Часть вебмастеров склонна недооценивать значимость этого фактора (к счастью, таких становится все меньше), между тем, медленная работа веб-ресурса оказывает влияние не только напрямую на ранжирование страниц в поиске, но и косвенно портит карму за счет ухудшения поведенческих факторов.
Мало кому нравится ждать по 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, просто вставьте его в свой файл:
# Включаем кэширование в браузерах клиентов < 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:
# сжатие 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 вставляем код:
< 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 .
В этом случае меняем последнюю строку кода примерно на такую:
RewriteRule \.(jpg|jpeg|png|gif)$ http://s57.radikal.ru/i156/1504/84/f6d030f80631.png
Директор по маркетингу одного из подразделений 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. Для сравнения проведите те же тесты со страницами конкурентов.
Надеюсь, все вышеизложенное поможет вам ускорить загрузку страниц вашего сайта - это оценят и пользователи, и поисковики.
Я думаю ни для кого не секрет, что скорость загрузки страницы влияет на множество факторов. Если кто-то не в курсе, то вкратце скажу следующее, что скорость загрузки влияет не только на то, дождется ли посетитель, когда загрузится Ваш сайт, но и на SEO оптимизацию. Ведь на сегодняшний день уже многие поисковые системы при ранжировании сайтов, начали учитывать скорость загрузки страницы. Поэтому чем быстрее будет грузиться Ваш сайт, тем больше посетителей Вы можете получить с поисковых систем, а, следовательно, и больше денег на этом заработать.
Поэтому в этой статья я решил собрать топ-10 советов о том, как же можно увеличить скорость загрузки веб-странички и сайта в целом.
Кстати, эта статья принимает участие в конкурсе TOP-10 от Сергея Шелвина с призовым фондом в 500$ !
5. Используйте поддомены для параллельного скачивания
Как я уже говорил Выше, согласно спецификации HTTP/1.1 на браузеры накладываются ограничения на количество одновременно загружаемых компонентов сайта, а именно не более 2-х компонентов с одного хоста. Поэтому если на Вашем сайте много графики, то ее лучше вынести на отдельный поддомен или поддомены. Для Вас это будет один и тот же сервер, а для браузера - разные. Чем больше поддоменов Вы создадите, тем больше файлов браузер сможет одновременно загрузить и тем быстрее загрузится вся страница сайта. Вам остается лишь изменить адрес картинок на новый. Очень простой, но действенный способ.
6. Используйте кэш браузера
Кеширование становится крайне важным для современных веб-сайтов, которые используют обширное подключение JavaScript и CSS. Дело в том, что когда посетитель зашел на Ваш сайт в первый раз, то браузер выполнит загрузку всех javascript и css-файлов, также загрузит всю графику и флэш, однако правильно выставив HTTP-заголовок Expires, вы сделаете компоненты страницы кешируемыми. Таким образом, когда посетитель зайдет на Ваш сайт снова или перейдет на следующую страницу Вашего сайта, в кэше его браузера уже будут находится некоторые нужные файлы и браузеру не потребуется загружать их снова. Отсюда и выигрыш в скорости загрузки сайта .
Поэтому выставляйте HTTP-заголовок Expires везде, где только это возможно, на несколько дней или даже месяцев вперед. Для того, чтобы веб-сервер Apache отдавал соответствующие рекомендациям HTTP-заголовки Expires, необходимо добавить в файл.htaccess, находящийся в корневой папке сайта, следующие строки:
Данный фрагмент файла конфигурации Веб-сервера Apache проверяет наличие модуля mod_expires и, если модуль mod_expires доступен, включает отдачу HTTP-заголовков Expires, которые устанавливают срок хранения перечисленных выше объектов в кэше браузеров и прокси-серверов равный одному году с момента первой загрузки. Установив такой срок жизни кэша браузера, может возникнуть сложность с обновлением файлов. Поэтому если Вы изменили содержимое css или javascript-файла и хотите, чтобы эти изменения обновились в кэше браузера, то необходимо изменить название самого файла. Обычно в название файла добавляют его версию, например так: styles.v1.css
7. Используйте CDN для загрузки популярных JavaScript библиотек
Если на Вашем сайте используется популярный javascript фреймверк, например jQuery , то для его подключения лучше использовать CDN.
8. Оптимизируйте ваши изображения
Необходимо определять подходящий формат для ваших изображений. Выбор неверного формата изображения, может существенно увеличить размер файла.
- GIF - идеально подходят для изображений с несколькими цветами, например логотип.
- JPEG - отлично подходят для детализированых изображений с большим количеством цветов, такие как фотографии.
- PNG - ваш выбор, когда вам нужно высококачественное изображение с прозрачностью.
Оптимизировать изображение можно двумя способами: используя программы или онлайн сервисы в Интеренете для сжатия изображений. В первом случае от Вас потребуются определенные знания для работы с той или иной программой, а вот воспользоваться онлайн сервисами может каждый. От Вас лишь требуется загрузить нужные изображения, а сервис сам оптимизирует их и выдаст ссылку на скачивание уже сжатиых файлов.
Вот несколько онлайн сервисов для оптимизации изображений:
- www.compress-online.com (Спасибо Mary_T за ссылку)
9. Не масштабируйте изображения
Не изменяйте размер изображения при помощи атрибутов width и height тега , либо при помощи CSS. Это тоже негативно влияет на скорость загрузки страницы. Если у Вас есть изображение размером 500x500px, а вставить на сайт Вы хотите изображение с размером 100x100px, то лучше изменить размер оригинальной картинки при помощи графического редактора Photoshop, или любого другого. Чем меньший вес картинки, тем меньше времени потребуется для её загрузки.
10. Используйте Gzip- сжатие
Как показали проведенные исследования, gzip-сжатие текстового файла «на лету» в 95-98% случаев позволяет сократить время на передачу файла браузеру. Если хранить архивированные копии файлов на сервере (в памяти proxy-сервера или просто на диске), то соединение в общем случае удается освободить в 3-4 раза быстрее.
Начиная с версии протокола HTTP/1.1, веб-клиенты указывают, какие типы сжатия они поддерживают, устанавливая заголовок Accept-Encoding в HTTP-запросе.
Accept-Encoding: gzip, deflate
Если веб-сервер видит такой заголовок в запросе, он может применить сжатие ответа одним из методов, перечисленных клиентом. При выдаче ответа посредством заголовка Content-Encoding сервер уведомляет клиента о том, каким методом сжимался ответ.
Content-Encoding: gzip
Переданные таким образом данные меньше первоначальных примерно в 5 раз, и это существенно ускоряет их доставку. Однако здесь есть один недостаток: увеличивается нагрузка на веб-сервер. Но вопрос с сервером всегда можно решить. Так что не будем обращать на это внимание.
Для того, чтобы включить GZIP-сжатие на своем сайте, необходимо в файле.htaccess прописать следующие строки кода:
Если данный способ сработал, то отлично, если нет, то можно попробовать вот такой вот код:
Но опять таки, данный код работает не на всех серверах, поэтому лучше обратиться в службу поддержки Вашего хостинг-провайдера и уточнить этот вопрос.
Ну вот собственно и все, что я хотел рассказать. В данной статье я постарался перечислить все основные способы клиентской оптимизации для увеличения скорости загрузки веб-страницы. Кроме клиентской оптимизации существует еще и серверная оптимизация. Но это уже тема для отдельной статьи.
Если что-то упустил или у Вас есть, что добавить - пишите свое мнение в комментариях ниже к этому посту. Спасибо за внимание!
Скорость работы сайта – один из самых важных показателей при создании сайта и интернет-приложений.
Согласно исследованиям различных аналитиков из Google, люди обычно просматривают менее первых 25 секунд видеоролика, а некоторые даже меньше 10 секунд
Исходя из этого, для вас было бы целесообразно сделать загрузку контента сайта настолько быстрой, насколько это возможно, чтоб пользователи могли принять решение, использовать его дальше или нет.
Может это и поверхностное суждение, но люди судят о сайтах по скорости их загрузки, так бывает часто, и мы должны принимать такое положение дел как должное.
Оптимизируя работу сайта, нужно уделить особое внимание скорости его загрузки. К счастью, в WordPress и в других движках существует много хороших плагинов, которые помогают нам в этом. Однако в этой статье будет учтено, что ваш сайт может быть на другой платформе, отличной от WordPress, потому мы расскажем о нескольких эффективных способах оптимизации сайта, не зависимых от того, где он размещен. Перед тем как начать ускорять сайт, воспользутесь сервисами в статье об вашего блога, чтобы замерить результаты до и после оптимизации.
Ускорение сайта методом оптимизации изображений
Оптимизация размера изображений может быть сложной задачей, а ее решение имеет множество вариантов, их которых можно выбирать. Это могут быть форматы файлов, различные инструменты оптимизации изображений, лучшие примеры использования кода и CSS, которые помогут вам сохранять изображения и взаимодействовать с ними самым лучшим образом.
Рассмотрим пример, показывающий, почему это так важно. В последнее время разработчиками iOS и создателями приложений было выявлено, что выведение готового рисунка на дисплеях Retina занимает в 2-4 раза больше времени и места на дисковом пространстве мобильного телефона, чем это было в предыдущих версиях при простой загрузке и запуске приложения.
Это не настолько актуально для веб-разработчиков и дизайнеров, но показывает, насколько важно отображение изображения на различных платформах. Ниже приведено несколько наиболее важных, на мой взгляд, рекомендаций, которые необходимо учитывать, оптимизируя изображения для интернета.
Форматы изображений
Форматирование изображений – это наиболее важная тема, и является таковой потому, что каждый знает, что различные форматы влияют на скорость загрузки изображения. Однако существует сформировавшееся мнение на этот счет, которое мы можем использовать де-факто как стандарт. JPEG – для фотографий, GIF – для плоских изображений, содержащих малое количество цветов, и PNG – для всех остальных. Большинство веб-дизайнеров и разработчиков, которых я знаю, используют PNG практически для всего, кроме одноцветных и двухцветных кнопок, где они используют GIF.
Теперь вы можете поиграться с приведенными спецификациями, но всегда помните о существовании стандартов при сохранении маленьких легких картинок и больших и тяжелых. Если вы занимаетесь сайтом по фотографии, а ваши картинки загружаются дольше, чем на других сайтах, то попробуйте воспользоваться приведенными ниже методами.
Код изображения
Самое плохое, что мы можем сделать и отрицательно повлиять на скорость загрузки изображения, это позволить коду автоматически выставлять размеры изображения. Ну что ж, можно сказать: «Разрешим коду сделать ___ для нас». В таком случае обычно говорят: «Можешь сделать лучше – сделай сам», и это действительно правильно. Используя такие показатели, как width=’60px’ height=’50px’, можно действительно снизить нагрузку на сервер и время загрузки им изображения, так как сервер считывает информацию о странице и видит поставленные перед ним задачи. Потому, убедитесь, что вы на верном пути и сделайте так со всеми вашими изображениями.
Инструменты оптимизации изображений
Инструменты всегда полезны. Хорошо, в большинстве случаев… Иногда они мешают и отвлекают внимание, но в данном случае они действительно будут очень полезными. Если вам удастся найти замечательный инструмент для оптимизации изображений, прежде всего, пожалуйста, напишите об этом в комментариях, так как мы всегда в поиске лучшего. Следующие несколько инструментов – мои любимые. Мне нравится ImageOptim для Mac и Riot для Windows. Они очень отличаются друг о друга, но выполняют одну задачу.
Вы можете поместить в них изображение, и они найдут метод его оптимизации, а после выдадут окончательный результат для сохранения в том же формате, в котором он был загружен. Инструменты действительно очень хороши и качественно выполняют свою работу. Кроме того, у них есть функция анализа изображения, которая укажет, который формат будет для него наилучшим. Можно с легкостью сказать, что это один из самых необходимых инструментов, кроме текстового и графического редактора, конечно же.
Ускорение загрузки сайта засчет оптимизация CSS и JavaScript
CSS и JavaScript являются важными языками, когда дело доходит до веб-дизайна и, особенно, при создании динамического контента. Я считаю, что люди часто забывают о том, что могут оптимизировать свой динамический контент, а также не улучшают свои JavaScript и CSS. Конечно, это не самые необходимые вещи для небольших сайтов, но для больших – это действительно важно, особенно для тех, которые полагаются на большое количество дизайнерских решений. Давайте рассмотрим несколько «Правил для JavaScript и CSS», которые достаточно хорошо стандартизированы при создании веб-приложений.
Первое правило для CSS и JavaScript
- Если вы можете сделать это в CSS , то делайте в CSS
Мы часто забываем, что у нас есть такой замечательный инструмент и, я бы сказал, система CSS является самым замечательным, что есть у веб-дизайнера. Также добавил бы, что дизайнеры слишком быстро переводят работу в Photoshop (но это их работа и не будем осуждать их за это). При выполнении дизайна вам следует учитывать тот факт, что кроме графического редактора, ваш браузер тоже может вам кое-чем помочь, если вы воспользуетесь CSS3. Используйте все его преимущества! Располагая инструментом, где макеты можно выполнять действительно быстро, вам уже не потребуется в дальнейшем использовать для их компоновки HTML. Уверен, что вы сможете реализовать все при помощи CSS!
Второе правило для CSS и JavaScript
- Уменьшайте, уменьшайте, уменьшайте!
Минимализация кода – это, пожалуй, один из самых простых и лучших способов повысить скорость загрузки сайта. Обратите внимание, что мы говорим о миллисекундах, но и они влияют позитивно, особенно при использовании, например, библиотеки jQuery. Помните, что установив плагин для JavaScript/CSS и задав настройки для скачивания уменьшенной версии кода сайта (ее не надо редактировать), вы улучшите скорость загрузки сайта, потому сделайте так! Моими любимыми инструментами являются Code Minifier для Mac, Minify для Windows и JSCompress /CSSCompressor для тех, кто хочет работать в смешанной кросс-браузерной платформе. Хорошего уменьшения!
Третье правило для CSS и JavaScript
- Скажите In-line «нет-нет»
Плохой практикой является использование in-line в CSS или JavaScript, особенно, когда дело доходит до CSS. Здесь проблема не только в том, что это устаревший метод, но и в том, что если оставить CSS в коде HTML (особенно в in-line), это будет читаться так: HTML/CSS/HTML/CSS/HTML/CSS/HTML/CSS, а не просто HTML => CSS. Вы знаете, что это очень плохо для времени серверной загрузки, и может ухудшить большинство веб-приложений, использовавших такой подход к отдельным файлам. Это, конечно, не выведет из строя ваш сайт, но может привести к тому, что нужно будет звать мастера, который станет разбирать, где ошибка – а это уже важно. Потому, всегда будьте тем, кто может решить проблемы, а не тем, кто ее создает.
Четвертое правило для CSS и JavaScript
- Перемещайте вниз
Если требуется вставить JavaScript на страницу, сделанную в HTML, и нет возможности избежать этого, то расположите его в нижней части HTML-документа. Это поможет уменьшить время загрузки сайта, так как все функции и процессы, заложенные в JavaScript, будут выполняться после загрузки страницы. А еще это уменьшит вероятность того, что ошибка сможет повлиять на работу всей системы. Поэтому, лучше убедиться, что ваш сайт будет работать нормально и предотвратить не желаемые события, способные даже повредить браузеры.
Пятое правило для CSS и JavaScript
- DOM-оптимизация
По возможности уменьшите DOM. Например, вы часто используете jQuery, который создает много элементов DOM или все считывает через DOM – все это значительно замедляет работу вашего сайта. Есть одна пословица, которая мне нравится и ее можно использовать в этом случае: «Если вы так делаете потому, что это единственный верный способ, значит, существуют и более верные способы». Еще можно сказать, «Если вы так делаете потому, что это единственный верный способ, который вы знаете, значит, вы делаете это неправильно», но эта версия немного жестковата.
Ищите и найдете искомое. Если вы работаете с div-элементами в HTML только потому, что они необходимы для каких-то маленьких задач, и знаете только этот единственный способ работы, то он может быть не самым лучшим способом. Теперь, конечно, я понимаю, что использование тегов div необходимо для CSS, но можно найти и другие способы их применения, кроме стилизации.
Как раз недавно я сам пришел к этому, так как вел работу над проектом на Ruby on Rails. Немного ранее на этой неделе я сделал то, что давно хотел – один в один перевел около 5 div-элементов в HAML (переместил папку в папку и затем еще раз в папку). Я так сделал только лишь потому, что не знал лучшего способа, и в результате у меня получилась какая-то гадость, которую пришлось переделывать. Такая работа оказалась намного сложнее, но из нее я узнал много полезных вещей, она заставила меня выучить новый способ решения подобных вопросов в будущем. Двигайтесь дальше и получайте новые знания! Истина очень близко.
Основные работы по увеличению скорости загрузки сайта
Это настолько обширная тема для разговора, что просто не вписывается в рамки этой статьи, однако, я считаю, заслуживает отдельного внимания. Фактически, некоторые следующие важные вещи можно использовать для ускорения работы вашего сайта или веб-приложения.
- Слеши в ссылках
Это крайне важно. Когда пользователь открывает ссылку без слешей на отдаленном от сайта сервере, тот должен выяснять какого вида по указанному адресу будет файл или страница. Сервер будет вынужден самостоятельно добавлять слеши, а это займет миллисекунды, и все они будут суммироваться. Я часто встречаю вебмастеров, которые не думают об этом, а их неоптимизированный код не несет никакой нагрузки, однако, в конце концов, это все-таки имеет значение. Если десять лет копить четвертаки, в итоге у вас будет много денег, так же и здесь, только в меньшем или большем объеме, в итоге вы столкнетесь с проблемами трафика вашего сайта.
- Фавиконы
Браузеры всегда ищут файлы favicon.ico в корневом каталоге вашего сервера, так что вы спокойно можете идти вперед и добавлять favicon. Даже если вы сделали нечто временное, . Если favicon нет, браузер для себя выдает ошибку и лишь кэширует такую ошибку в своем разделе favicon.ico, что увеличивает время на загрузку.
Данная тема очень обширна, и я, к сожалению, не являюсь в ней хорошим экспертом. Однако вся суть кэширования достаточно проста. Это хранение файлов (как правило, с кодом HTML/CSS) с часто посещаемых вашим компьютером сайтов и потому ему не нужно скачивать их каждый раз.
Такая технология действительно очень полезна и за последние несколько лет широко применялась большинством веб-приложений. Существует множество решений для кэширования, но, наверное, самым распространенным является Memcached. Его работа заключается в том, чтобы сохранить в браузере файлы из открытых на компьютере веб-приложений. Например, если у вас есть разные профили, он сохраняет картинку профиля на вашем компьютере, а в следующей фазе проявляются все прелести работы Memcached . Ваши закодированные данные можно просмотреть (вытащив их и базы данных) на сервере Memcached и проверить кэшированную версию файлов. А если этого файла не будет, то можно вставить его в базу данных, чтобы в дальнейшем он очутился в кэше. Это замечательный пример кэширования больших объемов информации и на протяжении последних двух лет он позволил сотням компаний улучшить работу их серверов и баз данных.
Подведем предварительные итоги. Это не все способы, помогающие улучшить скорость загрузки сайтов, но хорошее начало для дальнейших поисков и усовершенствования вашей работы.