Ускорение загрузки страниц сайта. Оптимизация изображений, css, html и php кода. Настройка .htaccess. Ускорение загрузки сайта


Ускорение загрузки сайта

 

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

Зачем нужно ускорение загрузки сайта

Как ускорить загрузку сайта 2В последнее время важным показателем для любого блоггера становится параметр скорости загрузки сайта (блога). Статистика говорит о том, что при времени загрузки сайта более 3 секунд – 57% посетителей покидают такой сайт, при времени открытия более 4 секунд, сайт покинут 75% пользователей. Вот и считайте сами, какие потери. Поэтому ускорение загрузки сайта, сегодня считается важным вопросом.

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

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

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

к оглавлению ↑

От чего зависит скорость загрузки страниц сайта

Для начала нужно проверить скорость загрузки страниц сайта — делается это просто. В первой части статьи «Тест скорости загрузки сайта» показаны сервисы, которые можно использовать для измерения, а также сам процесс измерения. На мой взгляд, лучше использовать бесплатный сервис Web Page Test, который выдаст Вам подробную информацию о том, какой файл, какой скрипт и картинка сколько грузится.

Как ускорить загрузку сайта 1

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

На скорость загрузки страниц сайта влияют:

  • HTTP код и CSS;
  • скрипты, место установки скриптов – некоторые скрипты нужно устанавливать в конце страниц;
  • большое количество запросов браузера;
  • большой вес графики, используемой на странице;
  • работа Вашего хостинга.
к оглавлению ↑

Мероприятия по ускорению загрузки сайта

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

Итак, рассмотрим ту работу, которую можно сделать самостоятельно. Часто полученных результатов будет достаточно, чтобы сайт (блог) начал загружаться быстрее. Возможно, не потребуется выполнять второй этап с помощью специалистов. С чего начать:

  1. Выполнить анализ скорости загрузки сайта, понять, какие файлы тормозят его открывание (показано в предыдущей статье).
  2. Выполнить оптимизацию базы данных Вашего блога. Если база давно не чистилась и не оптимизировалась, то там скопилось много мусора, который будет тормозить работу блога. Чистку базы данных можно проводить с помощью различных плагинов, я использую плагин WP Optimize. О том, как чистить базу данных, показано в статье на блоге «Чистка базы данных сайта».
  3. Убрать с блога лишние плагины, оставить минимальное их количество.
  4. С целью сокращения дополнительных запросов браузера к серверу, нужно разрешить браузерам кэшировать данные. Для этого можно установить дополнительно плагины WP Super Cache или Hyper Cache.
  5. Уменьшить объём (вес) изображений, которые применяются на блоге. Пожалуй, это одна из главных причин долгой загрузки сайта (блога), о ней поговорим позже.
  6. Можно получить ускорение загрузки сайта за счет мероприятий, выполненных на хостинге.

Теперь отдельно хочу поговорить о роли изображений на блоге. Действительно не оптимизированные картинки сильно грузят блог, и Вы сами, можете это увидеть из анализа. Для снижения веса картинок нужно их применять в расширении jpeg, gif. Не рекомендую применять расширение png.

Я сам допустил массу ошибок. В погоне за качеством, многие изображения загружены на блоге в расширении png, в результате картинки открываются 5 – 13 секунд каждая. Сейчас нужно такие картинки переделать и заменить.

Перед закачкой картинки на блог советую её обрезать под нужный размер в графическом редакторе (Фотошоп, Pixlr и другие). Далее перевести картинку в расширение jpeg, снизить качество, получить картинку размером 10-50 Кб. Нужно балансировать между минимальным размером и приемлемым качеством для читателя. Читал, что есть специальные плагины для блогов, которые сжимают изображения, но сам я ими не пользовался. Уверен, оптимизировав картинки на блоге, Вы в разы повысите ускорение загрузки сайта.

к оглавлению ↑

Заключение

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

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

C уважением, Иван Кунпан.

Просмотров: 932

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

Вы можете почитать:

biz-iskun.ru

Оптимизация и увеличение скорости загрузки сайта

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

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

Подпишись на рассылку и получи книгу в подарок!

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

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

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

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

 

Как узнать скорость загрузки сайта самостоятельно?

Существует много сервисов, помогающих узнать скорость загрузки сайта. Вот некоторые из них:

  • pr-cy.ru – сервис, который поможет проверить загрузку сайта.
  • mainspy.ru – покажет размеры страницы сайта и скорость загрузки страницы.
  • айри.рф —  есть функция оптимизация скорости загрузки сайта.

 

Как определяется скорость загрузки сайта

Каждая поисковая система имеет в своем распоряжении особого робота (его еще называют, поисковым пауком), выполняющего различные функции при просмотре сайтов в интернете. Допустим, в поисковой системе Google таким роботом является Googlebot. Путем внутренних ссылок робот-поисковик подбирает нужную информацию, сканируя страницы блога. Полученная информация передается в базу данных, где она обрабатывается и анализируется.

Сам робот не дает оценку просканированной информации. Однако он может дать сигнал поисковой системе о быстродействии сайта. Учитывая то, что число постов и страниц в интернете огромное количество, он проводит на каждом сайте строго отведенное на просмотр время. Если за это время он просматривает всю страницу, то быстродействие сайта эффективнее, чем если он не успеет. Логично:)

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

 

