Интернет 

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

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

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

Из множества сервисов, которые я использовал для проверки скорости загрузки страниц сайта, мне понравился сервис: Pingdom.com , который наглядно демонстрирует каждую деталь сайта и скорость загрузки необходимой страницы, например для главной страницы блога сайт, при выборе в настройках — «Amsterdam, Netherlands», скорость загрузки сайта будет составлять 1,08 секунды, что не так уж и плохо.
Ниже представлена вся необходимая информация, которая предоставляется сервисом по скорости соединения, ожидания и ответа как сторонних серверов, данные с которых запрашиваются, так и внутреннего сервера.

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

Оптимизируем скорость загрузки страниц сайта используя Google PageSpeed

На самом деле все проще чем кажется на первый взгляд, но хочу отметить тот момент, что при использовании Google PageSpeed Insights не видно всех моментов, которые могут ухудшать скорость загрузки страниц сайта, но он вполне подойдет, выполнив все пункты по требованию сервиса, вы сможете значительно улучшить скорость. Для более подробного анализа факторов влияющих на скорость загрузки сайта, необходимо воспользоваться браузером Mozilla Firefox с дополнением Firebug и плагином PageSpeed для Firefox .

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

Итак, после установки плагина и дополнения firebug в правом верхнем углу появится кнопка с изображением жука.

Перейдите на сайт, анализ для которого необходимо выполнить, нажмите на кнопку с жуком. Перед вами откроется окно, последняя вкладка которого будет называться Page Speed.После нажатия на вкладку появится окно с кнопкой Analyze Performance , необходимо нажать на кнопку и ожидать пока страница проанализируется. Далее Перед Вами появится список всех рекомендаций, которые требуется выполнить для улучшения скорости загрузки страниц сайта. После недолгих манипуляций над содержимым страниц блога, я добился результата по PageSpeed = 94 из 100 возможных баллов, что весьма неплохо, можно конечно и улучшить результат, но пока это не критично, главное, что все основные мешающие моменты устранил.

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

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

Включите сжатие — для настройки сжатия xml, css, js и html в формат gzip требуется добавить следующий код в файл.htaccess на ftp сервере сайта:

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$

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

Используйте кэш браузера , здесь же указывается валидатор кэша и выполняется пункт Укажите валидатор Кэша – необходимо использовать кэширование на стороне браузера, т.е. клиента, требуется добавить в.htaccess следующие строки кода:

Header set Cache-control: private FileETag MTime Size ExpiresActive on ExpiresDefault "access plus 7 day" BrowserMatch "MSIE" force-no-vary BrowserMatch "Mozilla/4.{2}" force-no-vary

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

Оптимизируйте изображения – для того, чтобы уменьшить размер страниц и соответственно увеличить скорость загрузки, потребуется воспользоваться принципом копирования всех изображений сайта с ftp сервера и пакетной загрузки для дальнейшей обработки в сервис http://www.smushit.com/ , процедура достаточно долгая, если на Вашем сайте количество изображений изменяется тысячами. Могут возникнуть ошибки того, что gif файлы будут пережаты в jpg или png, при этом изменяется имя файла, требуется учесть данный момент, если есть изображения формата gif, лучше их загружать отдельно и потом править вручную. Рекомендации:

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

Отложение синтаксического анализа java-скрипт – можно запустить скрипт некоторого времени загрузки документа, воспользовавшись кодом:

function onLoadScript () { var scri = document.createElement("script"); scri.src = ""; document.body.appendChild(scri); } window.onload = function () {setTimeout(onLoadScript, )}

function onLoadScript () { var scri = document.createElement("script"); scri.src = "jq.js"; document.body.appendChild(scri); } window.onload = function () {setTimeout(onLoadScript, 2000)}

Сократить JS скрипты и CSS стили – необходимо воспользоваться сервисом: http://www.refresh-sf.com/yui/, который удаляет лишние пробелы в коде, тем самым экономит место файла.

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

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

