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

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

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

Итак, поехали:

1. Уменьшите количество HTTP-запросов

80% загрузки страницы ориентировано на загрузку компонентов страницы: скриптов, фотографий, файлов CSS, flash. Спецификация HTTP/1.1 советует, чтобы браузеры параллельно загружали не более 2-х компонентов веб-страницы с одного хоста. Уменьшив количество этих компонентов мы уменьшаем количество HTTP-запросов к серверу и как результат увеличиваем скорость загрузки страницы.

Но как уменьшить количество запросов к серверу не затрагивая внешний вид страницы?

2. Помещайте CSS файлы в начале страницы

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

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

3. Помещайте javascript в конец страницы

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

Кроме того, внешние.js-файлы блокируют параллельную загрузку. Спецификация HTTP/1.1 советует, чтобы браузеры параллельно загружали не более 2-х компонентов веб-страницы с одного хоста. Таким образом, если картинки для вашего сайта располагаются на разных хостах, вы получите более 2-х параллельных загрузок. А когда загружается скрипт, браузер не будет начинать никаких других загрузок, даже с других хостов.

4. Минимизируйте css и javascript

Минимизация файла - это удаление из кода всех несущественных символов с целью уменьшения объема файла и ускорения его загрузки. В минимизированном файле удаляются все комментарии и незначащие пробелы, переносы строк, символы табуляции. Здесь все просто. Чем меньше объем файла, тем меньше времени понадобится браузеру на его загрузку. А минимизировать Ваш код помогут вот эти 24 онлайн-сервиса для сжатия и оптимизации CSS кода
5. Используйте поддомены для параллельного скачивания

Как я уже говорил Выше, согласно спецификации HTTP/1.1 на браузеры накладываются ограничения на количество одновременно загружаемых компонентов сайта, а именно не более 2-х компонентов с одного хоста. Поэтому если на Вашем сайте много графики, то ее лучше вынести на отдельный поддомен или поддомены. Для Вас это будет один и тот же сервер, а для браузера – разные. Чем больше поддоменов Вы создадите, тем больше файлов браузер сможет одновременно загрузить и тем быстрее загрузится вся страница сайта. Вам остается лишь изменить адрес картинок на новый. Очень простой, но действенный способ.

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

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

Поэтому выставляйте HTTP-заголовок Expires везде, где только это возможно, на несколько дней или даже месяцев вперед. Для того, чтобы веб-сервер Apache отдавал соответствующие рекомендациям HTTP-заголовки Expires, необходимо добавить в файл.htaccess, находящийся в корневой папке сайта, следующие строки:
Header append Cache-Control "public" FileETag MTime Size ExpiresActive On ExpiresDefault "access plus 0 minutes" ExpiresByType image/ico "access plus 1 years" ExpiresByType text/css "access plus 1 years" ExpiresByType text/javascript "access plus 1 years" ExpiresByType image/gif "access plus 1 years" ExpiresByType image/jpg "access plus 1 years" ExpiresByType image/jpeg "access plus 1 years" ExpiresByType image/bmp "access plus 1 years" ExpiresByType image/png "access plus 1 years"
Данный фрагмент файла конфигурации Веб-сервера Apache проверяет наличие модуля mod_expires и, если модуль mod_expires доступен, включает отдачу HTTP-заголовков Expires, которые устанавливают срок хранения перечисленных выше объектов в кэше браузеров и прокси-серверов равный одному году с момента первой загрузки. Установив такой срок жизни кэша браузера, может возникнуть сложность с обновлением файлов. Поэтому если Вы изменили содержимое css или javascript-файла и хотите, чтобы эти изменения обновились в кэше браузера, то необходимо изменить название самого файла. Обычно в название файла добавляют его версию, например так: styles.v1.css

7. Используйте CDN для загрузки популярных JavaScript библиотек

Если на Вашем сайте используется популярный javascript фреймворк, например jQuery, то для его подключения лучше использовать CDN.

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

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

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

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

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

9. Не масштабируйте изображения

