Оптимизируем скорость загрузки сайта – улучшаем ПФ и позиции. Оптимизация кода сайта увеличение скорости


как увеличить скорость загрузки сайтов WordPress, Wix и Битрикс

Как увеличить скорость загрузки сайта? Черепаха или гепард — выбор за вами!

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

Как увеличить скорость загрузки сайта? Черепаха или гепард — выбор за вами!

Медленный сайт — горе в семье

Ну вот, после долгих часов и дней работы, ваш личный интернет-ресурс готов. Вам уже снится, как денежки прям роем летят в ваш дом, жена мечтает о новой шубке, а дети — о куче игрушек. Но… Что-то пошло не по плану, и все обходят ваш сайт стороной?

Поисковики выдают ваш ресурс на 100500 странице? С этим нужно что-то делать! Если вся информация написана без ошибок, в глазах не рябит от изобилия рекламы, а кнопки меню можно увидеть, не используя при этом микроскоп, то предположительно проблема в быстроте загрузке веб-ресурса.

Определяем быстроту загрузки интернет-ресурса

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

GTmetrix — в процессе работы оперирует данными Yahoo и Google. По завершении работы вы получаете не только показатели быстроты ресурса, но и развернутый отчет по работе интернет-проекта с практическими рекомендациями по оптимизации.

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

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

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

Load Impact к тестированию подходит ну очень основательно. По завершении вы получаете целую охапку метрик и карту с расстоянием вашего и их сервера.

Как вы уже поняли, существует немало способов узнать быстроту своего интернет-проекта, а также получить рекомендации, как увеличить его скорость (и совершенно неважно, где вы решили создать сайт — на WordPress, Битрикс или Wix).

Как увеличить скорость загрузки сайта? Черепаха или гепард — выбор за вами!

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

Создали сайт WordPress, но не знаете, как увеличить скорость загрузки? Держите несколько полезных советов!

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

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

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

4. Отдавайте предпочтение нормальному хостингу. Хостинг — это место, где располагается ваш веб-ресурс, и для вас очень важно, чтобы он работал без сбоев. Учиться конечно можно и на бесплатных, но серьезные сайты лучше делать на платных. Тут уже сами будете выбирать, отталкиваясь от ваших финансовых возможностей и потребностей веб-ресурса.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

5. Проведите кэширование ресурса. Сделав кэширование, вы сможете ускорить свой веб-сайт в несколько раз. Делается это достаточно просто — установите плагин WP Super Cachе, выставьте необходимые настройки и вперед! Кэширование не только благоприятно влияет на быстроту сайта, но и снижает нагрузку на сервер.

6. Если, не дай Бог, после всего проделанного, ваш сайт продолжает грузиться со скоростью черепахи, то рекомендую: обновить до последней версии WordPress, сократить JavaScript код и CSS (изучить JavaScript можно по видеоурокам) и использовать VPS-хостинг.

Как увеличить скорость загрузки сайта? Черепаха или гепард — выбор за вами!

Ускоряем сайты на Bitrix

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

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

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

пользуйтесь спрайтами!

Кэшируйте статическую информацию с помощью стандартного автокэширования Bitrix — CDN;

старайтесь использовать стандартные компоненты Bitrix;

оптимизируйте изображения;

используйте технологию «Композит».

Как увеличить скорость загрузки сайта? Черепаха или гепард — выбор за вами!

Можно ли увеличить скорость на веб-сайтах WIX?

Так сказать, «на закуску», хочу поведать вам, что увеличить скорость загрузки можно и на сайте Wix. Как? — спросите вы. Да очень просто!

Используйте CDN — он оптимизирует доставку и дистрибуцию информации конечным пользователям;

отдавайте предпочтение прогрессивным изображениям и их автоматической оптимизации;

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

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

Дорогие читатели, если эта статья вам понравилась — подписывайтесь на наш блог и делитесь ею с друзьями! Успехов!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Практика оптимизации сайта: ускорение загрузки Вашего сайта в разы

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

Научиться

webformyself.com

Оптимизируем скорость загрузки сайта – улучшаем ПФ и позиции

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

Как влияет скорость загрузки сайта на поведение пользователей? Еще в 2009 году команда Google проводила эксперимент – небольшой группе пользователей искусственно занизили скорость загрузки страниц выдачи на 100-400 м. Это сразу сказалось на их действиях – пользователи стали вводить меньше запросов, чем обычно. Более того, чем дольше они подвергались этому эксперименту, тем реже начинали обращаться к строке поиска.

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

