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


7 советов по оптимизации для начинающих / Блог компании King Servers / Хабр

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

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

Введение: как загружаются сайты

В материале под названием «Что происходит, когда пользователь вбивает адрес сайта Google.com» очень подробно описаны все процессы, связанные с посещением сайта. Если говорить кратко, то между тем, как посетитель сайта вобьет в адресную строку его URL и получит ответ, в общем виде проходит несколько этапов:
  1. Сначала браузер осуществит DNS-запрос по имени сайта.
  2. Далее инициируется TCP-подключение к серверу, на котором этот сайт расположен.
  3. Следом устанавливается соединения http или https.
  4. Потом запрашивается нужная страницы и загружается ее HTML-код.
  5. Стартует парсинг HTML.
  6. После этого браузер начинает подгружать внешние ресурсы, связанные со страницей (стили, изображения, скрипты и так далее).
  7. В итоге рендерится финальная версия страницы со всем контентом.
  8. Затем исполняется JS-код — скрипты могут потребовать обработки дополнительных сетевых запросов, изменять страницу или её шаблон, так что возможен и новый круг рендеринга.
Часть из этих шагов можно оптимизировать на стороне клиента, другую часть — на стороне сервера. Об этом мы и будем сегодня говорить.

Первый шаг: понять, что тормозит

Бывший инженер Facebook и основатель стартапа Pave Джастин Митчел в треде на Quora так описывал начало работы по оптимизации загрузки сайта:Прежде чем начинать чинить, надо узнать, что сломалось. Если ваш сервер генерирует страницу 5 секунд, то использование CDN не поможет, если у вас на каждый просмотр страницы загружается по 10 мегабайт картинок, добавлять memcache в бэкенд-архитектуру тоже бессмысленно. Существуют различные инструменты анализа производительности сайтов. К примеру, можно использовать бесплатный сервис от Google, который анализирует производительность сайта и выдает рекомендации по ее улучшению:

Существует несколько важных метрик быстродействия сайта. Одна из них — это время до первого байта (TTFB — time to first byte), которая показывает, как быстро браузер начинает получать данные от сервера после отправки запроса. Также важно замерять начало рендеринга страницы и время загрузки (load time).

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

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

Расширение ресурсов сервера

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

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

Кэширование

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

Изображение: CrazyEgg

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

Изображение: CrazyEgg

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

Сжатие изображений

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

Существует несколько инструментов для компрессии изображений, среди которых TinyPNG, Kraken.io и JPEGmini. Кроме того, имеет смысл попробовать включить конвертацию изображений в формат WebP. Он был разработан Google, и по данным компании такие изображения на 26% легче PNG-файлов и на 25-34% меньше JPEG-картинок.

Чтобы активировать конвертацию, можно добавить в файл .htaccess следующий код:

<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_ACCEPT} image/webp RewriteCond %{DOCUMENT_ROOT}/$1.webp -f RewriteRule ^(path/to/your/images.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1] </IfModule> <IfModule mod_headers.c> Header append Vary Accept env=REDIRECT_accept </IfModule> AddType image/webp .webp К сожалению, на данный момент формат WebP поддерживается далеко не всеми браузерами — пока среди них только Chrome и Opera.

CDN

Еще один «инфраструктурный» метод снижения задержек — использование сетей доставки контента (content delivery network, CDN). Такие сети состоят из серверов в разных точках мира. При подключении сайта к сети на входящих в нее серверах создают копии файлов веб-ресурса, а затем пользователю отдают данные с ближайшего к нему сервера — в итоге скорость загрузки увеличивается.

Использование Gzip

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

Включить использование Gzip довольно просто — нужно просто добавить несколько строк кода в файл .htaccess. К примеру, при использовании веб-сервера Apache веб-мастерам доступен модуль mod_gzip, чтобы активировать Gzip в таком случае нужно внести в .htaccess такой код (подробнее — в туториале на SitePoint):

mod_gzip_on Yes mod_gzip_item_include mime ^application/x-javascript$ mod_gzip_item_include mime ^application/json$ mod_gzip_item_include mime ^text/.*$ mod_gzip_item_include file .html$ mod_gzip_item_include file .php$ mod_gzip_item_include file .js$ mod_gzip_item_include file .css$ mod_gzip_item_include file .txt$ mod_gzip_item_include file .xml$ mod_gzip_item_include file .json$

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

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

Также стоит избегать инлайн-CSS и JS-кода. В таком случае браузеры будут кэшировать эти внешние ресурсы, что позволит сэкономить время загрузки. Также JS и CSS следует минифицировать – сделать это можно с помощью инструментов вроде JSMIN, YUI Compressor и Packer.

Использование связки Nginx+Apache