Не изменяйте размер изображения при помощи атрибутов width и height тега, либо при помощи CSS. Это тоже негативно влияет на скорость загрузки страницы. Если у Вас есть изображение размером 500x500px, а вставить на сайт Вы хотите изображение с размером 100x100px, то лучше изменить размер оригинальной картинки при помощи графического редактора Photoshop, или любого другого. Чем меньший вес картинки, тем меньше времени потребуется для её загрузки.

10. Используйте Gzip- сжатие

Как показали проведенные исследования, gzip-сжатие текстового файла «на лету» в 95–98% случаев позволяет сократить время на передачу файла браузеру. Если хранить архивированные копии файлов на сервере (в памяти proxy-сервера или просто на диске), то соединение в общем случае удается освободить в 3-4 раза быстрее.

Начиная с версии протокола HTTP/1.1, веб-клиенты указывают, какие типы сжатия они поддерживают, устанавливая заголовок Accept-Encoding в HTTP-запросе.

Accept-Encoding: gzip, deflate

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

Content-Encoding: gzip

Переданные таким образом данные меньше первоначальных примерно в 5 раз, и это существенно ускоряет их доставку. Однако здесь есть один недостаток: увеличивается нагрузка на веб-сервер. Но вопрос с сервером всегда можно решить. Так что не будем обращать на это внимание.

Для того, чтобы включить GZIP-сжатие на своем сайте, необходимо в файле.htaccess прописать следующие строки кода:
AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/css BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0 no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

Если данный способ сработал, то отлично, если нет, то можно попробовать вот такой вот код:

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 no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html mod_gzip_on Yes mod_gzip_item_include file \.js$ mod_gzip_item_include file \.css$

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

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

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

Здравствуйте, ребята!

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

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

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

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

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

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

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

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

Только, что я проверил скорость загрузки одной своей статьи. По результатам 5ти проверок получил средний результат в 0,82 секунды.

Конечно, бывает сложно добиться маленького значения и это зависит от многих факторов:

• Количество контента на странице;
• Количество подгружаемых скриптов;
• Размер графики на странице и на сайте в целом;
• Количество плагинов.

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

Оптимизация графики

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

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

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

Данному моменту уделяйте время, когда публикуете контент. Когда-то я писал статью о том, без потери качества. Материал будет вам очень кстати.

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

Уменьшает время загрузки;

Повышает удобность потребления контента.

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

Кэширование

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

Чтобы сделать кэширование на сайте (для WordPress) нужно установить плагин Hyper Cache. Полную инструкцию читайте по . Все разжевал там.

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

Я их не использую. Кэширования с помощью плагина Hyper Cache более, чем достаточно.

Оптимизация загрузки скриптов

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

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

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

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

Покажу на практике, как это все делать. Начну с видео-урока.

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

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

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

Теперь сохраняем данный файл в формате.js и называем его удобным именем. Я назову "footer-scripts.js", чтобы четко понимать, что это файл скриптов, которые выводятся в футере сайта.

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

Вот моя строка кода.

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

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

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

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

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

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

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

Избавление от лишних запросов в коде шаблона

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

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

Теперь текстовый вариант.

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

Как видим, это php код. Если же посмотреть в исходный код (ctrl+u) любой страницы сайта, то увидим, что этого php кода уже нет, а будет HTML код с указанной кодировкой.

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

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

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

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

Отключение ревизий

Снова замучаю вас видео-уроком.

Ревизии - это автоматическое сохранение копий записей, которые делаются при создании записей в определенные интервалы времени.

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

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

В корне движка имеется папка WP-includes, в которой лежит файл default-constants.php. Необходимо открыть его, найти в нем следующее содержание.

if (!defined("AUTOSAVE_INTERVAL")) define("AUTOSAVE_INTERVAL", 60); /** * @since 2.9.0 */if (!defined("EMPTY_TRASH_DAYS")) define("EMPTY_TRASH_DAYS", 30); if (!defined("WP_POST_REVISIONS")) define("WP_POST_REVISIONS", true);

define ("AUTOSAVE_INTERVAL" , 60 ) ; * @since 2.9.0 define ("EMPTY_TRASH_DAYS" , 30 ) ; if (! defined ("WP_POST_REVISIONS" ) ) define ("WP_POST_REVISIONS" , true ) ;