Что же можно сделать, чтобы ускорить загрузку сайта?

1. Уменьшить размер страниц сайта

Слишком «тяжелый» контент долго загружается. Уменьшая размер страниц,  автоматически увеличивается скорость его загрузки. Кроме этого, экономятся средства, если провайдер берет с вас плату за трафик.

Для того чтобы уменьшить размер страниц, надо применить сжатие данных в протоколе HTTP. Это уменьшает размер текстовых ресурсов, включающих элементы HTML, CSS и JavaScript, на 50% и более. Для сжатия данных протокола HTTP используются технологии zip, gzip и другие.

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

 

2. Снизить «вес» графики

Важно оптимизировать графические изображения. Ниже приведены рекомендации, помогающие уменьшить их размер на 50%:

  • Загружать фотографии в формате JPEG, не рекомендуется использовать формат PNG. Параметр JPEG позволяет сильно сжимать изображения и качество остается прежним. К примеру, в день выхода Windows 8 компания Microsoft опубликовала на главной странице сайта фото в формате PNG, «вес» которого составил 1 МБ. Фото аналогичного качества в формате JPEG имеет размер приблизительно 140 КБ.
  • Не использовать параметр PNG для обеспечения прозрачности графики. Эффект прозрачности — это очень красиво, но не всегда функционально.
  • Следует правильно выбирать уровень качества картинок в формате JPEG. Уменьшив качество изображения на сайте, вряд ли вы заметите изменения по сравнению с исходным изображением. Но вес картинки в данном случае значительно уменьшится.
  • Очищать графические файлы от цифрового мусора. Редакторы фото, оставляют в файле много различных данных, например, комментарии, рабочие версии изображения, неиспользуемые палитры. Для очистки файла нужно использовать сервисы.
  • Уменьшая вес фотографий, необходимо сохранить привлекательность сайта. Так как визуально привлекательные ресурсы больше ценятся.

 

3. Упростить код JavaScript и CSS

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

Для упрощения кода элементов JavaScript и CSS можно воспользоваться программными средствами или онлайн-сервисами:

 

4. Уменьшить число запросов браузера

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

Задумывались ли вы, почему главная страница Google выглядит так скучно? Одной из причин является желание разработчиков увеличить скорость ее загрузки.

Google сэкономил на рюшках и завитушках, зато увеличил скорость загрузки страницы.

 

Если рекомендация удалять все лишнее вам не подходит, воспользуйтесь следующими советами, позволяющими уменьшить количество запросов браузера:

  • Включить функцию кэширования. Если страницы вашего сайта являются статическими, не нужно «заставлять» пользователей загружать их содержимое заново. Для проверки результата возможно использование сервиса Redbot.

Возможность кэширования пока не включена

  • Комбинировать и сжимать файлы CSS и JavaScript.  Если объединить элементы, значительно уменьшается количество запросов браузера. Для комбинирования CSS и JavaScript воспользуйтесь специальными сервисами и ПО, например, CakePHP.
  • Объединяйте небольшие фотографии в CSS-спрайты. Это особенно удобно для ресурсов, на которых есть много иконок, кнопок и других маленьких изображений. 

    Важно!

    Включив опцию кэширования, скорость загрузки сайта при первом посещении не меняется. Но при повторной загрузке сайта  скорость значительно увеличится.

 

5. Сократить расстояние между сайтом и пользователями

Если сервер провайдера находится на огромном расстоянии от вас, то скорость загрузки значительно уменьшается. Для решения этой проблемы, используйте сети доставки контента (CDN) Amazon CloudFront или Akamai.

Используя CDN, вы автоматически изменяете URL ваших фото, CSS- и JavaScript-файлов. Когда пользователь заходит на ваш сайт, CDN загружает его «тяжелые» элементы со своего сервера, физически расположенного ближе всего к посетителю.

 

semantica.in

Ускорение сайта - Page Speed. Как увеличить скорость загрузки и работы сайта?

Здравствуйте, уважаемые читатели и гости блога asbseo.ru!

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

Ускорение сайта - Page Speed. Как увеличить скорость загрузки и работы сайта?На своем блоге я однажды уже писал про ускорение WordPress блога, вот эта статья.

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

В целях ускорения своего блога я также приобрел и установил скрипт кэширования «maxcache». Это отличный скрипт, который ускоряет блог и значительно снижает нагрузку на сервер Вашего хостинга! О скрипте я писал в своей статье: «Maxcache – скрипт кэширования WordPress блога».

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

Скорость сайта в Alexa Rank

На первом скриншоте Мы видим показатели тулбара Alexa Rank, который указывает на то, что мой блог имеет очень низкую скорость загрузки и 83% иных ресурсов грузятся быстрее.

Я не знаю, насколько этот показатель обоснован и важен, но это меня заставило призадуматься, и я обратился в панель вебмастера от Google (Лаборатория – Эффективность сайта), где также производится измерение скорости работы сайта. И вот что я увидел:

Скорость сайта в веб мастере Google

Здесь также меня уведомили о том, что скорость моего ресурса очень низкая.

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

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

