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


Улучшаем скорость загрузки сайта WordPress

Улучшаем скорость загрузки сайта WordPress

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

На что влияет скорость загрузки сайта

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

Пример статистики отказов в Метрике

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

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

Опытные вэбмастера могут задаться вопросом, почему не поставил редирект на новые страницы по новым url’ам,

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

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

Улучшаем скорость загрузки сайта WordPress

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

Оптимизация кода сайта плагином

Для начала нужно оптимизировать CSS, HTML коды и коды скриптов, для этого есть специальный плагин, он называется Autoptimize, его скрин приведен ниже

Улучшаем скорость загрузки сайта WordPress

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

Улучшаем скорость загрузки сайта WordPress

 

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

Включаем кэширование на сайте

Кэширование на сайте под управление WordPress это просто необходимая штука, без него, по мере наполнения сайта контентом и увеличению числа посетителей в онлайне, возрастет нагрузка на хостера, а они этого очень не любят, поэтому ресурсы на каждом сервере ограничены для каждого договора хостинга, поэтому сайт начнет подтормаживать. Почему так происходит, дело в том что при обращении страницы, сервер каждый раз должен будет выполнить php код, прочитав при этом css стили и выполнив все скрипты. Что делает плагин кэширования? Он просто сохраняет созданные сервером страницы из ваших php в виде html файлов, которые складывает в свою папку, и когда в очередной раз к этой странице обращается пользователь, он просто отдает сохранную страницу, которая не нуждается в сложных процессах генерации ее сервером вашего хостера.

Я как и многие вэбмастера, использую плагин WP Super Cache, пробовал несколько других. на разных проектах, но этот понравился больше всего. Сразу перейду к настройкам. Я пользуюсь двумя кнопками в нем, после установки его нужно ключить, выбрать чекбокс 1, и нажать 2 «Обновить».

Улучшаем скорость загрузки сайта WordPress

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

Улучшаем скорость загрузки сайта WordPress

Удаляйте весь кэш, потом обновляйте страницу.

Есть еще кэш браузера, его делает сам браузер, и хранит у себя в папке. сделано это тоже для скорости загрузки, его тоже нужно иногда удалять, для этого когда обновляете страницу, вместо F5, нажимайте Ctrl + F5

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

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

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

Улучшаем скорость загрузки сайта WordPress

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

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

seo-wp.ru

10 способов ускорить загрузку вашего сайта

Считаете что скорость загрузки вашего сайта не имеет особого значения? Ошибаетесь! Всего лишь односекундная задержка во время загрузки, конвертируется в снижение количества просмотров страниц на 11%, общей удовлетворенности пользователей на 16%, а количества возможных конверсионных действий – на 7%.

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

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

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

Убрать лишний код

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

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

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

GZIP

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

Редиректы

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

Дополнения

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

Кэширование

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

Настройка сервера

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

Контент

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

Хостинг

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

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

www.imagecms.net

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

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

В общем, «плюнул» я на это. Зашёл на просторы Интернета, зарегистрировался на портале госуслуг и оформил получение данной услуги, без очередей и траты драгоценного времени.

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

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

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

Где узнать о причинах медленной загрузки сайта

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

Я использую два сервиса:

PageSpeedInsights – сервис от Google, по 100 бальной шкале показывает показатель скорости загрузки сайта для мобильных устройств и компьютеров. И даёт рекомендации по устранению причин медленной загрузки. Плюс данного сервиса – русский язык и хорошая справка. Минус – нет готовых решений.

PageSpeed

PageSpeed

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

GTmetrix

GTmetrix

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

Зачем нужна оптимизация изображения

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

К вопросу о том, что такое оптимизация изображения и как её делать? Скажу по-простому, — под оптимизацией изображения подразумевается уменьшение размера без потери качества. Только не надо путать размер (вес) файла с шириной и высотой в точках. Так же к оптимизации относится указание размеров изображения в HTML и CSS коде, и некоторые другие премудрости.

Средства оптимизации изображений

У кого есть Photoshop – можно делать с помощью этого графического редактора. Я именно так и делаю. Создал сценарий и одной кнопкой оптимизирую скриншоты к статьям.

Photoshop

Photoshop

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

Альтернативой будут два онлайн сервиса позволяющие оптимизировать изображения ничем не хуже. Правда, загружать изображения нужно по очереди. Это универсальные оптимизаторы, позволяющие оптимизировать файлы форматов JPG, PNG, GIF.

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

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

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

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