На момент написания этой статьи все это находится, начиная с 277 строки. Весь этот код отвечает за сохранность наших записей. Состоит он из 3х частей, каждая из которых начинается на if.

Первая часть отвечает за интервал для автоматического создания ревизий. По умолчанию значение стоит в 60 секунд, то есть каждую минуту будет создаваться одна копия записи. Представьте, что статью вы пишите не один час. Можно данное значение увеличить, например до 10-20 минут. Данная настройка работает только при включенных ревизиях.

if (!defined("AUTOSAVE_INTERVAL")) define("AUTOSAVE_INTERVAL", 600);

if (! defined ("AUTOSAVE_INTERVAL" ) ) define ("AUTOSAVE_INTERVAL" , 600 ) ;

Значение ставим в секундах.

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

if (!defined("EMPTY_TRASH_DAYS")) define("EMPTY_TRASH_DAYS", 0);

if (! defined ("EMPTY_TRASH_DAYS" ) ) define ("EMPTY_TRASH_DAYS" , 0 ) ;

Третья часть отвечает за работу ревизий. По умолчанию они включены. Если хотите отключить, то значение true необходимо изменить на false или поставить 0.

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

Просто скопируйте свой CSS и нажмите “Compress” (Сжать).

5. Размещайте JavaScript-файлы внизу страницы

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

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

Еще один метод – использовать атрибуты defer и async , размещая файлы JavaScript на сайте.

Важный момент – прежде чем использовать их, убедитесь, что понимаете разницу между ними:

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

Например, вы можете взять стандартный скрипт:

И добавить немного кода, чтобы он подгружался тогда, когда вы хотите:

Важность ваших скриптов будет определяться атрибутами, которые вы им присвоите, так, более важные скрипты получат атрибут async , менее важные – defer .

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

Напоминание: Проверить скорость загрузки страниц можно с помощью сервиса Google PageSpeed Insights либо GTMetrics .

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

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

1. Сократите код

Чем объемнее код вашего проекта, тем больше он весит, а значит, тем большее время требуется для его загрузки. Поэтому в первую очередь вам нужно убедиться, что код оптимизирован. Особенно это касается первой, посадочной страницы, на которую попадает пользователь - будет лучше отказаться от тяжелых скриптов JavaScript и Ajax либо убрать их в нижнюю часть страницы. Придерживайтесь известного принципа KISS - Keep it short and simple - пусть код будет коротким и простым.

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

Если вы хотите узнать, все ли в порядке с JavaScript на странице вашего сайта, воспользуйтесь этим сервисом: https://varvy.com/tools/js/

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

2. Используйте компрессию сайта

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

Проверить, используется ли на вашем сайте gzip для сжатия данных, можно на этом ресурсе: http://www.gidnetwork.com/tools/gzip-test.php

А пройдя по следующей ссылке, вы сможете выяснить, применяется ли в целом какая-либо технология сжатия на вашем сайте: http://www.whatsmyip.org/http-compression-test/

3. Сократите количество переадресаций

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

Проверить свой сайт на наличие переадресаций вы можете при помощи этой программы (есть бесплатная версия): https://www.screamingfrog.co.uk/seo-spider/

4. Уменьшите число плагинов

Данный пункт касается тех, кто пользуется CMS: Wordpress, Joomla или какой-либо другой. Регулярно проверяйте список плагинов, которые вы используете, на предмет ненужных или уже неиспользуемых. Уменьшение количества плагинов положительно скажется на загрузке вашего сайта и его работе в целом. Если вы используете Wordpress в качестве системы управления контентом, то оптимизировать число плагинов вы также можете при помощи специального плагина P3 (Plugin Performance Profiler): https://wordpress.org/plugins/p3-profiler/ Этот плагин покажет вам данные, касающиеся производительности других плагинов, и того, как каждый из них влияет на работу сайта. Это поможет вам определить, от каких плагинов следует отказаться в первую очередь.

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

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

6. Пользуйтесь кэшем браузера