Как ускорить сайт? Советы по увеличению скорости загрузки и работы любого сайта

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

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

Стоит ли идти на такие жертвы?

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

1. Оптимизация изображений

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

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

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

Проще говоря, если Вы загрузили изображение размером 1200×900 пикселей, а в пост вставляете картинку размером 600×450 пикселей, то в коде будет дополнительно указываться ширина и высота используемого изображения. Выглядеть такой код будет примерно так:

src="http://Ваш домен.ru/images/videokurs.png" alt="« width=»600"

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

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

2. Оптимизация кода и скриптов

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

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

А пока мои рекомендации сводятся к следующим, перечисленным ниже, мероприятиям.

Уберите все пробелы в коде

Код, не имеющий пробелов, выглядит не всегда понятно, и порой там будет непросто что-либо отыскать. Но зато такой код быстрее обрабатывается браузером, благодаря чему скорость загрузки (открытия страниц) сайта увеличивается. Вот так выглядит код моего блога:

Оптимизированный код для ускорения сайта

А вот так выглядит код таблицы стилей (файла styles.css):

Оптимизированный CSS код для ускорения сайта

Таблицу стилей (CSS) пока можно не трогать, к ней мы еще вернемся и оптимизируем ее код нажатием одной кнопки!

Упорядочите скрипты и удалите ненужные

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

Поэтому, по возможности, все скрипты нужно переносить в самый конец кода. Например, для WordPress блога это файл footer.php.

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

Кроме того, этот скрипт прописан в отдельном файле, в результате чего при загрузке страницы происходит открытие дополнительного файла (документа) и загрузка его кода, что снижает скорость загрузки страниц.

Поэтому подключать дополнительные файлы нежелательно, лучше прописывать коды в одном месте.

На своем блоге я также не использую ни одного (!) виджета.

Пустые виджеты блога asbseo.ru

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

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

Категории на блоге asbseo.ru

Получилось даже лучше чем было. 🙂

Page Speed – ускорение сайта от Google

Теперь давайте вернемся в панель для вебмастеров великого Google (инструменты для вебмастеров).

Здесь нас интересует пункт «Эффективность сайта», в котором имеется возможность оценить скорость работы нашего интернет ресурса, а также установить расширение Page Speed, которое выполнит анализ сайта и не только даст рекомендации по его ускорению, но и немного поможет исправить ситуацию.

К слову сказать, мне удалось «разогнать» свой блог с 63 до 84 попугаев из 100 возможных. И это еще не все, возможно у Вас получится приблизиться к заветной сотне, я тоже еще попытаюсь это сделать.

И так, скачивайте и устанавливайте Page Speed на свой браузер, я расскажу про него на примере браузера Google Chrome. Кстати, Page Speed работает не только с Chrome, но также и с браузером Mozilla Firefox.

После установки Page Speed необходимо перейти в настройки Chrome и выбрать пункт «Инструменты разработчика», который располагается во вкладке «Инструменты».

В появившемся окне выберите вкладку «Page Speed». Затем в адресную строку браузера введите адрес интернет ресурса, анализ которого Вы хотите произвести.

Когда сайт откроется, нажмите кнопку «Анализ».

Анализ Page Speed

В результате анализа Вы увидите оценку проверяемого ресурса, а также рекомендации для его ускорения.Рекомендации разделены на три группы по степени важности (приоритета):

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

— средний приоритет. Реализация этих предложений дает незначительный выигрыш или требует существенных усилий;

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

В Page Speed есть еще один пункт «Уже все готово», где перечислены уже выполненные предложения.

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

1. Включите сжатие

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

Включение gzip сжатия на хостингах может различаться.

Лично я смог включить gzip при помощи добавления следующего кода в файл .htaccess:

<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html <ifmodule mod_gzip.c> mod_gzip_on Yes mod_gzip_item_include file \.js$ mod_gzip_item_include file \.css$ </ifmodule> </IfModule>

После добавления этого кода сжатие заработало, вот только оно не включилось для JS файлов. Но, в любом случае, теперь проблема «Включите сжатие» переместилась в категорию с низким приоритетом.

2. Используйте кэш браузера

Здесь, я считаю, что пояснения не нужны. Для этого достаточно в файл .htaccess прописать следующий код:

ExpiresActive On ExpiresByType application/javascript "access plus 1 year" ExpiresByType text/javascript "access plus 1 year" ExpiresByType text/css "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/png "access plus 1 year" Header set Cache-control: private Header set Cache-control: public BrowserMatch "MSIE" force-no-vary BrowserMatch "Mozilla/4.[0-9]{2}" force-no-vary

Опять же, кэш у меня включился, но не для всех объектов. Зато проблема переместилась в категорию «Средний приоритет».

3. Оптимизируйте изображения

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

Оптимизация изображений для ускорения сайта при помощи Page Speed

Для оптимизации изображений нажмите на предложенные ссылки и сохраните оптимизированные изображения, удалив часть имени. После чего замените их в папке (обычно «images») с Вашей темой.

Оптимизация изображений для ускорения сайта при помощи Page Speed

4. Оптимизация CSS

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

Делается оптимизация CSS очень просто. Переходите по предложенной ссылке, в открывшемся окне копируете весь код и заменяете им содержимое Вашего файла Styles.css.