Для увеличения скорости загрузки страниц можно использовать связку Apache и Nginx. Это два самых распространённых веб-сервера в мире, популярность объясняется мощью Apache и скоростью Nginx. Помимо плюсов, у каждого инструмента есть и свои недостатки: например, в Apache есть ограничения памяти сервера, в то время как Nginx, эффективный для статических файлов, нуждается в помощи php-fhm или аналогичных модулей для загрузки динамического контента.

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

Заключение: полезные ресурсы и статьи по теме оптимизации работы сайтов

Ниже мы собрали ряд полезных статей на русском и английском языке:

habr.com

Как ускорить сайт или факторы, влияющие на загрузку сайта / Хабр

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

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

Целевая аудитория: владельцы сайтов, web-студии, специалисты и любители. Постараюсь написать статью таким образом, чтобы она была доступна в понимании всем.

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

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

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

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

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

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

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

Разобьём этот промежуток на подпункты:

1.1 Отправка запроса браузером клиента.

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

Далее до того момента, как сервер отправит готовую страничку в ответ, проходит несколько этапов, и для каждого конкретного сайта этапы могут отличаться. Я возьму в пример сайт на php с БД MySQL.

1.2 Запрос принимается web-сервером, он находит в списке виртуальных хостов тот, что подойдёт под запрос и производит обработку виртуального хоста, в нашем примере сайт на php, значит web-сервер обратится к php для генерации странички, тот в свою очередь для наполнения странички данными обратится в БД. После формирования странички она будет передана web-сервером браузеру клиента.

Очень важную роль играет кэширование на каждом этапе, кэширование на уровне web-сервера, кэширование на уровне php (opcache), кэширование запросов в БД (memcache), могут быть и другие варианты кэширования, я привёл эти как наиболее распространённые. Это как раз тот этап на который Вы можете повлиять и этому этапу нужно уделить время.

Вот способы его ускорения.

  • Выбрать быстрый хостинг или даже лучше VPS, VDS или даже физический сервер. Если вы не компетентны в таком выборе, лучше попросите помощь у специалиста или спросите рекомендации от знакомых, которые уже пользуются теми или иными хостерами. Обратите внимания на то где расположен дата-центр хостера: идеально, если он будет располагаться в непосредственной близости от ваших потенциальных клиентов. Я лично использую зарубежные сервера, если только на сайт осуществляются DDOS-атаки, Российские хостеры предосталяют защиту от DDOS низкого качества, и тут уже приходится мириться с пингами и задержкой.
  • Правильная настройка сервера поможет ускорить ответ от него. Тут играют роль выбор более шустрого ПО и правильное его конфигурирование. Для web-сервера я использую Nginx, где по возможности использую hhvm совместно с php 7.1, выбор версии php, а так же hhvm по большей части ещё и зависит от кода вашего сайта: если сайт использует устаревшие функции, то вам или придётся обновлять его или довольствоваться старыми версиями, имеющими не столь высокую производительность. Ну и в качестве БД использовать MariaBD или даже Perсona, если у вас более крупный проект. Также не стоит забывать о защите: антибруты, фильтры от типовых атак, http-авторизация как дополнительная авторизация на всех админках, антиспамы, антивирусы и прочее.
1.3 Отправка сгенерированной странички клиенту и момент получения этой странички и будет завершающим этапом этой части загрузки страницы. Тут для уменьшения объёма отправляемых данных лучше всего использовать gzip сжатие.

Хочу сделать поправку, у меня на скрине ответ сервера для сайта Хабра равен 3,48 с — это плохое время, но Хабр тут по сути не виноват. У меня 3G интернет посредственного качества. Поэтому конкретно этот этап загрузки рекомендую отслеживать при помощи сервиса. Я использую для этого сервис проверки ответа сервера от Яндекс.

Код статуса HTTP должен быть 200.

Ответ сервера тут заметно меньше, чем на моём 3G интернете. В идеале время ответа сервера должно стремиться к нулю, но как минимум он не должен превышать 200 мс, хотя это лично мой критерий. Хотя нет, не только мой. Google PageSpeed если я не ошибаюсь тоже следит, чтобы ответ сервера не превышал 200 мс и, если сайт превышает рекомендованное время, то предупреждает, что нужно сократить ответ сервера.

Ну и в самом низу мы можем увидеть, что ответ сжат при помощи gzip.

Хабр прошёл первый этап загрузки на пятёрочку (нет-нет, я вовсе не подлизываюсь).

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

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

На что тут нужно обратить внимание.

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