Чем быстрее сайт, тем выше ПФ

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

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

Мы провели свой эксперимент с одним сайтом по недвижимости.

Сократив время загрузки страниц с 6-7 до 3 секунд, мы получили:– уменьшение показателя отказов с 44% до 40%;– увеличение глубины просмотра с 3,5 до 5 страниц на посетителя;– при этом среднее время на сайте не изменилось.

 

Снижение показателя отказов: snizhenie-otkazovsnizhenie-otkazov

 

Рост глубины просмотра:glubina-prosmotraglubina-prosmotra

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

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

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

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

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

Отчет по скорости загрузки в Google Analytics

Зайдите в Google Analytics – Поведение – Скорость загрузки сайта – Обзор:

graphgraph

Не пугайтесь, тут показана средняя скорость загрузки из разных стран, браузеров и девайсов. Обычно это в 2-3 раза выше, чем на вашем компьютере.

Скорость загрузки с разных браузеров

Проверить скорость загрузки с разных стран и браузеров можно на сайте Webpagetest.org. Вы получите данные по скорости при первом заходе и при повторном посещении, а еще детальный «водопад» процессов, из которых состоит сама загрузка вашей страницы:

waterfall-1waterfall-1

На графике видно, что, запрашивая данные каждый раз с нового хоста, мы теряем время на DNS Lookup. А все java-скрипты блокируют параллельную загрузку остального контента. Тут же мы видим медленный DNS Lookup www2.acint.net – это счетчик Sape.ru (хорошо, что он стоит внизу и не блокирует вывод остального контента).

Favicon и изображения в рекламных блоках Яндекса с одной стороны повышают CTR объявления, с другой замедляют скорость загрузки сайта. Порой небольшая картинка в РСЯ может весить около 60 кб, хотя ее можно сжать до 10 кб. Задержки с загрузкой блоков РСЯ так же случаются, потому для скорости сайта лучше использовать блоки без картинок, ну и не забываем про асинхронную загрузку кода РСЯ.

Детальная таблица с затраченным временем на каждый элемент выглядит так:

table.mintable.min

Как происходит загрузка страницы

Чтобы начать оптимизировать скорость загрузки сайта нужно понимать сам процесс ее генерации. Что же происходит, когда вы набираете адрес сайта и жмете кнопку Enter?

1. От браузера идет DNS запрос. Так браузер узнает ip адрес, по которому можно найти ваш сайт. Потом идет TCP-запрос к серверу на соединение и ответ сервера разрешающий коннект (подробнее тут). Мы еще даже не начали ничего загружать, а уже потеряли 50-100 мс.

2. На сервере начинается генерация страницы сайта. Запускается выполнение PHP, считываются данные из MySQL-базы. Время процесса зависит от загрузки сервера на данный момент, его настроек и конфигурации, а так же от качества кода страницы. Оптимальным считается 200 мс, но часто этот показатель выше. Сгенерированный код пересылается браузеру.

3.Теперь браузер знает все адреса картинок, стилей, шрифтов, java-скриптов и начинает по каждому элементу делать запросы на сервер, забирать эти файлы. Какие-то процессы идут параллельно, а некоторые останавливают все остальные загрузки.

4. Браузер отрисовывает страницу из полученных элементов и выполняет java-скрипты.

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

1. Используйте параллельные загрузки. Браузеры могут загружать элементы сайта в несколько потоков. Одновременное число коннектов к одному хосту обычно не больше 6. Т.е. браузер не может одновременно скачивать более 6-ти объектов. Общее число соединений с разными хостами в Chrome ver.24 – 9, для Firefox ver.18 – 11. Если вынести картинки на отдельный поддомен, то у них будет возможность загружаться параллельно с элементами размещенных на других хостах. Но не увлекайтесь с поддоменами, на каждый новый поддомен добавится время на обработку DNS запроса.

2. Размещайте java-скрипты в конце кода страниц, так как они блокируют загрузку других элементов.

3. Используйте асинхронныый код при размещение внешних счетчиков. Модули и кнопки социальных сетей, счетчики, метрика, блоки РСЯ (особенно с картинками) – все это делает ваш сайт медленнее, а иногда и блокирует загрузку вашего сайта. Старайтесь размещать такие скрипты только с поддержкой асинхронной загрузки.

4. Сжимайте картинки. Думаете, ваши изображения хорошо сжаты? С помощью сервиса Сompressjpeg.com почти все картинки можно уменьшить на 60-70%, а это очень важно для мобильного трафика. Для уменьшения числа коннектов, лучше использовать спрайты для объединения картинок в одну.