5. Предоставьте изображения с нужными пропорциями

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

6. Сократите Java Script

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

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

7. Укажите размеры изображений

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

Вот в принципе и все, что я хотел Вам сказать. Не пожалейте своего времени и ускорьте свой сайт!

Как Вам статья? Рекомендую подписаться на обновление моего блога, чтобы не пропустить выход новых постов!

Рекомендую Вам прочитать следующие посты моего блога:

— как сделать скриншот экрана;

— как записать видео с экрана;

— как скачать видео с YouTube;

— как создать блог;

— пассивный доход.

С уважением, Александр Бобрин

asbseo.ru

Ускорение загрузки страниц сайта

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

Обязательное условие при создании идеального сайта.

Проверка скорости загрузки страниц на всех устройствах с помощью Google PageSpeed Insights

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

На что же влияет загрузка страниц и стоит ли вообще заниматься оптимизацией:

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

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

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

Поэтому всегда необходимо проверять скорость загрузки страниц.

4. Алгоритм mobile-friendly — который Google официально объявил весной 2015 года. Согласно ему страницы, которые корректно отображаются на мобильных устройствах, будут ранжироваться выше в результатах мобильного поиска.

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

Ведь, оптимизированная страница:

• Имеет лучшее ранжирование.

• Улучшается скорость загрузки сайта в целом.

• Посетитель быстрее получит искомую информацию

Google PageSpeed Insights Ускорение загрузки страниц с Google PageSpeed Insights решение проблем

Посетить: Google PageSpeed Insights

Google Page Speed в любой момент абсолютно бесплатно предоставит Вам подробный отчет и список рекомендаций по улучшению параметров производительности вашего сайта, которые несомненно приведут к ускорению загрузки страниц Вашего сайта.

Например, самое элементарное сжатие картинок.

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

Оценка выполняется с точки зрения оптимальных методов повышения скорости отдачи страниц Веб-сервером (Web Performance Best Practices). В данном случае речь идет о таких методах, как:

1. Оптимизация кеширования: оптимизация кеширования статических объектов сайта (CSS, скриптов на JavaScript и изображений) как браузерами, так и прокси-серверами;

2. Уменьшение round-trip times (RTT): сокращение числа DNS-запросов и HTTP-редиректов; объединение файлов, содержащих скрипты на JavaScript; объединение файлов, содержащик CSS; упорядочивание файлов, содержащих CSS и скрипты на JavaScript, а также встроенных скриптов на JavaScript; использование четырех-пяти Веб-серверов для обеспечения параллелельной загрузки компонентов страниц;

3. Уменьшение размера запросов: уменьшение размера cookie’s; загрузка статических объектов из доменов, не использующих cookie’s;

4. Уменьшение размера ответов: использование Gzip-компрессии; удаление ссылок на неиспользуемые CSS; компактное написание кода JavaScript; компактное написание CSS; задержка загрузки кода на JavaScript, который запускается не сразу после загрузки страницы; оптимизация изображений; использование уникальных URL для всех компонентов страниц с целью снижения RTT;

5. Оптимизация рендерингаРе́ндеринг (англ. rendering — «визуализация») — термин в компьютерной графике, обозначающий процесс получения изображения по модели с помощью компьютерной программы. страниц браузером: отказ от неэффективных CSS-селекторов; отказ от CSS-выражений; перемещение ссылок на CSS, а также встроенных CSS в заголовки документов; определение размеров изображений.

ex-hort.ru

Ускорение загрузки страниц сайта. Оптимизация изображений, css, html и php кода. Настройка .htaccess

В этой статье я хочу поделиться своим опытом оптимизации и ускорения загрузки сайтов. В качестве примера будет использоваться блог на Wodrpress, так как он идеально подходит для приведения примеров. В дополнение ко всему это очень популярная CMS и многим будет интересно узнать, как можно ускорить загрузку сайта и повысить Page Speed страниц. В этой статье я очень подробно и пошагово буду объяснять, как оптимизировать и ускорить свой сайт, поэтому любой желающий даже без знаний html, css и php сможет без проблем ускорить свой сайт. На этом вступительная часть заканчивается, и мы сразу переходим к делу.

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

Первым делом нам нужно подготовить все необходимые инструменты, которые могут нам потребоваться при оптимизации сайта. Для начала нам понадобится браузер Mozilla Firefox. Я выбрал именно его, так как он наиболее подходящий для наших целей и к нему много разных дополнений. Затем нам потребуется скачать и установить дополнение для Mozilla Firefox. Оно называется Firebug. Скачать Firebug можно перейдя по этой ссылке. После установки этого дополнения нам потребуется скачать и установить еще одно под названием Page Speed, которое можно найти по этому адресу.

Ну и в завершение для оптимизации нашего сайта нам потребуется текстовый редактор Notpad++ для редактирования файлов и FTP клиент для их закачки на сервер. Итак, скачав и установив все необходимые инструменты для оптимизации, переходим к самой оптимизации сайта.

Ускорение загрузки страниц сайта — оптимизация изображений (графики)

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