Как же их сократить? В http/1.0 и http/1.1 для каждого отдельного файла создаётся отдельное соединение, значит наша задача сократить количество подгружаемых файлов на страничке.

  • Объединить все css в один файл и все js в один файл, эта процедура называется конкатенация.
  • Поместить мелкие картинки в закодированном виде прямо в css или в тело страницы чтобы для них не создавались отдельные соединения.
  • Возможно избавиться от загрузки каких-то не нужных элементов, и по возможности отсрочить загрузку js или поместить их в конец ну или хотя бы сделать их загрузку асинхронной. CSS тоже, кстати, было бы неплохо оптимизировать.
  • Если отложить загрузку css, то страничка при сёрфинге по сайту будет моргать, — на мой взгляд, это неприемлемо, но мы ведь можем загрузить css нужный для отображения верхней части сайта в начале, а остальное потом. Тут лучше проконсультироваться с верстальщиком, я им не являюсь, поэтому не воспринимайте данные рекомендации буквально.
  • Перейти на http/2, данная версия протокола позволяет грузить все элементы в один поток не создавая лишних соединений. И самые догадливые уже подумали, так зачем тогда выполнять первые две рекомендации если можно просто перейти на http/2, сейчас поясню. На данный момент http/2 ещё поддерживается не всеми устройствами, поэтому часть клиентов продолжат пользоваться сайтом на предыдущих версиях протокола, так что эта рекомендация поможет ускорить загрузку страницы для свежих девайсов с актуальными версиями браузеров.

Вот тут наглядно видно на сколько меньше соединений создаётся при использовании http/2

2.2 Вес страницы и элементов, подгружаемых с неё.

  • Убрать лишние комментарии в коде.
  • Использовать сжатие.
  • Оптимизировать контент сайта, сжать и объединить css и js, сжать картинки и пр.
И есть ещё одна рекомендация, которая поможет и сократить количество соединений и уменьшить вес странички и контента, размещённого на ней. Это этакая панацея, правда требующая определённых навыков в настройке.

Модуль для web-сервера PageSpeed. Он есть и для nginx — ngx_pagespeed и для apache2 — mod_pagespeed. О том что он может делать, лучше подробнее почитать в официальной документации, его настройки очень гибкие. Я только отмечу, что он способен выполнять конкатенацию на лету что поможет сократить количество соединений и он же отлично жмёт контент, сокращая вес странички и её содержимого.

На этом этапе я могу поставить Хабру твёрдую 4 и то только за отсутствие http/2, хотя я бы наверное ещё сократил объём подгружаемых элементов и сделал конкатенацию. Этот этап загрузки странички в идеале не должен превышать 2-3 сек(хотя предела совершенству нет конца и у меня есть клиенты, которые хотят быстрее даже при скорости загрузки меньше 1сек). Если у вас это время больше, вам стоит задуматься над рекомендациями, которые я дал выше.

3. Load — это тот момент, когда колёсико браузера перестало крутиться, то есть произошла полная загрузка страницы. Это менее критичный этап загрузки и он зачастую затормаживается сторонними чатами для общения с клиентами на сайте и прочими второстепенными элементами. Если вы выполните рекомендации, которые я дал выше, то этот этап тоже станет быстрее. Ещё хотел бы отметить что если у вас не высоконагруженный проект и при этом у вас VPS, VDS или физ. сервер, постарайтесь, чтобы вся статика грузилась только с вашего сервера. Размещение статики на сторонних сайтах и в CDN принесёт пользу только при высоких нагрузках, а для не нагруженных сайтов сыграет только в минус.

4. На этот этап можно не смотреть вообще, так как по сути страничка загружена и тут браузер всегда будет что-то подгружать, общаясь с сайтом.

5. Данной цифрой на скриншоте я обозначил место, где отображается количество загружаемых элементов на страничке и вес странички со всеми элементами. Нужно учитывать что если для ПК не проблема загрузить страничку в 2,5 Мб, то для мобильного браузера со слабым 3G это становится более проблематично. В частности у меня 3G интернет и Хабр у меня грузится не так быстро как другие сайты. Для мобильных устройств в идеале, чтобы страничка весила меньше 1 Мб. Тут или сокращать размер всего контента на страничках или делать мобильную версию.

P.S.
Плюсы загрузки контента со стороны:
  • Снижаем нагрузку на свой сервер.
  • Эти же статические данные, а именно css, js, картинки и шрифты могли быть уже загружены ранее во время просмотра им других сайтов, которые тоже используют эту статику и они будут грузиться из кэша браузера.
Минусы загрузки контента со стороны:
  • Зачастую публичные CDN и сайты, на которых хранятся шрифты, картинки, css и js имеют высокую нагрузку, так как их используют сотни, а то и тысячи сайтов с разным уровнем посещаемости, в итоге выходит, что отдать со своего порой быстрее, чем экономить нагрузку.
  • Если вы используете http2 для снижения количества соединений, сторонние сайты вам их только добавят.
