Все без исключения владельцы интернет-ресурсов мечтают о большой посещаемости и успешной монетизации своих проектов. Однако удается это, к сожалению, не всем.
Хотите попасть в число избранных и достичь поставленных целей?
В таком случае придется позаботиться о многих нюансах: не только разработать концепцию, выбрать подходящий дизайн, разместить полезный контент, но и увеличить скорость загрузки сайта.
Быстродействие сайта - один из важных показателей, который положительно влияет на ранжирование в поисковых системах и конверсию.
Например, каждая дополнительная секунда загрузки грозит бизнесу потерей 7% целевых действий! Данные анализа Amazon .
Чем плох медленный сайт? Он не просто раздражает, а еще и приводит к серьезным проблемам в решении ежедневных задач. Проблемы с отрисовкой страницы спустя 10 секунд после клика - это сигнал о поломке, который приводит к уходу пользователя, снижению продаж и ухудшению поведенческих факторов.
Существует еще и техническая сторона вопроса. Если вы упустите из внимания столь важный показатель как скорость загрузки, это приведет к увеличению необходимого объема ресурсов хостинга и, соответственно, к дополнительным затратам. То есть работа над улучшением производительности оправдана как с экономической, так и с технической точки зрения.
В этой статье вы узнаете, как повысить скорость загрузки сайта на любом движке с помощью самых эффективных способов.
Пользователи не любят ждать: чем медленнее работает портал, тем ниже их лояльность. Поэтому в ваших интересах разогнать сайт до скорости гепарда:).
И все-таки, на какие показатели стоит ориентироваться?
- 1 секунда - отличный, но труднодостижимый результат.
- 2–3 секунды - стандартное время отклика большинства успешных ресурсов.
- 3–5 секунд - маленькая, но для некоторых проектов терпимая скорость;
- 6–10 секунд - столь низкий показатель негативно влияет на продвижение;
- от 11 секунд - плачевный результат, при котором надо срочно ускорять сайт.
Внимание! Выше представлены обобщенные данные. Идеальные для каждого конкретного случая цифры зависят от местоположения, функционала, объема и типа сайта.
В определенных нишах вполне нормально, если страницы загружаются по 5–6 секунд. Так, широко известная компания OZON не может похвастаться быстродействием интернет-магазина, но это не мешает ей иметь высокую конверсию.
Будет полезно!
Отказ от масштабирования картинокНе стоит менять размер изображений с помощью CSS, width и height. Лучше предварительно внести корректировки, воспользовавшись графическим редактором.
Вместо одной масштабируемой иллюстрации, которая занимает много места и замедляет загрузку, стоит использовать несколько картинок, адаптированных под разные устройства.
Чтобы браузер каждый раз грузил нужный вариант, установите плагин Imager (для WordPress). Это работает так:
new Imager({ availableWidths: });
Специальные методы упрощения кода уменьшают размеры элементов, сокращая названия функций и удаляя мусор. Можно дополнительно улучшить 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», где можно выбрать подходящие вам функции: объединение файлов, создание сжатых копий и т. п.
ЗаключениеТеперь вы знаете, насколько важно быстродействие ресурса для его конверсии, индексации и ранжирования. Надеемся, статья ответила на все ваши вопросы и помогла оптимизировать сайт с минимальными усилиями!
Скорость загрузки сайта влияет на удобство просмотра для пользователей. Современные юзеры не любят долго ждать, пока страница сайта или отдельные ее элементы полностью загрузятся. Соответственно люди покидают такие сайты, а это сказывается на поведенческом факторе, что в свою очередь ведет к падению прибыли или понижению позиций сайта в поисковых системах. К тому же, сами поисковики учитывают скорость загрузки страниц и это в маленькой мере, но все же влияет на ранжирование.
Как узнать скорость сайта?Скорость сайта определяется как Page Speed, и есть несколько способов ее узнать данный показатель. Детальнее об этом читайте в нашей статье .
Как ускорить сайт без вреда?Красный - очень важно, Оранжевый - желательно, Зеленый - обратите внимание.
1. Оптимизируйте картинкиКак вы сами понимаете, картинки могут быть слишком большие и слишком долго загружаться.
Лучше всего оптимизацию картинок проводить через сервис , который предоставляет Yahoo. Этот сервис уменьшает вес картинки без потери качества и сохраняя ее расширение. Если вас это не устраивает, то можете вручную оптимизировать изображения Фотошопом или любой другой графической программой. Также хотим дать совет на случай если решите сами оптимизировать картинки - не ухудшайте качество на столько сильно, что пользователю будет противно смотреть на сайт.И если оптимизация графики приводит к таким результатам, то лучше оставьте все как есть.
Какой формат использовать? Лучше всего используются jpg и png, у первого лучше степень сжатия, зато у второго поддерживается прозрачный фон.
2. Используйте кэш браузераКогда пользователь заходит на страницу Вашего сайта, все элементы (графика, текст, CSS-стили и т.д.) загружаются к нему в браузер. Если сайт сообщит браузеру, что все эти элементы нужно какое-то время хранить на компьютере пользователя, то при следующем посещении этой же страницы (или других страниц вашего сайта) загрузка сайта пройдет на много быстрее. Т.к. браузер загрузит лишь те данные, которые изменились, а все остальные возьмет из памяти браузера (кэша). Чтобы включить кэширование, нужно в файл.htaccess записать такой код:
ExpiresActive On
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
Здесь срок хранения указан 1 месяц, т.к. мы считаем его оптимальным. Но можно ставить значения "7 days" или "1 year" и т.д. Также стоит обратить внимание, что для исполнения этого кода на хостинге должна быть включена работа модуля mod_expires.c. И хотя этот модуль включен на большинстве хостингов, все же редко встречаются такие компании, которых он выключен. Также для правильного кэширования скриптов, рекомендуют добавить такой код:
FileETag MTime SizeExpiresActive on
ExpiresDefault "access plus 1 month"
3. Включите gzip-архивацию
Суть ее проста: когда клиент пытается посмотреть страницу браузера, то сервер на котором расположен ваш сайт фактически на лету архивирует информацию, и передает пользователю меньше данных, чем в том случае, если бы он передавал полные файлы без архивации. Эти данные распаковываются в браузере пользователя, и тот видит страницу вашего сайта.
4. Оптимизируйте CSSКак правило это не дает значимого результата для ощутимого пользователю ускорения сайта, но все же для увеличения Page Speed стоит оптимизировать CSS файлы. Сегодня существует множество сервисов, которые делают это онлайн. Не бойтесь, ваши стили будут все также работать, просто в них уберутся лишние пробелы, а также та информация, которую можно сократить - будет сокращена.
6. Старайтесь не использовать редиректРедирект - это перенаправления с одной станицы на другую. Хотя на него не уходит много времени, но все же оно тратится и может быть заметно для пользователей и поисковых машин. Поэтому используйте его только там, где очень нужно (например, при переезде с одного домена другой).
7. Асихронная загрузка JavaScript и CSSОбычно страница загружается так - сначала стили и скрипты, а потом ее основной контент. Причем все загружается последовательно (синхронно), и пока CSS или JS не загрузится, пользователь не увидит основной контент страницы. Так вот, многие рекомендуют делать асинхронную загрузку CSS, JS и основного содержимого страницы (текста, картинок и т.д.).
Мы не рекомендуем это включать, т.к. если какой-то скрипт или CSS-файл у Вас грузится долго, то он также долго будет грузиться и при асинхронной загрузке. Просто в таком случае пользователь чуть раньше увидит текст страницы, но в то же время, если он поспешит нажать куда-то, что использует JavaScript, который еще находится в стадии загрузки, то пользователь скорее всего увидит ошибку.
Чтобы этого избежать, лучше проверьте и оптимизируйте свои скрипты и стили, чтобы они быстрее загружались.
8. Верхняя часть страницы - вверху кодаСтарайтесь чтобы элементы которые находятся в верхней части реальной страницы сайта, находились в верхней части кода. Это будет эффективным, когда у Вас длинная страница, и пользователь сразу увидит ее верх, а нижняя часть уже догрузится в то время, пока пользователь смотрит на верхнюю часть страницы.
9. Используйте инструмент от GoogleОн называется Page Speed - там будут найдены и основные проблемы сайта со скоростью, и будут даны советы по их исправлению.
Если у вас есть советы по улучшению скорости сайта - оставляйте их в комментариях, и мы с радостью добавим их в статью. А если есть вопросы - смело их задавайте, т.к. наши эксперты очень быстро на них отвечают.
Для вебмастеров и оптимизаторов время скорости загрузки для сайта имеет важное значение. В качестве подтверждения этого, хочу привести немного статистики и фактов:
- Больше половины посетителей покидают страницу, которая грузится более 3-х секунд;
- Сайт, который грузится 3 секунды, имеет на 25% меньше просмотров, на 50% больше отказов и на 25% меньше конверсии , чем сайт, который грузится 1 секунду;
- Прогресс-бар увеличивает время ожидания загрузки страницы;
- Скорость загрузки напрямую влияет на продажи и на позиции сайта;
Определить скорость загрузки сайта совсем несложно. Например, можно воспользоваться следующими популярными онлайн сервисами:
Рассмотрим способы ускорить время загрузки страниц сайта. По факту все способы очень просты и чаще всего сводятся к оптимизации "веса" страницы и грамотной загрузке кода.
В интернете довольно много материала по этой теме. Я постарался изложить все способы компактно и только по делу. Начнем.
1. Включить сжатие gzipНа каждом сайте есть подключаемые файлы со стилями.css и скриптами.js. Их можно сжимать на "лету" (при загрузке страницы). Проще говоря мы уменьшаем их вес и тем самым сайт быстрее грузится. Мои файлы в среднем сжимались на 75%. Например, если файл весил 45 кбайт, то после сжатия он стал весить уже 12 кбайт. Итого, экономия 33 КБайта веса на файле с таблицей стилей.
Включить сжатие проще простого. Нужно лишь написать следующие строки кода в файл .htaccess (файл находится в корне сайта):
mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*Проверить включено ли сжатие можно на сайтах
Если что-то не получается, то смело пишите вопрос в тех.поддержку Вашего хостинга . Зачастую бывает, что у них самих что-то не включено в настройках сервера.
2. Включить кэш браузераВключение кэша браузера подключается добавлением пары строк кода все в тот же файл .htaccess :
Header append Cache-Control "public" FileETag MTime Size ExpiresActive On ExpiresDefault "access plus 0 minutes" ExpiresByType image/ico "access plus 1 years" ExpiresByType text/css "access plus 1 years" ExpiresByType text/javascript "access plus 1 years" ExpiresByType image/gif "access plus 1 years" ExpiresByType image/jpg "access plus 1 years" ExpiresByType image/jpeg "access plus 1 years" ExpiresByType image/bmp "access plus 1 years" ExpiresByType image/png "access plus 1 years"Есть только важная проблема, какой срок хранения кэша поставить. Если Вы поставите очень большой срок, а файл изменился, то браузер упорно будет грузить то, что у него есть в кэше. Выходом из ситуации может послужить замена имени файла и внесение изменения в шаблон, но разве это удобно? Так что стоит подумать и самостоятельно определить как часто Вы меняете файлы на сайте.
Мое мнение, что в любом случае, срок 1-7 дней можно всегда поставить.
Это самое простое, что можно было сделать, идем дальше.
Возможно Вам будет интересно:
3. Оптимизируйте изображенияИспользование изображений jpg - для контрастных и gif - где мало количество цветов. Это все аксиомы. Ни в коем случае не использовать лишний раз png или bmp, поскольку оба формата являются совсем не оптимизируемыми.
Уже существующие изображения jpg и png можно легко еще сжать с помощью программ и сервисов. Лично я поискал в интернете сервисы для сжатия изображения. Сравнил результаты, сделал вывод, что онлайн сервис tinypng.com нравится мне больше всех. Иногда ему удается уменьшить изображение даже на 75%, при этом качество остается почти без изменений.
Если сайт использует в качестве фона большое изображение, то его можно очень сильно сжать. Например, мне удалось сжать с 300 Кбайт до 86 Кбайт картинку с задним фоном для одного из сайтов.
4. Подгружать файлы с другого доменаУ браузеров есть ограничение на количество одновременно исполняемых запросов (не более двух параллельно). Другими словами, если на сайте будет куча изображений (даже маленьких), это сильно увеличивает время его загрузки. Поэтому применяют следующую хитрость:
Создают поддомен для хранения фотографий, javascript и другое. Например, если ранее фото лежало по адресу /img/foto.jpg , то теперь адрес нужно поменять на img.site.ru/img/foto.jpg . Для браузера это будет другой домен и таким искусственным методом мы ускоряем загрузку.
ПримечаниеСейчас довольно модно применять "CSS-спрайт ". Смысл следующий: к примеру у нас на сайте есть куча маленьких картинок для фона (я думаю это знакомо каждому). Все эти картинки можно объединить в одно большое изображение, а с помощью CSS "вырезать" нужные куски в нужных местах.
5. Оптимизация CSS и JSЗачастую в файлах CSS и JS находится множество лишних описаний стилей, скриптов и даже простых пробелов и комментариев. Это дополнительный вес для сайта. От этого можно легко избавиться с помощью сервисов:
Вроде бы такая простая "махинация", а это еще небольшой бонус к уменьшению размера страницы.
6. Правильное расположение CSS и JSВсе файлы.css подключаем в заголовочных тегах head (перед тегом body), все скрипты подключаем в конце страницы. Вообще говоря это не ускорит загрузку страницы, но зато контент перед пользователем начнет появляться раньше, а это в свою очередь мотивирует его подождать, ведь он видит, что сайт грузится.
ПримечаниеЕсли Вы подгружаете библиотеку AJAX (от Google), то, конечно, грузить с сайта гугла напрямую ее быстрее плюс можно быть почти на 100% уверенным, что в браузере пользователя уже есть ее кэш. Но бывает, что гугл почему не доступен или тормозит загрузку, поэтому чтобы минимизировать этот риск можно прописать следующий код:
window.jQuery || document.write("");Смысл довольно прост. Сначала пытаемся загрузить библиотеку напрямую с ajax.googleapis.com, если это не удается, то грузим со своего сайта копию библиотеки.
ПримечаниеЕсли у Вас уникальный случай, что сайт все равно очень тяжелый и грузится долго, то сделайте у себя на сайте "прогресс-бар". Этим вы показываете пользователю, что сайт грузится и нужно лишь чуть-чуть подождать.
Один из самых важных аспектов вашего сайта - это скорость его загрузки; пользователи хотят мгновенно получать картинку без всяких тормозов, и если вы не в состоянии дать им это, то они долго не раздумывая, поищут информацию в другом месте. В этой статье мы обсудим 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 - это файлы, которые уже были закэшированы браузером пользователя. Это означает, что их скачивать не нужно.
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 файлам в конец документа.
Стоит также отметить:
Если вы будете следовать нашему совету, то позволите вашим пользователям любоваться вашим сайтов, в то время как на втором плане будет происходить загрузка ваших JavaScript скриптов.
Примечание: Если вы не хотите перемещать теги JavaScript, потому что боитесь, что падёт функциональность, то я рекомендую вам использовать свойство defer. Применяйте его следующим образом:
4. Используйте поддомены для параллельного скачивания
Параллельная загрузка означает увеличение параллельных загрузок одних и тех же файлов. Пройдясь по множеству сайтов, вы можете заметить, что на многих из них запросы посылаются на static.domain.com и c1.domain.com. Это можно увидеть в нижней панели браузера.
Это отличный способ увеличить производительность сайта. При использовании поддоменов, по сути, информация будет находиться на одном и том же сервере, однако для браузера они будут разными.
Настройка процесса:
Некоторые сайты остаются нагруженными даже после применения всех методов, описанных выше. Но есть ещё пару методов.
Пользователь может зайти на ваш сайт и совершить все необходимые 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 и т.д.)
ВыводСегодня мы прошлись по многим способам. Надеюсь, вы отметили для себя несколько методов, которые будете активно применять в ваших проектах! Удачи!
«Распределили часть контента (изображения, jQuery) на поддомены, а часть на CDN (cloudflare.com) для сокращения расстояния между сервером и пользователем.» Для сайта плохо - картинки будут привязаны не к сайту, а к CDN. В Яндексе в статистике будете видеть "картинок в индексе - 0".© инфа от яндекса.
То есть включили все галочки в настройках оптимизации сайта на хостинге. С заказчика содрали пару сотен баксов. При этом убили такой параметр в заголовке как lastmodified, ибо при включении этих опций он не передается - такова его специфика. Ощущение, что и сайта нету никакого, просто придумали статью и переписали название чекбоксов с хостинга, думая что справит неизгладимое впечатление.
Браво, примитивнее статьи не читал, кейс на премию Дарвина!
Александр Поречников
Java - это даже и не близко Java Script
Александр Поречников
Вот Вы пишите, Геннадий, что включили http2 и при этом зачем-то обьединяете ресурсы в один файл, Противоречите сами себе? Или просто не знаете как работает http2. И судя по чеклисту, то меряли ли Вы скорость загрузки после простого включения ганзипа, все остальное это такие тонкости и дебри в которые лезут, когда нужно с 500мс сделать 400мс или от нагрузки сервер подвисает (504 ошибки проскакивают). И выкиньте Апач из связки Апач + Нжиникс (если Вы, конечно, не используете специфические плагины Апача) + совет, держите всю статику на СДН, это очень недорого, а толк от этого огромный, как минимум в снижении нагрузки на процессор
Александр Поречников
а для чего созданы зеркала - слейте СДН с основным доменом и все
Александр Поречников
про качество статьи соглашусь, но про саму концепцию не соглашусь - все пункты мы тестили у себя, но оставили из них меньше половины, остальное или не работает или тот мизер прироста скорости не оправдывает усилий
Настроили OpCashe, исправьте на OPcache
Александр, несомненно, эти опции модуля pagespeed ускоряют сайт, но при выборе хотя бы одной из них на хостинге last-modified не передается, ответ сервера 304 на запрос if-modified-since не отдается, cache conrol -> max-age становится 0.
Возмутило не это в статье, возмутило то, что автор пишет такие заумные вещи как они план составляли, как воплощали в жизнь мега СЕО технологии и как потратили на это 60 человекочасов, 60 КАРЛ! То есть с заказчика содрали минимум 500 баксов за то, что поставили галки на хостинге. Не жалко, на здоровье! Ну развел и молчи, но не лезь со своими псевдознаниями на нормальные сайты и не отбирай у людей время! Почему уверен что рулили на хостинге -- вот скрин украинского продвинутого хостера, где порядок этих галок практически на 100% совпадает с гениальным планом автора и ко по ускорению сайта.
https://uploads.disquscdn.c...
Александр Поречников
на этом хостинге у нас даже один из старых полустатичных проектов крутится, отличнаый хостинг. По поводу чего Вы высказалась я знаю, но многие не понимают, что на самом деле есть всего несколько способов действительно уменьшить время загрузки, а не "экономия на спичках" - это:
0) включение сжатия на веб-сервере (gzip),
1) установка правильных заголовков на сайте
2) использование не шаред-хостинга, а пусть даже минимальной ВПСки
3) использование более-менее быстрого движка (желательно не Вордпресс, а на фреймворке)
4) минификация статичных файлов (то что редко меняется - стили, картинки, скрипты, шрифты)
5) кеширование страниц/статики
Остальное все дает очень небольшой прирост или не дает вовсе, а некоторые советы только мешают. Ну и самое главное - сделать все же мобильную версию, т.к. обычно проблема со скоростью загрузки сайта возникает на мобильных устройствах.
Согласен с Вами на 100%, благодарю за лаконизм и точность!
Ляпушкин Никита
Тот самый момент когда чувствуются заученные фразы продажника в глаза не видавшего то о чем говорит.
Если статья для общего развития - то годится, но не для чек листа или мануала к применению.
Только дёргнуть клички технологий и самостоятельно курить тему, рекомендую даже пропускать утверждения приведенные в статье.
Филандер
а что за хостинг?)
Филандер
Alexey Tyazhelnikov
Что значит "Расширили время кэш для JavaScript и CSS" ?
Включили последнюю и предпоследнюю галочку на хостинге (пост со скрином выше))))
Геннадий Федоров
Да, так и сделали!
Извините, Вы не компетентны в этом вопросе.
Геннадий Федоров
Спасибо!
Комплекс работ - дает результат.
Геннадий Федоров
Такая и была задача, дать толчок к действиям, а не расписать как необходимо делать
Геннадий Федоров
Спасибо за комментарий!
Признаю, все объединили до перехода на https/http2))
Да, скорость после gzip мерили, не тот результат (не всем угодишь)...
Геннадий Федоров
Вот Вы как спецы судите... посмотрите это со стороны пользователя))
Геннадий Федоров
Ваш комментарий вообще непонятен
Александр Поречников
пользователи обычно не настраивают сервер, не программируют и не создают продукты, то что можно создать "бложик/сайт" на вордпрессе человеку без знаний - это несомненно хорошо, но если у такого человека возникнут вопросы, то ему все равно придется столкнутся с PHP, JavaScript, Nginx, Apache и прочими ранее незнакомыми словами и в этом обычно помогает гугл, поэтому "легкая безграмотность" в терминах приведет к тому, что человек будет искать что-то похожее на "слайдер на Java" и удивлятся что ему какой-то JavaScript подсовывают в результатах. Поэтому взывать к стороне пользователя не стоит
Александр Поречников
часто проблема не в том что скорость повышается от всех манипуляций (пусть даже если и на 0,1%), а в том, что мы не видим других путей оптимизации (CDN, nginx) и не понимаем как это работает (http2) и в результате оптимизируем то что нет смысла оптимизировать и забываем о том что следовало бы оптимизировать или как добится максимального результата при своей оптимизации.