Первым делом давайте рассмотрим очень хороший сервис для оптимизации изображений от Yahoo. Его вы можете найти по этому адресу. Для начала работы вам нужно перейти во вкладку «UPLOADER», нажать кнопку «Select files and smush» и в открывшемся окне указать изображения, которые вы хотите оптимизировать. После загрузки файлов вам остается лишь скачать их и заменить на сервере.

Хочу заметить, что иногда оптимизированные изображения могут менять свой тип, например с gif на png. В этом случае вам нужно будет изменить путь к картинке, указав в конце вместо старого расширения новое. В случае статей, то проще будет заново добавить изображение. Если же картинка являлась элементом темы (шаблона), то вам придется изменить путь к ней в таблице стилей используемой темы, но зачастую эти изображения не приходится оптимизировать, так как над этим уже позаботились разработчики, но бывают и исключения.

Для того чтобы это проверить зайдите на страницу, которую вы хотите оптимизировать и ускорить, запустите Firebug, который зачастую находится в правом нижнем углу браузера и перейдите во вкладку «Page Speed» после чего нажмите «Analyze Performance». Во вкладке «Optimize images» вы можете увидеть все изображения, которые рекомендуется оптимизировать. Просмотрев их, вы можете принять решение, стоит ли это делать или нет. Если выгода небольшая, то можно оставить как есть. Зачастую в этом случае данная вкладка отмечена зеленой галочкой и это означает, что с оптимизацией изображений у вас все в порядке.

Ускорение загрузки страниц сайта — оптимизация CSS, HTML, PHP

Также немного можно ускорить загрузку сайта сжимая и уменьшая размеры файлов таблиц стилей (Каскадные таблицы стилей CSS — Часть 1 — Необходимый минимум знаний для работы с CSS), а также HTML и PHP файлов. На этом можно выиграть лишние миллисекунды в зависимости от скорости интернета и размера этих самых файлов.

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

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

Итак, давайте подведем итог по оптимизации CSS, HTML и PHP файлов. Одним словом не стоит пренебрегать оптимизацией этих файлов. В большинстве случаев это не даст большого выигрыша по времени, но поможет немного ускорить загрузку вашего сайта.

Также рекомендую по возможности объединять файлы в один, к примеру таблицы стилей. Это поможет ускорить сайт за счет уменьшения количества соединений. Для примера возьмем плагин постраничной навигации в WordPress, о котором я писал в статье «Постраничная навигация в WordPress. Плагин WP-PageNavi и его настройка». Для этого открываем файл CSS плагина WP-PageNavi и копируем все правила в файл CSS вашей темы. Затем заходим в административную панель и отключаем «Использование собственной таблицы стилей».

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

Ускорение загрузки страниц сайта – Включение кэширования браузера. Настройка файла .htaccess

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

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

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

<IfModule mod_expires.c> # включить установку http-заголовков expires ExpiresActive on # установление даты по умолчанию (2592000 секунд – 30 дней) #ExpiresDefault A604800 # можно отсчитывать время от момента последнего изменения запрашиваемого объекта #ExpiresDefault M604800 # также можно задавать время отдельно для различных типов объектов # для html-страниц #ExpiresByType text/html A2592000 # для текстовых файлов #ExpiresByType text/plain A2592000 # для изображений ExpiresByType image/gif A2592000 ExpiresByType image/jpeg A2592000 ExpiresByType image/png A2592000 ExpiresByType image/ico A2592000 #Для файлов CSS и Javascript ExpiresByType text/css A2592000 ExpiresByType text/javascript A2592000 ExpiresByType application/javascript A2592000 </IfModule>

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

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

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

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

На этом все. Удачи вам и до скорых встреч на страницах блога.

Обнаружили ошибку? Выделите ее и нажмите Ctrl+Enter

dmitriydenisov.com

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

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

Ускорение сайта и конверсияУскорение сайта и конверсия

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

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

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

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

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

Время загрузки страниц сайта

Время загрузки страниц сайта

Ко всему прочему сейчас идет бурный рост мобильного трафика в рунете, а значит добавляется еще одна проблема, ибо там скорость загрузки зачастую лимитируется еще и узостью канала клиента. Так Гугл недавно привел данные, что среднее время загрузки мобильной посадочной страницы – 22 секунды. И, по словам Гугла, это здорово влияет на доходы, ибо конверсии на мобильных версиях существенно ниже, чем на дестопных (именно из-за их «тормознутости»).

Гугл при этом довольно настойчиво продвигает свое решение этой проблемы — AMP (облегченные, а значит ускоренные мобильные страницы сайта). Но вещь эта новая и поддерживается в полной мере пока только Google, а у нас Яндекс все еще в лидерах поиска ходит (особливо по коммерческим запросам). К тому же подойдет это в полной мере только контентным проектам, ибо сильно урезает функционал страниц сайта. В общем, будет ли будущее у этой задумки пока до конца не ясно.

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

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

Показатели скорости сайта

Показатели скорости сайта

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

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

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

Опыт борьбы за скорость и конверсию от флагманских сайтов

На Хабре есть довольно интересная подборка исследований на эту тему (в том числе проводимых Гуглом в своей выдаче). Как вам к примеру такие результаты:

0,5 секунды задержки на сервере отнимают 1,6-1,9% конверсии, повышают показатель отказов на 4,6-4,7%

