Продолжение.
Начало поста Ускоряем сайт на WordPress здесь.
12. Большой размер файлов:
Можно сжать JavaScript и CSS коды для уменьшения размеров соответствующих файлов.
Утилиты по сжатию файлов удаляют комментарии, лишние пробелы и переводы строк, заменяют все объявленные переменные меньшими по длине, уменьшая общий объем файла более, чем в 2 раза.
Для сжатия файлов можно воспользоваться этими сервисами:
http://shygypsy.com/cssCompress/ - CSS-компрессор.
http://dean.edwards.name/packer/ - JavaScript компрессор.
Еще один способ уменьшить размер файлов — использовать Gzip-сжатие.
Gzip - это обычное архивирование всей передаваемой информации на Web сервере и последующее разархивирование этой информации в браузерах пользователей.
Это самый популярный и эффективный метод сжатия данных на сегодняшний день.
Все современные браузеры поддерживают Gzip сжатие, поэтому проблем у посетителей при просмотре страниц вашего ресурса возникнуть не должно.
Таким образом, сжатие наибольшего количества типов файлов - это простой способ уменьшить размер страницы, и ускорить работу сайта.
Gzip-сжатие в целом снижает размер ответа примерно на 70%.
Приблизительно 90% сегодняшнего интернет-траффика проходит через браузеры, поддерживающие gzip.
Как проверить, работает ли на вашем сервере Gzip-сжатие?
Открываем Page Speed, переходим на вкладку Resources и в появившемся списке видим файлы, загружаемые с сервера с указанием URL этих файлов (самым первым идет основной файл загружаемого документа - html).
Вы, наверное, знаете, что несмотря на то, что многие CMS (движки сайтов) работают на PHP, в браузер пользователей все равно отдается сгенерированная версия страницы в формате html.
Справа от списка файлов, в двух последних столбцах, которые называются «File Size» (реальный размер файла на web сервере) и «Transfer Size» (размер файла, передаваемого в браузер) указаны размеры файлов, загружаемых с сервера в браузер посетителя сайта.
Если размер файла в колонке «File Size» больше размера этого же файла в колонке «Transfer Size», значит для этого типа файлов Gzip-сжатие работает.
Обратите внимание, что размер сжатого Gzip файла будет существенно меньше размера оригинального файла.
Если Gzip-сжатие не включено, то размеры файлов в столбцах «File Size» и «Transfer Size» будут одинаковы.
Посмотрите на своем сайте, для каких типов файлов сжатие работает, а для каких нет. Увидеть это можно в столбце «Type».
Если вы обнаружите, что Gzip сжатие совсем не работает на вашем хостинге, значит его нужно включить.
Как включить Gzip сжатие?
Проще всего обратиться с этой просьбой к хостеру.
При этом нужно указать, какие типы файлов нужно сжимать.
Обычно это файлы html, .css, js и .ttf (файлы шрифтов).
Любители самостоятельно покопаться в файлах, для включения Gzip сжатия, могут внести изменения в файл .htaccess.
Чтобы точно узнать, как настроить Gzip сжатие именно на вашем хостинге, задайте этот вопрос техподдержке хостинга.
Обычно, она дает ссылку на инструкцию, в которой написано, как это сделать именно на их хостинге.
Файл .htaccess, находится в корне сайта (корень сайта, это папка в которой лежит файл config.php) и предназначен для управления сервером Apache.
Подключитесь к своему сайту по FTP (FTP клиент FileZilla - http://www.bestfree.ru/soft/inet/ftpmanager.php#FileZilla), откройте корневую папку (обычно это либо PUBLIC_HTML, либо HTDOCS) и проверьте наличие в ней файла .htaccess.
Если .htaccess не видно, то попробуйте в программе FileZilla выбрать из верхнего меню пункты «Сервер» - «Принудительно отображать скрытые файлы».
Если и после этого файл .htaccess в корневой папке не появится, то создайте у себя на компьютере пустой текстовый файл в любом удобном для вас редакторе (я пользуюсь редактором Notepad2), назовите его как-нибудь и скопируйте на сервер вашего хостинга в корень сайта. После этого переименуйте этот файл в .htaccess в программе FileZilla.
Вот вариант кода для включения Gzip сжатия для одного из моих сайтов:
<ifModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/css <ifModule mod_setenvif.c> BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html </ifModule> </ifModule> |
Вот, еще один вариант кода для файла .htaccess:
<ifModule mod_deflate.c> 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 <ifmodule mod_gzip.c> mod_gzip_on Yes mod_gzip_item_include file .js$ mod_gzip_item_include file .css$ </ifmodule> </ifModule> |
А этот код актуален только для сервера Apache2:
SetOutputFilter DEFLATE |
Если Gzip сжатие для всех типов файлов: Html, Css и Js заработало, отлично!
Если нет, поможет обращение к хостеру или поиск в интернете - в нем можно найти разные варианты кодов для реализации Gzip сжатия.
Так что, если у вас не сработал и этот способ, можете поискать подходящий вашему серверу код в сети.
Если получилось, то все файлы, которые можно сжать, прежде, чем они будут отправлены в браузеры посетителей, будут сжаты средствами Gzip на сервере. Благодаря этому существенно увеличится скорость загрузки сайта. И это отлично!
Но, как всегда, есть и плохая новость - Gzip сжатие нагружает сервер на вашем хостинге, т.к. процессор веб сервера при включенном Gzip сжатии будет выполнять множество операций архивирования данных (Gzip сжатия) при каждом открытии посетителями любой страницы вашего сайта.
К счастью, эта проблема решаемая - можно перейти на другой тарифный план, позволяющий большие нагрузки или даже на другой хостинг, на котором нагрузки не лимитированы.
А вот, проблему медленной загрузки сайта компенсировать не удастся ничем так, что не сомневайтесь - вы действуете правильно.
Если добавление указанного выше кода не помогло, то, возможно, на вашем хостинге включен модуль nginx и для части файлов уже включено gzip сжатие.
Модуль nginx имеет свои настройки, которые может поменять только хостер.
Если какие то из файлов не сжимаются, вам нужно написать хостеру и указать, какие типы файлов нужно сжимать. Обычно это файлы html, .css, js и .ttf (файлы шрифтов).
Продолжение поста Ускоряем сайт на WordPress читайте дальше.
Спасибо за советы. я долгое время не мог разобраться с htaccess. Добавил ваш код. Пока вроде все нормально. Дальше буду вести наблюдение за скоростью.
Людмила, спасибо большое за эту статью!!!
Получилось, но не все. Последний код ломал сайт полностью, а тот, что для htaccess первый, проблему исправил частично (ну по крайней мере частичное сжатие происходит). Буду дальше пробовать...
У меня к сожалению не сработало, буду пробовать другой.
Спасибо. А можно еще и вот так автоматизировать процесс сжатия - http://plutov.by/post/js_css_auto_compress
здравствуйте!
извините,что отвлекаю глупыми вопросами!
создал сайт тестовый на вордпресс.
не могу разобраться с Gzip сжатием в .htaccess файле.
вставил:
SetOutputFilter DEFLATE
Header append Vary User-Agent
вроде сжатие есть, а как понять сжимаются Html, Css и Js, или нет???
И самое главное:
как, всё таки, правильно писать сжатие?
Проверить можно при помощи дополнения Page Speed для Firebug или на сервисе http://gtmetrix.com.
Чтобы точно узнать, как настроить Gzip сжатие именно на вашем хостинге, задайте вопрос техподдержке хостинга.
Обычно, они, либо сами это делают, либо дают ссылку на инструкцию, в которой написано, как это сделать именно на их хостинге.
Здравствуйте! Хочу немного подкорректировать. Page Speed хоть в отдельности, хоть для Firebug работает немного по другому и ковыряет еще глубже чем сервис http://gtmetrix.com. Так что между ними ставить "ИЛИ" нельзя. Они скорее дополняют друг друга. И если http://gtmetrix.com уже почти доволен, то Page Speed может еще возмущаться. И это помогает добить результат до конца.
У меня получилась такая ситуация. Я в .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
Только он должен писаться в одну строку. http://gtmetrix.com мгновенно заткнулся и показал скорость 92% от максимально возможной по его оценке, но время загрузки оставалось по прежнему в районе 1 сек. К стати другие тестеры скорости и сжатия сайтов вели себя также. Только Page Speed утверждал, что сжимается только HTML, а CSS и JS не сжимаются. И вот когда прописал каждый параметр в отдельной строке как в первом варианте кода, только тогда Page Speed успокоился. Признал, что сжатие есть и только CSS и JS по чужим ссылкам не сжимаются. http://gtmetrix.com после этого просто обалдел и указал, что скорость и оценка 100%, и время указал 0,52 сек. Так что тестируйте господа. Удачи!
Спасибо.Хороший, творчески выполнен, познавательный сайт. Ваши материалы использую в работе. Большое спасибо… ОБЖ
Попробовал ваши варианты, но к сожалению все директивы внесенные в htacces приводят к ошибке 500. Вот глядите webprofit.kz он работает на nginx, все предложенные вами варианты для Apache и Apache2. Что предложите мне?
Содержание файла htacces зависит от настроек сервера, поэтому вам лучше обратиться к техподдержке вашего хостинга.
Возможно на вашем сервере используется не .htacces, а httpd.conf или vhost.conf. Всё то же самое копируем в эти файлы и пробуем.
Метод научного тыка не самый быстрый, но самый достоверный.
Спасибо! Помогли Ваши советы =)