5. Попробуйте работать с CDN. Это сети, хранящие отдельные элементы сайта (например, шрифты на fonts.gstatic.com, java-скрипты на ajax.googleapis.com, элементы Яндекса на yastatic.net и т.д). Такие сети призваны ускорить загрузку сайта, отдавая файлы с ближайшего геосервера, они не нагружают ваш сервер и уменьшают его трафик. Но целесообразность использования CND нужно проверять на своем сайте, порой получается обратный эффект. К примеру, одному из наших сайтов, шрифты c CDN подгружались дольше, чем со своего сервера.

Что еще нужно оптимизировать?

Получить готовый список рекомендаций по вашему сайту можно с помощью инструмента PageSpeed Insights for Chrome. Устанавливается в браузер, после чего находим его через меню: Дополнительные инструменты – Инструменты разработчика – Вкладка PageSpeed – Кнопка «Начать анализ».

Полезное видео про оптимизацию скорости загрузки сайта:– Клиентская оптимизация, Иван Карев– Оптимизация фронтенда, Олег Мохов– Верстка. Вид снизу, Марина Широчкина

optimizatorsha.ru

web master | увеличиваем скорость загрузки сайта

Главная » Увеличиваем скорость загрузки сайта

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

Содержание:
  • § 1. Ускорение сайта методом оптимизации изображений
  • § 2. Ускорение загрузки сайта засчет оптимизация CSS и JavaScript
  • § 3. Основные работы по увеличению скорости загрузки сайта
  • § 4. Простые советы, как ускорить загрузку сайта 

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

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

§ 1. Ускорение сайта методом оптимизации изображений

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

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

Форматы изображений

Форматирование изображений – это наиболее важная тема, и является таковой потому, что каждый знает, что различные форматы влияют на скорость загрузки изображения. Однако существует сформировавшееся мнение на этот счет, которое мы можем использовать де-факто как стандарт. JPEG – для фотографий, GIF – для плоских изображений, содержащих малое количество цветов, и PNG – для всех остальных. Большинство веб-дизайнеров и разработчиков, которых я знаю, используют PNG практически для всего, кроме одноцветных и двухцветных кнопок, где они используют GIF.

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

Код изображения

Самое плохое, что мы можем сделать и отрицательно повлиять на скорость загрузки изображения, это позволить коду автоматически выставлять размеры изображения. Ну что ж, можно сказать: «Разрешим коду сделать ___ для нас». В таком случае обычно говорят: «Можешь сделать лучше – сделай сам», и это действительно правильно. Используя такие показатели, как width=’60px’ height=’50px’, можно действительно снизить нагрузку на сервер и время загрузки им изображения, так как сервер считывает информацию о странице и видит поставленные перед ним задачи. Потому, убедитесь, что вы на верном пути и сделайте так со всеми вашими изображениями.

Инструменты оптимизации изображений

Инструменты всегда полезны. Хорошо, в большинстве случаев… Иногда они мешают и отвлекают внимание, но в данном случае они действительно будут очень полезными. Если вам удастся найти замечательный инструмент для оптимизации изображений, прежде всего, пожалуйста, напишите об этом в комментариях, так как мы всегда в поиске лучшего. Следующие несколько инструментов – мои любимые. Мне нравится ImageOptim для Mac и Riot для Windows. Они очень отличаются друг о друга, но выполняют одну задачу.

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

§ 2. Ускорение загрузки сайта засчет оптимизация CSS и JavaScript

Чтобы ускорить сайт при помощи оптимизации кода - ниже перечисленны некоторые способы:

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

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

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

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

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

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

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

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

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

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

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

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

§ 3. Основные работы по увеличению скорости загрузки сайта 

§ 4. Простые советы, как ускорить загрузку сайта
  • 1. Уменьшите количество HTTP-запросов;
  • 2. Помещайте CSS файлы в начале страницы;
  • 3. Помещайте javascript в конец страницы;
  • 4. Минимизируйте css и javascript;
  • 5. Используйте поддомены для параллельного скачивания;
  • 6. Используйте кэш браузера;
  • 7. Используйте CDN для загрузки популярных JavaScript библиотек;
  • 8. Оптимизируйте ваши изображения;
  • 9. Не масштабируйте изображения;
  • 10. Используйте Gzip- сжатие.

Не забывайте написать ваш комментарий, понравилась ли статья. От вас пару слов, а мне — признание поисковых систем, что пишу нормальные человеческий статьи. Заранее спасибо вам!

profwebsit.ru