Всего каких-то полсекунды. Пшик или даже меньше. Или вот еще от Амазона:

Ускорение на 0,1 секунды увеличивает выручку на 1%

И таких примеров там масса от различных популярных проектов, у которых миллионные и миллиардные аудитории, а значит данные получаются весьма достоверными (собранными на больших масштабах).

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

На том же Хабре описан кейс по оптимизации крупного и старого сайта, обросшего кучей дополнений чудовищно замедляющих его скорость загрузки. После проведения целого комплекса работ (даже проигрыватель видео оптимизировали и сделали предзагрузки популярных страниц) сайт ускорился в 5 раз. При этом конверсия увечилась на 20%. Интересны еще и расклады по зависимости от скорости загрузки в различных диапазонах скоростей:

Как скорость загрузки влияет на конверсию

Как скорость загрузки влияет на конверсию

Т.е. чем медленнее был ваш ресурс изначально, тем больше прирост в конверсии (продажах или доходах с рекламы — не суть важно) вы получите при приведении его в норму. Есть о чем задуматься.

На Хабре есть еще любопытный кейс по среднему ускорению сайта всего на 1 секунду и результирующего прироста конверсии на 10%. Тут, правда, нужно понимать, что 1 секунда — это средняя температура по больнице. У самых медленных посетителей скорость загрузки выросла на 6 секунд, а конверсия у них же выросла на треть. Для каких-то посетителей ничего не поменялась (ни скорость, ни отдача от сайта).

Там же были приведены интересные данные, где, например, пара секунд задержки с загрузкой формы заказа приводит к потере пятой части заказов (многие сейчас нетерпеливы):

Конверсия на сайте в зависимости от скорости его загрузки

Конверсия на сайте в зависимости от скорости его загрузки

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

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

  1. Walmart — 4 секунды = 20% конверсии
  2. Edmunds — ускорение на 80% = на 20% больше просмотров
  3. Lenta.ru — на треть выросло время на сайте и глубина просмотра после ускорения
  4. Guardian — появление основного контента страниц всего за 1 секунду
  5. FT — зависимость уровня вовлеченности от скорости работы сайта
  6. Как 0,1 секунды ускорения загрузки сайта может дать дополнительные миллионы долларов

Что может тормозить загрузку страниц и как на это повлиять?

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

В принципе, методы ускорения сайта своими силами можно обрисовать примерно так:

  1. Постараться уменьшить число http-запросов, которые браузер посетителя отправляет вашему серверу (где хостится сайт), а также сторонним серверам (аналитика, реклама, кнопки и виджеты соцсетей). Например, каждое изображение используемое на странице (в html коде или в качестве фона в CSS) требует для загрузки отдельного запроса. Каждый файл CCS, Js и прочая статика тоже подгружается отдельным запросом. Значит для снижения числа запросов нужно: все фоновые изображения постараться объединить в спрайты, а также объединить все файлы CSS в один, равно как и файлы стилей JS. Про все это я писал отдельно на примере Вордпресса.
  2. На скорость загрузки влияет не только число запросов, но и общий вес загружаемых файлов. Следовательно, следующим шагом будет:
    1. Максимальное сжатие (желательно без потери качества) и оптимизация (отказ от ненужных «погремушек» типа прозрачность и т.п.) всех имеющихся изображений. Способов реализации много (в том числе и онлайн сервисы по сжатию изображений), но я последнее время юзал бесплатную прогу ФайлОптимизер. Сжатие на лету возможно при подключении внешнего сервиса, но об этом чуть ниже.
    2. Сжимать html файлы страниц в Gzip (этот вид архивов браузеры умеют автоматом раскрывать), а так же CSS и JS. Все это, в принципе, можно делать на сервере (как загодя, так и на лету). Другое дело, что не всегда это можно сделать доступными способами (скорее всего потребуется привлекать фрилансера).
    3. Почистить непосредственно код, убрав лишнее и дублирующее содержание.
  3. На скорость загрузки еще влияет расстояние от вашего хостинга до компьютера посетителя. Если он с другого конца земного шара, то ждать ему придется существенно дольше чем тем, кто находится в том же городе (или хотя бы регионе). Выходом в этом случае может быть подключение сайта к CDN (сети доставки содержимого). Грубо говоря, копии файлов страниц вашего сайта будут храниться не в одном месте, а сразу на пуле распределенных по всему миру серверов. Каждому посетителю данные будут отдаваться с того сервера, который ближе к нему.
  4. Также на скорость загрузки может влиять низкая скорость интернета у посетителя вашего сайта. В современных реалиях такая проблема возникает в основном у мобильных пользователей (не везде 3G ловится). Как я уже упоминал выше, в этом случае самым действенным вариантом (на данный момент) будет отложенная загрузка изображений и виджетов на мобильные устройства. Т.е сначала грузится Html и CSS (текст, разбивка и разметка), а картинки и прочие виджеты (функциональные блоки) подгружаются по мере прокрутки страницы. Как это реализовать самому я не знаю (внешние сервисы это позволяют реализовать).