Теперь даже если вы ещё не разобрались с причинами тормозов на своём сайте, то по крайней мере знаете, куда копать. Ещё хочу отметить, что грамотно написанный код сайта и оптимальная вёрстка так же ускорят ваш сайт, но это не мой удел, — данные моменты уже достаточно описаны в интернете.

Надеюсь, данная статья оказалась для вас познавательной.

habr.com

11 способов ускорить загрузку страницы, чтобы сохранить посетителей сайта

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

Влияние скорости

Google проводил эксперимент и получил 20% снижение трафика из-за того, что страница с результатами поиска стала грузиться на 0,5 секунды дольше.

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

Влияние скорости еще более выражено на мобильных устройствах, где ограниченная мощность процессора и прерывающиеся соединения являются обычным делом. Согласно данным, опубликованным Kinsta, 74% людей с мобильными устройствами уйдут со страницы, если она не загружается за 5 секунд.

И это в нашем мире, где пользование интернетом с мобильных устройств начинает обгонять настольные компьютеры и ноутбуки. Какой вывод? А такой — если страница не загрузится быстро, некому будет конвертироваться. Да, ваш заголовок важен. Предложение ценности для клиента должно быть четким. Хорошо бы и вся страница выглядела приятно. Социальное доказательство добавляет уверенности. Но если нет скорости загрузки, все это уже не важно!

Стань перформанс-маркетологом за 19 недель!

Перформанс-маркетинг — это комплексный маркетинг в диджитал-среде. Знакомые каждому маркетологу понятия тут приобретают новый потенциал, ведь в диджитал можно измерить буквально каждое движение!

Научиться перформанс-маркетингу — значит научиться мыслить точно измеряемыми категориями. Освоить инструменты, усиливающие вашу интуицию чёткими цифрами. Изучить тонкости оперативной аналитики.

Хотите успеха в интернет-продвижении — без перформанс-маркетинга вам не обойтись. Для его изучения Cossa рекомендует онлайн-курс курс Перформанс-маркетолог.

Старт занятий уже в ближайшее время!

Реклама

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

1. Почистите свой код

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

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

Помните про принцип KISS. Если вы сфокусируетесь на простоте, не нужно тратить силы на всякие дополнительные хитрости.

Но если вам позарез нужны ваши очень важные скрипты, то, по крайней мере, загрузите как можно скорее контент, который «выше сгиба» (above the fold), а потом уже все остальное. Это рекомендуемый Google метод.

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

2. Минимизируйте HTML и CSS

Если вы уверены в своих технических навыках, прочитайте эту статью и поступите, как там сказано.

Если вы сомневаетесь, просто откройте Google PageSpeed Insights, введите свой URL и отправьте результаты разработчику, которому вы доверяете.

3. Примените GZIP-сжатие

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

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

4. Минимизируйте редиректы

301-редиректы — это стандартная практика SEO, чтобы показать поисковым серверам, что определенная страница была перенесена на другой URL. Это стандартная практика, использующаяся тогда, когда сайты и страницы эволюционируют со временем. 301-редирект помогает избежать несуществующих страниц и ошибок-404.

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

Screaming Frog поможет быстро определить все редиректы на вашем сайте. На примере ниже мы видим, что 14% страниц сайта Runnersworld.com содержат редиректы. Упс!

Главное здесь — это покопаться поглубже. Почему здесь эти редиректы? Какую цель они преследуют? В примере выше мы видим множество временных 302-редиректов, которые можно попробовать почистить, чтобы увеличить скорость загрузки. Вот детальное руководство от Varvy на этот счет.

5. Перенесите скрипты

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

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

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

6. Ограничьте число плагинов WordPress (или другой CMS)

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

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

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

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

7. Купите нормальный хостинг

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

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

PCMag подготовил рейтинг хостингов с выделенными серверами.

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

8. Используйте подходящий размер картинок

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

Используйте размер картинки, подходящий ее размещению — возможно, разные варианты картинок для разных устройств. Если это кажется вам слишком сложным, хотя бы воспользуйтесь встроенными средствами ресамплинга картинок, которыми обладают большинство CMS, например, тот же WordPress.

9. Сжимайте картинки

Следующим шагом должно быть сжатие картинок. Про это часто забывают, а Radware сообщает, что 45% из топ-100 интернет-магазинов не используют сжатые изображения.

Но сжатие картинок может быть едва ли не самым простым действием, которое может дать быстрый результат в плане скорости загрузки. Существует множество бесплатных средств типа TinyJPG или Compressor.io, которые значительно уменьшат размеры файлов. Показанный ниже тест дал 73% сжатия. Умножьте это на все картинки на вашем сайте, и вы поймете огромный масштаб возможного ускорения.

10. Передавайте картинки через CDN

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

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

11. Внешний хостинг

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

Это может быть не так важно для картинок, а видео и аудио лучше всегда хостить на внешнем сервисе. Использование так называемого rich media растет бурными темпами. По прогнозам, 74% мирового интернет-трафика в 2017 году будет составлять видео.

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