JPEG Optimizer – данный сервис лучше всех справляется с изображениями в формате JPEG.

В общем как видите инструментов достаточно и все хороши по-своему.

Массовая оптимизация изображений

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

Kraken.io – через этот сервис Вы можете оптимизировать сразу несколько изображений. Максимальный размер одного файла или суммарный вес всех изображений не должны превышать 10Мб. Вы можете за один раз оптимизировать несколько десятков, а то и сотню изображений. А ещё здесь есть возможность, скачать оптимизированные изображения в один клик, zip-архивом.

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

Krakin

Krakin

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

Если у Вас блог на платформе WordPress, то изображения будут храниться в

http://vashdomen/wp-content/uploads

и

http://vashdomen/wp-content/themes/vashtema/images

Это чаще всего, хотя могут быть и исключения.

Как узнать какое изображение тормозить загрузку сайта и оптимизировать его

Вот тут то и понадобится сервис GTmetrix. Проведя анализ сайта, нужно перейти в раздел «Optimizeimages». Здесь будут представлены все изображения требующие оптимизации и более того – уже готовый оптимизированный вариант изображения.

Параметры оптимизации изображения

Параметры оптимизации изображения

Нужно только скачать его и загрузить по указанному пути.

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

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

Использование изображений нужного масштаба

Если после анализа сайта вы видите низкий показатель «Serve scaled images»,

Не соответствие размеров

Не соответствие размеров

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

Размеры в коде

Размеры в коде

Так вот нужно изменить изображение до нужных 200х200 пикселей. Это легко сделать в фотошопе или бесплатном графическом онлайн редакторе Pixlr Edition.

Для начала скачиваете изображение к себе на компьютер, редактируете, и закачивает обратно по тому же адресу. В WodrPress дальше делать ничего не надо. А вот если это самописная страница, не забудьте в HTML коде указать нужные параметры ширины (width=»200″) и высоты (height=»200″). Отсутствие этих параметров влияет на скорость загрузки сайта, о чём свидетельствует параметр «Specify image dimensions» при анализе сайта в GTmetrix.

Сведения о размерах изображения

Сведения о размерах изображения

Как видно на скриншоте в моей теме не хватает параметров (16х16, 32х32) для иконок комментариев, категорий, даты и так далее.

Как указать параметры ширины и высоты изображения в теме WordPress

Итак, разберём мой пример. В моей теме не указаны размеры вот этих изображений:

Изображения без размера

Изображения без указания размера

Значит нужно найти в шаблоне место, где выводятся эти изображения. А выводятся они на главной странице и на странице материала. За главную страницу отвечает файл (index.php), а за материал отвечает файл (single.php).

Так вот отрываем административную панель WordPress– «Внешний вид» > «Редактор» — нужный файл. И добавляем параметры ширины и высоты, на основе предложенных размеров в отчёте GTmetrix.

Вставка параметров размера

Вставка параметров размера

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

А ещё скорей всего у вас в отчёте будет низкий показатель по параметру «Combine images using CSS sprites». Это параметр сообщает, что на сайте есть одинаковые изображения, которые можно объединить в спрайты для ускорения загрузки сайта. Но в двух словах этого не рассказать. Поэтому об этом поговорим в следующих статьях. А пока у вас есть над чем работать.

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

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

До встречи в следующих статьях.

С уважением, Максим Зайцев.

Адаптивная, SEO подготовленная WordPress тема

1zaicev.ru

Оптимизация скорости загрузки сайта : Сайтобаза

Мало просто создать сайт. Нужно чтобы его посетитель ещё и нормально получил информацию с него.

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

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

  • Оптимизация контентных изображений без потери качества, подключение медленной (lazy) подгрузки второстепенных картинок
  • Склеивание в спрайты изображений элементов оформление
  • Замена некоторых изображений на шрифты
  • Перевод некоторых изображений в инлайновые с помощью base64 кодирования
  • Оптимизация селекторов стилей, склеивание селекторов, минификация css
  • Перенос скриптов в подвал, интеграция с асинхронной или отложенной загрузкой, склеивание и минификация используемых скриптов
  • Оптимизация загрузки, кеширования и подгрузки шрифтов
  • Для изображений использование современных форматов хранения. Например webp
  • Оптимизация html структуры, удаление лишних элементов
  • Оптимизация работы сервера, настройки .htacess

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

  • Удаление лишних загружаемых шрифтов из шапки и перенос их в подвал
  • Объединение стилей и скриптов разных плагинов, их минификация и оптимизация загрузки
  • Чистка функционала темы от ненужных, неиспользуемых элементов
  • Настройка плагинов оптимизации изображений, кеширований
  • Дополнительная настройка серверов