И это только грубые мазки, ибо есть еще масса нюансов влияющих на скорость загрузки. Например, использование шрифтов не входящих в базовый набор любой ОС замедляет отображение страниц, если их не оптимизировать. Если сайт зарабатывает на показе рекламы, то различные внешние коды ее подгрузки могут конфликтовать и мешать друг другу. Желательно так же, чтобы сначала грузился основной контент (сверхбыстро), а затем все остальное. И об этом нужно думать, учитывать и отлаживать.

Что-то может подсказать сервис Гугла, но там как правило говорят только о проблеме, а не о ее решении. Оно и понятно — движков сайтов и типов серверов море, а универсальных решений по сути нет. Детально изучить http запросы и увидеть все стадии загрузки вебстраниц вашего сайта позволит сервис WebPageTest.org.

Изучение скорости загрузки вебстраницы

Изучение скорости загрузки вебстраницы

Особое внимание обратите на синюю вертикальную линию — именно это время и принято считать интервалом загрузки страницы. Если оно близко к 10 секундам, то нужно что-то срочно делать.

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

Ну, например, каждому под силу выгрузить с хостинга все картинки используемые на сайте к себе на компьютере и прогнать их через FileOptimizer (у меня он неделю без отдыха «лопатил» картинки на совсем не слабом компе). Ну, еще можно попробовать настроить сжатие Html, CSS и JS файлов на сервере (отложенное или на лету, правда последнее существенно повышает нагрузку на сервер, что может быть чревато). Для отложенной загрузки изображений можно использовать jQuery плагин LazyLoad.

Лезть еще глубже уже сложнее, ибо нужно чуток понимать в администрировании серверов (они чаще на Юникс-подобных системах работают), а так же знать как сделать то или иное действо, которое PageSpeed Insights считает необходимым выполнить для улучшения ситуации с отзывчивостью сайта. Да и PageSpeed Insights не истина в последней инстанции — это лишь набор базовых советов.

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

Однако, CDN самому не сделать, как ни крути. Да и специалиста стоящего еще поискать надо. Денег поднакопить и приобрести решимости все «ломать», чтобы собрать заново (последнее не обязательно, но вполне вероятно). А время идет. Поэтому есть вариант попроще и подешевле — подключить к сайту сторонний сервис, специализирующийся на повышении его скорости. Такие есть, и один из них я чуть ниже коротенько рассмотрю.

Быстрое решение — подключение к внешнему сервису

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

Например, у Айри для вебмастеров есть довольно приятный по деньгам тариф, позволяющий применить оптимизацию скорости. Правда он партнерский (пока не понял что нужно, чтобы его получить). Тарифы для интернет-магазинов и представительств (судя по приведенному трафику — очень серьезных) приведены тут, но там уже другой порядок цен.

В Айри.рф меня больше всего прельщает географически распределенная сеть по рунету (странам СНГ) и ближнего зарубежья. У аналогичных буржуйских сервисов дата центры в основном в Европе и Штатах, что несколько нивелирует всю прелесть использования CDN, ибо до посетителя сайта расстояние будут даже выше, чем при отправке страниц с родного хостинга. Тут же как раз будет явный выигрыш от распределенного по СНГ размещения вашего сайта.

Ну и, естественно, тут будет все то, что можно реализовать для ускорения сайта путем его подключения к аналогу обратного кеширующего прокси (Айри.рф):

  1. CDN — содержимое страниц вашего сайта будет грузиться в браузер посетителя с ближайшего к нему дата-центра Айри.рф, что снизит как время отправки запроса, так и время загрузки файлов в браузер.
  2. Распределенная по СНГ сеть собственных DNS-серверов. Подключение вашего сайта к этому сервису будет заключаться в простом прописывании их DNS серверов в настройках вашего регистратора доменного имени. Все запросы посетителей будут идти через эти сервера, которых много по всему миру и которые весьма быстро обрабатывают запросы. В итоге снижается время с первого запроса до отображения первого пикселя на экранах браузеров посетителей.
  3. Вся статика (картинки, содержимое и html разметка страниц, файлы стилей и скриптов) кешируются на распределенных серверах Айри.рф и отдаются с ближайшей к посетителю сайта географической точки. К вашему реальному серверу (хостингу) обращений при этом не идет, что снижает на него нагрузку. Кроме этого устанавливается большой строк кеширования статики в браузерах посетителей, чтобы они повторно не подгружались при открытии страниц сайта.
  4. Статика не только кешируется, но и максимально возможным образом сжимается (без потери качества). Размеры передаваемый файлов (картинок, страниц, стилей и скриптов) в этом случае могут уменьшаться в разы, что существенно увеличивает скорость загрузки.
  5. Кешированные в Айри.рa страницы могут отдаваться посетителям сайта даже тогда, когда ваш хостинг или ВПС повиснет, либо по каким-то другим причинам будет недоступен. Т.е. перерывов в работе сайта вообще не будет. При этом сервис сообщит вам о проблеме с хостингом, чтобы вы могли принять меры по их устранению.
  6. Сервис умеет объединять все файлы, передаваемые при запросе страниц, которые можно объединить, что позволяет уменьшить количество запросов к сайту, а значит сократить время ожидания при открытии его страниц. Такой метод ускорения загрузки сайта особенно заметен при просмотре сайта с мобильных устройств.
  7. Для мобильных устройств используются отдельные алгоритмы, включая специальные изображения, отложенную загрузку картинок и виджетов, а так же облегченную верстку сайта.
  8. Осуществляется «умное» кэширование динамических страниц, которое хорошо работает для блогов, корпоративных сайтов и интернет-магазинов. Снижение времени ответа сервера на большинство запросов приводит к значительному росту позиций в поиске (на 10-20%).
  9. Для отражения хакерских атак на ваш сайт используются алгоритмы, блокирующие подавляющее число нежелательных запросов к вашему сайту. В том числе и блокируется обращение непонятных ботов (которые не имеют отношения к поисковикам), что само по себе еще и дополнительно снимает излишнюю нагрузку на ваш хостинг (можно будет использовать более дешевый тариф).
  10. На дорогих тарифах в Айри.рф, для фильтрации будут использоваться уже WAF-фильтры, которые практически стопроцентно защищают от подавляющего большинства возможных атак на ваш сайт (даже от массированных).

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

  1. Если ваш сайт «великий тормоз», то после подключения с сервису он таковым быть перестанет и будет одинаково быстро открываться на компах и мобильных у любых пользователей из СНГ, да и остального мира. Улучшатся позиции сайта в поиске, повысится конверсия и ваше настроение от роста доходов. По сути, это самый быстрый способ реализации данной концепции. Пример ускорения интернет-магазинов можно посмотреть тут.
  2. Если ваш ресурс постоянно Ддосят или еще как-то домогаются, то подключение его к подобному сервису в большинстве случаев снимет эту проблему. В качестве бонуса получите высокую скорость и 100% аптайм (всегда доступен). Пример смотрите тут.
  3. Если вам важна высокая доступность сайта из регионов России и СНГ, то распределенные CDN и DNS сервера придутся очень кстати.
  4. Если у вашего сайта высокая посещаемость, то подключение к Айру.рф может оказаться дешевле переезда на новое оборудование. За счет кеширования статики и динамического кеша можно разгрузить ваш сервер хостинга до приемлемых значений, а так же расширить канальную скорость за счет передачи значительной части трафика через мощности сервиса. Пример можно посмотреть тут.