Заключение

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

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

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

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

www.cossa.ru

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

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

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

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

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

Итак, весь процесс оптимизации скорости, на мой взгляд, следует начинать с установки Page Speed. C помощью этого дополнения для Фаерфокса или Хрома вы можете всесторонне оценить скорость загрузки страниц своего сайта и получить ценнейшие рекомендации по ее увеличению (можете также ознакомиться и с другими полезными дополнениями для браузера Мазила).

При первом запуске Page Speed для главной страницы моего блога я увидел вот такую печальную картину:

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

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

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

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

По началу происходила подгрузка почти 90 объектов (ccs, js, изображения) и на каждый из них нужен был отдельный http запрос. Но, проанализировав с помощью указанных выше онлайн сервисов все загружаемые объекты, а также следуя советам Page Speed, мне удалось сократить их количество до трех десятков, что не могло не сказаться на общей скорости:

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

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

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

Поэтому я и занялся первым делом настройкой кэширования статических объектов (ccs, js, изображения) в браузерах посетителей (т.е. вас, мои уважаемые читатели).

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

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

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

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

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

Но кроме объединения внешних стилей CSS и скриптов (это делается для уменьшения общего числа загружаемых объектов, что позволит уменьшить число http запросов к серверу), эти самые файлы стилей и скриптов можно будет очень эффективно сжать с помощью Gzip (фактически это тот же самый Zip, который вы активно используете на компьютере).

Сжать CSS и Js файлы с помощью Gzip можно в несколько раз, но еще больше уменьшить размер этих файлов можно за счет предварительной оптимизации их кода.

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

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

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

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

Статическое Gzip сжатие для снижения нагрузки на сервер

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

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

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

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

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

С учетом различного восприятия некоторыми браузерами файлов с расширением .gz (архивы Gzip) обычно используют довольно хитрый способ переименования архивов в обычные файлы стилей с расширением .CSS и скриптов.

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

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

Итак, вам нужно будет скачать на свой компьютер все внешние Css и Js файлы, участвующие в загрузке страниц (после того, как вы осуществили их объединение это будет не сложно) и создать из каждого из них его архивную копию с расширением .gz. Сделать это можно с помощью бесплатной программы 7zip. Дальше давайте покажу на примере, ибо теоретизировать здесь бесполезно.

Возьмем для примера основной файл стилей моего блога style.css. После того, как я его упакую в Gzip с помощью программы 7zip, у меня появится архив style.css.gz.

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

Но просто заменить оригинальный файл style.css на сервере (еще не сжатый в Gzip) только что нами созданным архивом, но имеющим по-прежнему название style.css, будет не достаточно.

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

Но назвать мы его должны будем уже иначе, чем style.css. Для этого можно его переименовать, например, таким образом: style.nogzip.css. Теперь на сервере в папке с темой оформления WordPress у меня будет лежать два файла стилевого оформления:

  1. style.css — архив с отрезанным расширением .gz
  2. style.nogzip.css — обычный не сжатый файл стилей, который нужно будет отдавать браузерам, которые не поддерживают сжатие

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

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

Данную операцию вам нужно будет проделать для всех внешних стилей и скриптов (Css и Js), которые загружаются вместе со страницами вашего ресурса. У меня их было всего лишь четыре: основной стилевой, в котором у меня также добавлены свойства некоторых плагинов WordPress, а еще файл скрипта из папки с темой оформления и два внешних скрипта от плагина SyntaxHighlighter.

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

<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP:Accept-encoding} !gzip [OR] RewriteCond %{HTTP_USER_AGENT} Konqueror RewriteRule ^(.*)\.(css|js)$ $1.nogzip.$2 [QSA,L] </IfModule> <IfModule mod_headers.c> Header append Vary User-Agent <FilesMatch .*\.(js|css)$> Header set Content-Encoding: gzip Header set Cache-control: private </FilesMatch> <FilesMatch .*\.nogzip\.(js|css)$> Header unset Content-Encoding </FilesMatch> </IfModule>

Если вы при переименовании оригинальных файлов стилей и скриптов использовали их названия, отличные от style.nogzip.css, то и в соответствующей строке кода вам нужно будет заменить маску $1.nogzip.$2 на свою. В общем-то, вот и все.

Теперь сервер не будет каждый раз на лету сжимать Css и Js, а будет сразу же отправлять браузерам заранее сжатую вами копию, а в случае браузера, который не понимает Gzip — оригинальную версию файла вида подобного style.nogzip.css.

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

Но проблема довольно быстро решилась проведением описанных выше манипуляций с используемым в админке файлом стилей. В моем случае это был colors-classic.css из папки:

/wp-admin/css