Используя кэширование, вы можете значительно выиграть в скорости загрузки вашего сайта: когда пользователь первый раз заходит на ваш сайт, в кэше его браузера сохранятся некоторые JavaScript и CSS-файлы, которые затем будут автоматически показываться при его следующих визитах, а браузеру не придется тратить время на их загрузку. Для кэширования необходимо правильно настроить HTTP-заголовок Expires. Вы можете сделать это, прописав в файле.htaccess, который находится в корневой папке, следующие строки:

Header append Cache-Control "public" FileETag MTime Size ExpiresActive On ExpiresDefault "access plus 0 minutes" ExpiresByType image/ico "access plus 1 month" ExpiresByType text/css "access plus 1 month" ExpiresByType text/javascript "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/png "access plus 1 month"

В данном случае у всех типов установлен срок в 1 месяц, но вы можете изменить время на то, которое вам нужно: кэш может храниться определенное количество лет (years), месяцев (months), недель (weeks) или дней (days).

Если вы пользуетесь какой-то определенной CMS, то можете установить для этого специальный плагин. В случае с Wordpress подойдет W3 Total Cache: кэширование включается в настройках (выберите Settings у данного плагина в списке всех установленных плагинов, затем General - поставьте галочку у “Toggle all caching types on or off (at once)”).

7. Следите за производительностью сайта

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

• уже упомянутый выше Page Speed Insights: https://developers.google.com/speed/pagespeed/insights/?hl=ru
  Этот инструмент от Google замеряет скорость загрузки вашего веб-ресурса (от 0 до 100 баллов; чем выше балл, тем лучше). Сервис даст вам рекомендации по улучшению производительности, а также покажет, какие пункты оптимизации вы выполнили. Имейте в виду, что так как в Page Speed Insights вносятся правки и корректировки, то количество баллов, которые получил ваш сайт, также может меняться.
• Pingdom Website Speed Test: http://tools.pingdom.com/fpt/
  Хороший англоязычный сервис для проверки скорости загрузки вашего ресурса. Будет особенно полезен тем, кто администрирует международные ресурсы, так как позволяет выбрать место, из которого будет производиться тестирование: США, Австралия или Швеция (результат будет отличаться). Выводит множество разных данных и дает рекомендации.
• Loadimpact: https://loadimpact.com/
  Этот сервис позволяет сгенерировать несколько запросов на ваш сайт, путем чего можно выяснить, во-первых, среднюю скорость загрузки вашего сайта, во-вторых, понять, как ваш сайт поведет себя при определенном количестве запросов (выдержит ли он нагрузку).
• LoadStorm: http://loadstorm.com/
  При помощи этого сервиса вы можете запустить достаточно серьезное тестирование своего сайта. Бесплатная версия сервиса позволит вам протестировать свой ресурс при помощи 10 пользователей, а вот платная версия дает больше возможностей, в частности вы сможете самостоятельно прописать сценарий, который будут выполнять пользователи (к примеру, нажать на определенную кнопку или перейти в нужный раздел). При этом вы обязаны верифицировать то, что являетесь владельцем сайта.

Заключение

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

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

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

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

Перед тем как мы начнём, вам необходимо установить YSlow, если вы уже конечно этого не сделали. YSlow - это расширение к Mozilla Firefox, которое вы сможете найти на этой странице:

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

В нижней правой стороне вашего браузера, у вас находится специальная панель с иконкой (смотрите рисунок 1). Чуть поодаль данной панели, после загрузки страницы, рядом с ‘YSlow’ вы увидите число. Данное число - это время загрузки данной страницы в секундах в вашем браузере. Нам необходимо, чтобы данное число было как можно меньше.

Самыми часто встречаемыми «тормозилами» являются следующие объекты или операции:

• Слишком много HTTP запросов
• Не сжатые файлы JavaScript
• Отсутствие времени истечения заголовков для графических файлов

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

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

Используем YSlow на полную

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

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

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

Но люди, как правило, не используют CDN (что является довольно-таки дорогим удовольствием).

Классификация типов ошибок

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

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

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

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

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

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