А в целом

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

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

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

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Подборки по теме

Рубрика: Ускоряем загрузку сайта

ktonanovenkogo.ru

Как ускорить сайт на wordpress, способы ускорения загрузки сайта

Рано или поздно все начинающие веб-мастера сталкиваются с проблемой скорости загрузки страниц сайта. Владельцы сайтов на платформе WordPress не являются исключением. Спустя месяц-два все сайты на WordPress начинают «тупить», причиной того может стать много факторов. В данной статье мы разберем основные причины и способы как ускорить сайт на wordpress.

Навигация по странице:

10 советов по ускорению загрузки сайта на WordPress

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

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

Давайте перечислим как возможно ускорить сайт на wordpress:

  • gZIP сжатие;
  • уменьшаем css и JavaScript;
  • сокращение размера заголовка отзыва;
  • очистка базы данных от мусора;
  • убрать лишний JavaScript;
  • использовать кэширование для статического контента;
  • расположение css и JavaScript;
  • пользуйтесь поддоменами для паралельного скачивания;
  • откажитесь от ненужных плагинов;
  • выберите быстрый хостинг для своего сайта.

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

Совет 1. Ускорение WordPress с помощью GZip сжатия

Браузеры имеют свойство получать страницы сайта в сжатом, GZip виде. То-есть, при запросе клиента, ваш сервер посылает данные вашей страницы сайта в архиве. После чего браузер пользователя успешно извлекает данные из архива и показывает их на экране монитора. Этот процесс значительно ускорит загрузку вашей страницы, по этому не стоит пренебрегать этим методом.

Как проверить включено ли gzip сжатие

Для того что бы проверить включено ли сжатие на вашем сервере можно воспользоваться сайтом whatsmyip.org который покажет сжимаются ли ваши данные и на сколько эффективно.

Если по результатам проверки вы получите следующее:

Как ускорить сайт на wordpress

Значит ваши данные сжимаются и у вас все правильно работает.

Как использовать qzip сжатие, можно прочитать в отдельной статье.

Совет 2. Уменьшение CSS и JavaScript

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

Для того что бы уменьшить объем кода и ускорить загрузку страницы WordPress сайта существует несколько вариантов. Инструкции по которым можно прочитать у нас на сайте.

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

Чем больше у нас на загружаемой странице компонентов, таких как:

  • картинки;
  • скрипты;
  • флеш анимации и т.д.

тем медленнее она грузиться. Ведь правило протокола HTTP/1.1 ставит ограничение одновременной загрузки компонентов с одного хоста на уровне 2 штук. Таким образом у наши части страницы грузятся медленно и частями. Решение этой проблемы так же есть, и его мы детально разберем в следующей публикации.

Совет 4. Очистка базы данных от мусора

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

Загрязненная БД приведет к огромным задержкам при загрузке, из-за того что количество переборов будет очень велико. Правильно настроена корректировка внесения данных в базу и своевременная очистка ее от «шлака» поможет вам сохранить скорость и чистоту, позволит неплохо ускорить сайт на wordpress.

Совет 5. Убрать лишний JavaScript

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

yrokiwp.ru