Дальше мне захотелось применить статическое Gzip сжатие для файлов Html, которые тоже сжимаются сервером налету, создавая дополнительную нагрузку. Тут я нашел решение довольно простое, применительно к WordPress. Дело в том, что у меня уже очень давно используется плагин для кэширования Hyper Cache.

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

Но вот немного поискав информацию на тему Gzip сжатия Html страниц, я изменил свое мнение об этих настройках компрессии в плагине Hyper Cache.

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

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

Похоже, что поставив галочку в этом поле «Enable compression», мы тем самым активируем предварительное сжатие кэшированных страниц блога по алгоритму Gzip.

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

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

Сам я эти компоненты еще не тестировал, но как только соберусь, то обязательно о них напишу. Пока же лишь приведу ссылки на эти компоненты для Джумлы: jFinalizer и WEBO Site SpeedUp.

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

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

Лично я для пакетной оптимизации использовал онлайн сервис PunyPNG, о котором уже довольно подробно писал. Можно также воспользоваться и другим очень популярным онлайн сервисом для сжатия фото без потери качества от Yahoo.com — Smush.it. Но степень сжатия фото в PunyPNG мне показалась выше, возможно за счет использования более удачных скриптов.

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

В общем, потратив полчаса мне удалось сжать PNG изображения примерно на 7 процентов в среднем, а Gif и Jpg процентов на 5.

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

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

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

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

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

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

Реализовать это в WordPress можно с помощью чудо плагина Really Static. Правда его версия еще не доросла до единички, но отзывы о его работы встречаются исключительно положительные. Фактически он является полным аналогом известного скрипта Maxsite Cache, который, например, использует Михаил Шакин на своем блоге.

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

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

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

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

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

ktonanovenkogo.ru

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

Андрей

«Распределили часть контента (изображения, jQuery) на поддомены, а часть на CDN (cloudflare.com) для сокращения расстояния между сервером и пользователем.» Для сайта плохо - картинки будут привязаны не к сайту, а к CDN. В Яндексе в статистике будете видеть "картинок в индексе - 0".© инфа от яндекса.

Yuri

То есть включили все галочки в настройках оптимизации сайта на хостинге. С заказчика содрали пару сотен баксов. При этом убили такой параметр в заголовке как lastmodified, ибо при включении этих опций он не передается - такова его специфика. Ощущение, что и сайта нету никакого, просто придумали статью и переписали название чекбоксов с хостинга, думая что справит неизгладимое впечатление.Браво, примитивнее статьи не читал, кейс на премию Дарвина!

Александр Поречников

Java - это даже и не близко Java Script

Александр Поречников

Вот Вы пишите, Геннадий, что включили http2 и при этом зачем-то обьединяете ресурсы в один файл, Противоречите сами себе? Или просто не знаете как работает http2. И судя по чеклисту, то меряли ли Вы скорость загрузки после простого включения ганзипа, все остальное это такие тонкости и дебри в которые лезут, когда нужно с 500мс сделать 400мс или от нагрузки сервер подвисает (504 ошибки проскакивают). И выкиньте Апач из связки Апач + Нжиникс (если Вы, конечно, не используете специфические плагины Апача) + совет, держите всю статику на СДН, это очень недорого, а толк от этого огромный, как минимум в снижении нагрузки на процессор

Александр Поречников

а для чего созданы зеркала - слейте СДН с основным доменом и все

Александр Поречников

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

Gretsay Sergey

Настроили OpCashe, исправьте на OPcache

Yuri

Александр, несомненно, эти опции модуля pagespeed ускоряют сайт, но при выборе хотя бы одной из них на хостинге last-modified не передается, ответ сервера 304 на запрос if-modified-since не отдается, cache conrol -> max-age становится 0.Возмутило не это в статье, возмутило то, что автор пишет такие заумные вещи как они план составляли, как воплощали в жизнь мега СЕО технологии и как потратили на это 60 человекочасов, 60 КАРЛ! То есть с заказчика содрали минимум 500 баксов за то, что поставили галки на хостинге. Не жалко, на здоровье! Ну развел и молчи, но не лезь со своими псевдознаниями на нормальные сайты и не отбирай у людей время! Почему уверен что рулили на хостинге -- вот скрин украинского продвинутого хостера, где порядок этих галок практически на 100% совпадает с гениальным планом автора и ко по ускорению сайта. https://uploads.disquscdn.c...

Александр Поречников

на этом хостинге у нас даже один из старых полустатичных проектов крутится, отличнаый хостинг. По поводу чего Вы высказалась я знаю, но многие не понимают, что на самом деле есть всего несколько способов действительно уменьшить время загрузки, а не "экономия на спичках" - это:0) включение сжатия на веб-сервере (gzip), 1) установка правильных заголовков на сайте2) использование не шаред-хостинга, а пусть даже минимальной ВПСки3) использование более-менее быстрого движка (желательно не Вордпресс, а на фреймворке)4) минификация статичных файлов (то что редко меняется - стили, картинки, скрипты, шрифты)5) кеширование страниц/статики

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