Стоимость оптимизации сайта зависит от сложности, объема работ. В среднем цена за полный анализ и исправление ошибок – $30-40 за сайты небольшой сложности.

saitobaza.ru

Скорость загрузки сайта. Анализ, причины и оптимизация скорости – SEO

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

 

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

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

Например, поисковая система Google предпочитает поднимать в выдаче более «легкие» сайты, так как это помогает пользователю получить необходимую информацию в самые короткие сроки (вы же знаете, что время – это деньги. Гугл тоже это знает). Скорость загрузки сайта влияет на показатель отказов и глубину просмотра, которые считаются поведенческими факторами. Чем быстрее будет загружаться ваш сайт, тем эти показатели будут лучше.

Средняя скорость загрузки сайта (страницы) не должна превышать 4-х секунд (тут все зависит от конкретной страницы и ее содержимого). Самым оптимальным вариантом будет скорость до 2-ух секунд. Но в любом случае, чем быстрее скорость загрузки сайта – тем лучше.

 

 

Как анализировать скорость загрузки сайта.

Чтобы измерить скорость загрузки страниц сайта можно воспользоваться дополнением для браузеров FireFox и Google Chrome под названием Page Speed от Google.

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

 

Зайдите на свой сайт и в меню браузера выберите: Веб-разработка – Firebug – Открыть Firebug. Внизу страницы появится окошко с функциями этого дополнения (или откроется в новом окне), где вы увидите вкладку с названием «Page Speed».

Page Speed для FireBug

Нажмите кнопочку «Analyze Performance», после чего дополнение измерит скорость загрузки страницы и выдаст результат.

Результат анализа Page Speed

Этот результат представлен в виде уникальной шкалы «Page Speed Score», где скорость загрузки измеряется от 0 до 100 единиц. И чем выше эта цифра, тем быстрее загружается ваш сайт. Добиться результат в 100 единиц практически невозможно, но я считаю, что качественный сайт не должен содержать менее 80-ти единиц по данной шкале.

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

Советы Page Speed по оптимизации скорости

Я не буду описывать каждый пункт, так как их много и большинство из них не решаются в uCoz или решаются очень долго и технически сложно (нужно знать JavaScript), лучше я дам свои личные советы, которые помогут повысить показатель Page Speed. Если вам очень интересно самостоятельно во всем разобраться, то вы сможете через поисковые системы найти информацию по каждому из пунктов на русском языке.

Лично я использую Page Speed только для поверхностного анализа, получения советов и уже готовых оптимизированных файлов (скриптов, картинок и стилей CSS).

Для меня намного важнее конкретная скорость загрузки сайта. Чтобы измерить ее я пользуюсь онлайн сервисом Pingdom Website Speed Test.

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

Тут необходимо вставить URL страницы и нажать на кнопочку Settings.

Уберите галочку с «Save test and make it public» (сохранить результат и сделать его публичным) и поставьте маркер в Amsterdam, Netherlands (средняя скорость загрузки сайта для европейцев). Нажмите «Test Now»

Настройка анализа

Сервис проведет анализ и выдаст вам результат:

Результат времени загрузки сайта

Perf. grade – примерно тоже что и показатель в Page SpeedRequests – количество запросов браузера к серверуLoad time – время загрузки страницы сайтаPage size – «вес» страницы

Строка «Your website is faster than 79% of all tested websites» значит, что “Ваш сайт работает быстрее, чем 79% всех тестированных сайтов”.

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

Время загрузки конкретных файлов сайта

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

 

 

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

Главная цель оптимизации скорости загрузки страниц – максимально уменьшить количество HTTP запросов к web-серверу и облегчить браузеру просмотр HTML странички полученной в качестве ответа на этот запрос.

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

 

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

 

Графика и изображения.

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

Сюда входит:

  • Оптимизация веса изображений и их повторное «залитие» на сервер хостинга.
  • Оптимизация размера используемых изображений в будущем.
  • Объединение изображений в CSS спрайты.
  • Уменьшение количества изображений на странице.
  • Загрузка ВСЕХ изображений к себе в файловый менеджер.
  • Полный отказ от флэш-графики на страницах.

 