Укажите заголовок Vary: Accept-Encoding – все файлы, открытые для кеширования должны возвращать заголовок, достаточно добавить код в.htaccess на ftp сервере:

Header set Cache-control: private Header append Vary Accept-Encoding Header set Cache-control: public

P.S.: Для сокращения количества запросов к файлам, необходимо сократить количество CSS стилей и объединить их в 1 файл, скрипты js в идеале тоже необходимо объединить в 1 файл.

Заключение

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

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

Успехов Вам в оптимизации скорости страниц сайта!

При создании клиентоориентированного сайта вам необходимо учесть и продумать множество вещей, начиная от творческих (дизайн, наполнение) и заканчивая техническими (верстка, размещение в сети Интернет). Для клиентов важна каждая мелочь, поэтому важно смотреть не только на внешнюю сторону вашего проекта - то, что увидит пользователь - но и на внутреннюю, а именно, как быстро пользователь это увидит. Исследования показывают, что примерно половина пользователей ожидает, что сайт загрузиться менее чем за две секунды, а 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 пользователей, а вот платная версия дает больше возможностей, в частности вы сможете самостоятельно прописать сценарий, который будут выполнять пользователи (к примеру, нажать на определенную кнопку или перейти в нужный раздел). При этом вы обязаны верифицировать то, что являетесь владельцем сайта.
Заключение

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

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

Алгоритмы ранжирования Google учитывают скорость загрузки страницы

9 апреля 2010 года Google официально объявили о том, что в их алгоритмах учитывается скорость загрузки страницы. Слухи ходили задолго до этого - когда компания стала подчеркнуто внимательно относиться к скорости, выпуская продукты Chrome (быстрый браузер) и SPDY (быстрый протокол передачи веб-контента) и продвигая сверхскоростные широкополосные каналы. В этой статье мы постараемся объяснить, как Google определяет скорость, и как вы можете проверить скорость загрузки своих страниц и увеличить ее.

Мы считаем, что скорость загрузки страницы - отличное дополнение к остальному списку факторов, определяющих ранжирование страниц в Google, и на это есть две основные причины:

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

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

Как Google определяет скорость?

Два основных метода анализа загрузки страницы:

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

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

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

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

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

Что это изменение алгоритма означает для вас

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

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