Yuri

Согласен с Вами на 100%, благодарю за лаконизм и точность!

Ляпушкин Никита

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

Филандер

а что за хостинг?)

Alexey Tyazhelnikov

Что значит "Расширили время кэш для JavaScript и CSS" ?

Алексей

После этой фразы тоже перестал читать.Если бы делали оформление сайта с помощью Java-технологий, они бы в принципе не загрузились бы :)

Yuri

Включили последнюю и предпоследнюю галочку на хостинге (пост со скрином выше) )))

Геннадий Федоров

Да, так и сделали!Извините, Вы не компетентны в этом вопросе.

Геннадий Федоров

Спасибо!Комплекс работ - дает результат.

Геннадий Федоров

Тут все просто!Кто выбирает простые решения, тот ничего не платит!

Геннадий Федоров

Тут Вы не правы...

Геннадий Федоров

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

Геннадий Федоров

Спасибо за комментарий!Признаю, все объединили до перехода на https/http2 ))Да, скорость после gzip мерили, не тот результат (не всем угодишь)...

Геннадий Федоров

Вот Вы как спецы судите... посмотрите это со стороны пользователя ))

Геннадий Федоров

Ваш комментарий вообще непонятен

Александр Поречников

пользователи обычно не настраивают сервер, не программируют и не создают продукты, то что можно создать "бложик/сайт" на вордпрессе человеку без знаний - это несомненно хорошо, но если у такого человека возникнут вопросы, то ему все равно придется столкнутся с PHP, JavaScript, Nginx, Apache и прочими ранее незнакомыми словами и в этом обычно помогает гугл, поэтому "легкая безграмотность" в терминах приведет к тому, что человек будет искать что-то похожее на "слайдер на Java" и удивлятся что ему какой-то JavaScript подсовывают в результатах. Поэтому взывать к стороне пользователя не стоит

Александр Поречников

часто проблема не в том что скорость повышается от всех манипуляций (пусть даже если и на 0,1%), а в том, что мы не видим других путей оптимизации (CDN, nginx) и не понимаем как это работает (http2) и в результате оптимизируем то что нет смысла оптимизировать и забываем о том что следовало бы оптимизировать или как добится максимального результата при своей оптимизации.

serpstat.com

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

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

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

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

Пользовательский опыт – это фактор, важный для SEO. Cкорость загрузки сайта – это фактор, важный для пользовательского опыта. Вывод? То, насколько быстро открываются страницы на вашем ресурсе, определяет успех SEO-кампании. Не больше, не меньше.

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

Примите как факт: те дни, когда считалось нормальным ждать открытия страницы 10 секунд прошли.

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

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

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

Помните AMP (ускоренные мобильные страницы) от Google?

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

Ирина Винниченко

Контент-маркетолог SEMANTICA

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

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

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

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

Если вы используете StudioPress Site или Rainmaker Platform, ваш сайт будет загружаться быстро. Однако добавление рекламных скриптов, изображений, кодов отслеживания, 301 редиректа и т. д. замедляет загрузку сайта и увеличивает нагрузку на сервер/ хостинговую компанию.

На Search Engine Journal (SEJ) мы тоже столкнулись с проблемой медленной загрузки. Следующие шесть советов советов помогли нам увеличить скорость открытия страниц до 1,8 сек. Хотите подробностей? Продолжайте читать.

1. Используйте сеть доставки содержимого

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

Сеть доставки содержимого может справляться с интенсивным трафиком и ускорять доставку контента.

Отличный инструмент для блогов на WordPress – Cloudflare. С его помощью можно ускорить работу сайта и оптимизировать его под разные устройства. Кроме того, инструмент бесплатен.

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

2. Сжимайте изображения

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

Существует множество плагинов, которые сжимают все изображения на вашем сайте и аналогичным образом обрабатывают новые картинки при загрузке в админку. Один из них – ShortPixel.

ShortPixel – это плагин WordPress, который позволяет сжимать как новые, так и старые изображения.

Мы используем его на SEJ и на других сайтах. И довольны результатом.

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

3. Удалите рекламные скрипты и всплывающие окна

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

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

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

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

То же правило применяется к плагинам всплывающих окон.

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

Один из самых быстрых плагинов – OptinMonster (партнер StudioPress).

4. Установите плагин кэширования

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

Есть несколько плагинов кэширования, которые отлично подходят для WordPress – WP Super Cache и W3 Total Cache.

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

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

5. Отключите плагины, которые вы не используете

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

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

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