Поясняю: допустим, вы продвигаете (оптимизируете) страницу категории, на которой выводятся 10 материалов. Так вот, постер каждого из этих 10 материалов нужно оптимизировать, так как скорость их обработки влияет на общую скорость загрузки страницы категории. Материалы, находящиеся на 2, 3, 4 странице (если вы воспользуетесь переключателями) или на странице результатов сортировки – уже не принадлежат странице категории и не учитываются для нее. Более подробно про оптимизацию изображений я написал отдельную статью.

 

Скрипты.

Браузер считывает страницу сверху вниз и по мере попадания к нему «на глаза» скриптов, ему требуется время, чтобы обработать каждый из них. Только после обработки кода JavaScript, браузер продолжает «чтение» страницы дальше. Для решения проблемы необходимо оптимизировать ВСЕ скрипты.

Сюда входит:

  • Удаление лишних скриптов.
  • Загрузка всех исполняемых файлов (скриптов) на свой сайт.
  • По возможности вынос кода скриптов в самый низ страницы.

 

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

 

Объем HTML и CSS кода.

Этот фактор не очень сильно влияет на скорость загрузки, но, тем не менее, я советую максимально сократить объем кода.

Сюда входит:

  • Вынос CSS стилей из HTML кода в соответствующую таблицу стилей.
  • Отказ от использования импорта кода в таблице стилей.
  • Удаление пробелов и переносов строк в кодах HTML и CSS.
  • Удаление лишнего кода (HTML тэгов) и неиспользуемых стилей из таблицы.
  • Исправление HTML ошибок.

 

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

 

 

Как ускорить свой сайт сразу?

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

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

 

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

 

Оптимизируйте каждый скрипт, каждую точку, каждый символ, каждую картинку (даже весом 5Kb) и всегда вспоминайте поговорку: «Копейка рубль бережет!». Если ваш сайт удовлетворяет временные показатели скорости загрузки страницы, то все равно рекомендую провести оптимизацию, так как это только улучшит ваш сайт.

seo-for-ucoz.com

как увеличить скорость загрузки сайта?

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

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

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

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

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

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

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

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

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

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

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

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

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

Теги:скорость загрузки сайта, увеличить скорость загрузки сайта, оптимизация сайта, веб-студия, студия веб-дизайна

webstudio2u.net

Оптимизация загрузки сайта - 𝐒𝐈𝐓𝐄𝐏𝐀𝐑𝐊

Скорость загрузки сайтов – один из основных параметров ранжирования в поисковых системах. Согласно последним исследованиям Google, у самых популярных ресурсов время отклика не превышает 2 секунды. Загрузка в пределах 3-5 секунд считается нормальной только для специфических, высоконагруженных ресурсов. Для интернет-магазинов скорость больше 5 сек. не позволит успешно продвинуться в поиске.

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

Из каких компонентов состоит скорость загрузки: определяем слабое место сайта

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

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

Компоненты загрузки выглядят так:

1. DNS-запрос к сайту на сервере;

2. установка соединения с использованием сертификата шифрования HTTPS;

3. ожидание ответа сервера на запрос конкретной страницы;

4. обработка получаемых html файлов на клиентской стороне в браузере;

5. загрузка CSS и JavaScript;

6. рендеринг страницы;

7. загрузка шрифтов и изображений.

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

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

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

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

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

1. сервис оценки производительности сайтов PR-CY;

2. инструмент оптимизации веб-ресурсов GTmetrix;

3. web-проект от Google PageSpeed Insights.

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

Топ-7 советов от экспертов Сайтпарк по увеличению скорости загрузки сайтов

Если вы хотите провести самостоятельную оптимизацию загрузки сайта OpenCart, мы рекомендуем проанализировать этот чек-лист и двигаться строго по нему:

1. измените порядок отображения CSS на начало страницы;

2. уменьшите число HTTP-запросов;

3. уберите или сведите к минимуму количество JS файлов на сайте;

4. обязательно используйте кеш браузера;

5. подключите к своему ресурсу CDN;

6. по возможности уменьшите объём графики;

7. сделайте все изображения минимально необходимыми для просмотра.

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

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

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

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

Отправляйте свои заявки на оптимизацию к нам на почту [email protected] или обращайтесь в контакт-центр.

sitepark.ua