Избегайте CSS выражений: я лично никогда не использовал CSS выражения (ещё их называют динамическими свойствами). Данные выражения являются собственной концепцией программирования для IE (такие как условные выражения) в CSS. Технология, которая используется в IE8, да и во всех остальных версиях больше поддерживаться не будет, так что в любом случае придётся завязывать с данным написанием CSS выражений. PHP больше подходит для подобных целей, к примеру, для того, чтобы загрузить разные CSS стили в зависимости от какого-то условия, такого как случайное число, время суток или браузер пользователя.

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

Сокращайте время DNS поиска: когда пользователь набирает имя вашего сайта в строке браузера, то тут же начинается DNS поиск IP адреса, по которому находится ваш сайт. Чем больше ваш сайт содержит внешних источников, тем больше будет занимать время DNS поиск. Как правило, один такой поиск длится 60-100 миллисекунд.

Минимизируйте JS: помимо сжатия посредством gzip, минимизация JavaScript файлов позволит вам облегчить скрипты, избавившись от ненужных пробелов, табов, и других специальных знаков, которые в совокупности увеличивают размеры файлов. Это же очевидно - чем меньше файлы, тем быстрее грузятся страницы. Для минимизирования JavaScript файлов можете использовать инструмент JSMIN.

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

Избегайте дублирования загрузки скриптов: если ваш браузер загружает скрипт более одного раза, это значительно сказывается на загрузке страницы. Математика тут не сложная. Чем больше загрузок одних и тех же файлов, тем дольше загрузка страницы. Просмотрите ваши скрипты и убедитесь, что вы не вызываете jQuery 2 или 3 раза. То же самое относится и к скриптам JS.

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

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

И наконец, перейдём к последней вкладке Stats tab. Тут вы найдёте информацию обо всех HTTP запросах, как для обычных файлов, так и для закэшированных. Значение Empty cache показывает, что данные файлы необходимо загрузить для отображения страницы. В свою очередь Primed Cache - это файлы, которые уже были закэшированы браузером пользователя. Это означает, что их скачивать не нужно.

2. Используйте CSS спрайты для сокращения HTTP запросов

CSS спрайты - это наверное самая значительная вещь, которую придумало человечество, после того как Тесла изобрёл электричество… Я действительно это сказал.. ой, я имел в виду Эдисона.

Ну, может быть не совсем самая крутая, но тем не менее.

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

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

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

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

Давайте и мы попробуем что-то подобное. Поэкспериментируем на этом же самом изображении с сайта YouTube.

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

.sprite { background:url(http://s.ytimg.com/yt/img/master-vfl87445.png); } #logo { width:100px; height:45px; background-position:0 0; }

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

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

.sprite { background:url(http://s.ytimg.com/yt/img/master-vfl87445.png); } #logo { width:100px; height:45px; background-position:0 0; } #button { background-position:0 -355px; padding:5px 8px; } #button:hover{ background-position:-25px -355px; }

3. Загружайте CSS файлы в начале, JavaScript в конце

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

Стоит также отметить:

Загружайте файлы CSS в разделе прямо перед началом тега body.

Подключайте JavaScript перед самым закрытием тега body.

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

Примечание: Если вы не хотите перемещать теги JavaScript, потому что боитесь, что падёт функциональность, то я рекомендую вам использовать свойство defer. Применяйте его следующим образом:

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

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

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

Настройка процесса:

Создайте 3 поддомена на вашем сервере

Расположите ваши изображения в папках на разных поддоменах

Замените пути в ваших файлах

5. Добавление заголовков Expires

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

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

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

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

Следующий пример.htaccess файла устанавливает заголовки expires на какое-то число в 2010 году для таких типов файлов как.ico, .pfd, .flv (файлы Flash), .jpg, .png, etc.

Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"

Будьте бдительны: если вы произведёте какое-либо изменение в данных файлах (в случае, если срок ещё не прошёл), то вам необходимо переименовать их (или добавить в название версию), иначе в кэше они не обновятся.

К примеру, если у вас есть файл JavaScript, в котором вы что-то изменили, просто добавьте в название номер версии (что-то типа javascriptfile-1.0.js, javascriptfile-1.1.js и т.д.)

Вывод

Сегодня мы прошлись по многим способам. Надеюсь, вы отметили для себя несколько методов, которые будете активно применять в ваших проектах! Удачи!