1. Оптимизируйте изображения: крупные картинки можно обрезать, сжать и увеличить скорость их загрузки.
2. Вместо фоновых изображений используйте просто цвета: так загрузка будет происходить быстрее.
3. Пользуйтесь кэшем: кэширование удобно для пользователей, поскольку картинки и другие статичные файлы загружаются только при первом посещении, а при последующих этого уже не требуется.
4. Загружайте внешний Javascript и вызываемые объекты в последнюю очередь: худшее, что вы можете сделать - заставить своих посетителей ждать, пока загрузится весь контент одновременно. По возможности сделайте так, чтобы ваш контент грузился первым, а внешний контент - после него.
5. Пользуйтесь отдельными файлами для повторяющегося кода: отдельные файлы чаще всего используются с таблицами стилей CSS и позволяют облегчить html-код страницы (меньше строк кода), а также дают центральный, легко находимый файл для внесения изменений в важные участки кода (например, в таблицы стилей).
6. Для организации страниц используйте стили CSS вместо таблиц HTML: прежде чем загружать саму таблицу, веб-браузеры (IE, Firefox и др.) ждут, пока загрузится весь ее контент. CSS делает этот процесс быстрее (и проще для обновления).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итак, вам нужно будет скачать на свой компьютер все внешние 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 у меня будет лежать два файла стилевого оформления:

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

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

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

    RewriteEngine On RewriteCond %{HTTP:Accept-encoding} !gzip RewriteCond %{HTTP_USER_AGENT} Konqueror RewriteRule ^(.*)\.(css|js)$ $1.nogzip.$2 Header append Vary User-Agent Header set Content-Encoding: gzip Header set Cache-control: private Header unset Content-Encoding

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

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

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

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

    /wp-admin/css

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Вам может быть интересно

    Gzip сжатие для ускорения загрузки сайта - как его включить для Js, Html и Css с помощью файла.htaccess
    Создание CSS спрайтов в онлайн генераторе Sprites Me для снижения числа запросов к серверу
    Измерение и увеличение скорости сайта в GTmetrix, а так же настройка загрузки библиотеки jQuery с Google CDN
    Как получить быстрый сайт - оптимизация (сжатие) изображений и скриптов, а так же уменьшение числа Http запросов
    Ускорение сайта - что дает, как измерить и как самому ускорить сайт
    Оптимизация и сжатие CSS в Page Speed - как отключить внешние файлы стилей и объединить их в один для ускорения загрузки
    Как найти и удалить неиспользуемые строки стилей (лишние селекторы) в CSS файле вашего сайта

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

    • Больше половины посетителей покидают страницу, которая грузится более 3-х секунд;
    • Сайт, который грузится 3 секунды, имеет на 25% меньше просмотров, на 50% больше отказов и на 25% меньше конверсии , чем сайт, который грузится 1 секунду;
    • Прогресс-бар увеличивает время ожидания загрузки страницы;
    • Скорость загрузки напрямую влияет на продажи и на позиции сайта;

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

    Рассмотрим способы ускорить время загрузки страниц сайта. По факту все способы очень просты и чаще всего сводятся к оптимизации "веса" страницы и грамотной загрузке кода.

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

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

    На каждом сайте есть подключаемые файлы со стилями.css и скриптами.js. Их можно сжимать на "лету" (при загрузке страницы). Проще говоря мы уменьшаем их вес и тем самым сайт быстрее грузится. Мои файлы в среднем сжимались на 75%. Например, если файл весил 45 кбайт, то после сжатия он стал весить уже 12 кбайт. Итого, экономия 33 КБайта веса на файле с таблицей стилей.

    Включить сжатие проще простого. Нужно лишь написать следующие строки кода в файл .htaccess (файл находится в корне сайта):

    mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

    Проверить включено ли сжатие можно на сайтах

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

    2. Включить кэш браузера

    Включение кэша браузера подключается добавлением пары строк кода все в тот же файл .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"

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

    Мое мнение, что в любом случае, срок 1-7 дней можно всегда поставить.

    Это самое простое, что можно было сделать, идем дальше.

    Возможно Вам будет интересно:

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

    Использование изображений jpg - для контрастных и gif - где мало количество цветов. Это все аксиомы. Ни в коем случае не использовать лишний раз png или bmp, поскольку оба формата являются совсем не оптимизируемыми.

    Уже существующие изображения jpg и png можно легко еще сжать с помощью программ и сервисов. Лично я поискал в интернете сервисы для сжатия изображения. Сравнил результаты, сделал вывод, что онлайн сервис tinypng.com нравится мне больше всех. Иногда ему удается уменьшить изображение даже на 75%, при этом качество остается почти без изменений.

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

    4. Подгружать файлы с другого домена

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

    Создают поддомен для хранения фотографий, javascript и другое. Например, если ранее фото лежало по адресу /img/foto.jpg , то теперь адрес нужно поменять на img.site.ru/img/foto.jpg . Для браузера это будет другой домен и таким искусственным методом мы ускоряем загрузку.

    Примечание

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

    5. Оптимизация CSS и JS

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

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

    6. Правильное расположение CSS и JS

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

    Примечание

    Если Вы подгружаете библиотеку AJAX (от Google), то, конечно, грузить с сайта гугла напрямую ее быстрее плюс можно быть почти на 100% уверенным, что в браузере пользователя уже есть ее кэш. Но бывает, что гугл почему не доступен или тормозит загрузку, поэтому чтобы минимизировать этот риск можно прописать следующий код:

    window.jQuery || document.write("");

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

    Примечание

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



    error: Content is protected !!