6. Еще раз оптимизируйте медиа

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

С проблемой мы справились с помощью BJ Lazy Load. Это плагин с отложенной загрузкой изображений. Сначала он отображает весь текстовый контент, а затем, когда пользователь прокручивает страницу вниз, загружает изображения и другие формы медиа. Таким образом, пользователю не нужно ждать загрузки множества файлов перед тем, как он получит доступ к основному содержимому.

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

6.Бонусный совет: попросите хостинг о помощи

Если вы работаете с платформой WordPress, вам следует сотрудничать с хостинговой компанией, которая специализируется на этой системе управления контентом. Например, с WP Engine, Presslabs или Synthesis от Rainmaker.

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

В заключение

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

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

Оригинал статьи.

semantica.in

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

Здравствуйте, дорогие читатели! Недавно получил комментарий в котором мне задали вопрос: в чем мой секрет быстрой загрузки сайта? Я решил не отвечать комментарием (слишком много писать), а написать сразу для всех полезный пост на эту тему. То есть сегодня мы поговорим о таком немаловажном факторе, как скорость загрузки сайта.скорость загрузки сайта

Как Вы думаете, зачем нужна быстрая загрузка сайта? Давай-те рассудим логически. Мы пишем для людей, люди должны читать наши посты и получать знания. Наш сайт или блог, это площадка для размещения знаний! Доступ к ним должен быть открытым и быстрым. А если Ваш сайт грузится 15-20 секунд? Разве пользователь решит остаться на нем? Ответ однозначен — НЕТ!

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

Как я говорил уже: Нужно беречь время. Оно течет в одном направлении, и его не вернуть! Можно вернуть деньги, еще что-либо, а время никак! К чему это я? А к тому, что нужно уважать, как свое время, так и время других! Нужно всего-лишь проделать несколько элементарных шагов, и Ваш сайт/блог станет намного быстрее открываться, а с этим прибавится не один посетитель.

[yandexd]

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

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

А также рекомендую прочитать еще несколько интересных статей:

- Семь главных ошибок блоггеров при ведении своего блога

- Как раскрутить сайт бесплатно

- Плеер для wordpress своими руками

- Что писать в твиттере

Проверка скорости загрузки сайта

1) Page Speed Online - онлайн-сервис проверки скорости сайта от Google. Помимо проверки скорости, сервис выдают список рекомендация по ускорению и оптимизации сайта. Очень полезная штука!

2) Pingdom Tools - онлайн сервис проверки скорости, который достоин низкого поклона. Впервые, когда я решил проверить скорость своего блога, я воспользовался именно им. Так же выдает различные рекомендации и советы.

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

4) [urlspan]WebWait[/urlspan] - с виду простенький, но очень удобный сервис. Вбивайте адрес Вашего сайта в специальное окошко, ждете некоторое время, и Ваш результат готов. Мне кажется, что этот сервис определяет самое точное время.

Вот такие сервисы я предлагаю Вам для проверки скорости загрузки сайта. Проверили свой сайт? Теперь самое время перейти к главному — ускорение сайта.

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

[yandexd]

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

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

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

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

То есть нужно изменить размер и вес изображения. Если Вам на сайте нужно изображение размеров 300×225, а у Вас оно 600×450 — измените через любой графический редактор, к примеру Adobe Photoshop (Программы для Вебмастера).

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

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

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

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

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

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

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

Сократить CSS можно по ссылке[/urlspan], а сократить Java Script [urlspan]здесь. Просто заходите по ссылкам, прописываете путь до Ваших файлов, после чего нажимаете на определенную кнопку, сохраняете полученный файл на компьютер, и загружаете на сайт, например по ftp.

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

3. Включить сжатие страниц Gzip

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

Чтобы включить сжатие Gzip необходимо в файле .htaccess прописать следующее:

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 &lt;ifmodule mod_gzip.c&gt; mod_gzip_on Yes mod_gzip_item_include file \.js$ mod_gzip_item_include file \.css$ &lt;/ifmodule&gt;

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 &lt;ifmodule mod_gzip.c&gt; mod_gzip_on Yes mod_gzip_item_include file \.js$ mod_gzip_item_include file \.css$ &lt;/ifmodule&gt;

Еще раз повторю, после включения сжатия gzip — скорость значительно увеличивается! Поэтому пропускать этот пункт не стоит.

4. Кэш браузера

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

[yandexd]

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

Для того, чтобы это все начало работать, нужно в .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

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

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

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

На этом у меня все, всем пока!

С уважением, Томский школьник!

Белан Константин Сергеевич

С уважением, Константин Белан.

Рубрика: Настройка блога

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(0 голосов, в среднем: 0 из 5)

Рабочая 634570 Россия, Томская обл., г. Томск, +7 952 160 36 17

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

seokos.ru