Main menu

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

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

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

### Кэширование файлов на один год
<FilesMatch "\.(ico|pdf|avi|mov|zip|rar|flv|mp3|wmv|wav)$">
Header SET Cache-Control "max-age=29030400, public"
### Кэширование на одну неделю
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header SET Cache-Control "max-age=604800, public"
### Кэширование на один час
<FilesMatch "\.(txt|js|css)$">
Header SET Cache-Control "max-age=10800"
### Кеширование отключено
<FilesMatch "\.(html|htm|php|cgi|pl)$">
Header SET Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"
 

 Вообще Я рекомендую выставлять кэширование минимум на день. Я имею ввиду js, css скрипты и прочие. Тем более если работу над сайтом вы уже закончили. Можно выставить и на неделю. Я обычно выставляю на месяц, все равно эти файлы очень редко подвергаются изменениям. Вышеприведенный пример относится к расширению Apache - mod_header. Если же, в вашем случае, Apache использует расширение mod_expires, то в .htaccess нужно прописать вот так:

ExpiresActive ON ExpiresDefault A0 ### Кэширование на один год 
<FilesMatch "\.(ico|pdf|avi|mov|zip|rar|flv|mp3|wmv|wav)$"> 
ExpiresDefault A29030400 
### Кэширование на одну неделю 
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$"> 
ExpiresDefault A604800
### Кэширование на три часа <FilesMatch "\.(txt|js|css)$">
ExpiresDefault A10800"

 Узнать, какое расширение использует ваш Apache можно посмотрев сведения о системе или просто спросив об этом у вашего хостера.

Далее, не далеко отходя от темы файла .htaccess рассмотрим GZip сжатие. Кроме того, что Joomla сама может использовать GZip, можно сжать еще и файлы различных скриптов, будь то js или css и тому подобное. Чтобы включить GZip сжатие этих файлов пропишем в .htaccess следующие строки:

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

 Обратите внимание, что здесь указано сжатие HTML, а это значит, что все, что указано в HTML, например CSS и JS скрипты, так же подвергнутся GZip сжатию. Поэтому необходимо убедиться, установлено ли такие расширение для Apache, как mod_deflate. Пожалуй на этом с .htaccess и закончим. Перейдем к работе над самими файлами скриптов и изображений, которые мы используем на сайте...

Сжимаем и еще раз сжимаем

Обычно CSS и JS файлы можно минифицировать, то есть уменьшить. Зачастую эти файлы не минифицированы изначально, так как программистам и верстальщикам гораздо удобнее работать с не минифицированным кодом. А значит в этом коде куча лишних пробелов, абзацев и, частенько, комментариев, которые они, программисты, оставляют как для себя, так и для других программистов. А это все, как известно, имеет вес, ведь даже воздух имеет вес ;). Казалось бы, что могут дать эти несколько килобайт, но с другой стороны там несколько килобайт, сям несколько килобайт и получается от 100 до 200, в зависимости от того, сколько файлов вы подключаете и сколько они весят сами по себе. А 200 килобайт это хоть и не очень много, все же ощутимо даже если ваш сайт весит около одного мегабайта на главной странице. Но конечно же вручную мы этим заниматься не будем - так как за нас уже все давно придумали. В общем прежде чем запускать сайт Я рекомендую минифицировать все CSS и JS скрипты, которые используются вашим сайтом. При этом не стесняйтесь сжимать файлы расширений или шаблонов, ведь программисты зачастую оставляют скрипты не минифицированными. Вы можете просто открыть исходный код сайта и посмотреть, какие файлы подключаются у вас на сайте. Итак для минификации скриптов Я покажу вам парочку сервисов, которые превосходно справляются со своей задачей и позволяют без особого напряга и траты времени значительно облегчить ваш сайт.

Для начала рассмотрим два обфускатора CSS файлов: это CSS Optimizer и CleanCSS. Эти сервисы онлайн и не требуют ничего скачивать. Просто выбираете кое какие настройки и вставляете в диалоговое окно ваш код. И после нажатия на кнопку запуска обфускатора сервис сделает все сам. Вам требуется только заменить полученный код на старый. Сервисы сразу показывают на сколько им удалось сжать CSS и прошло ли все успешно. Обратите внимание на то, что указано в логах - если все прошло хорошо, то ни о чем не беспокоясь заменяем этим кодом старый, а если возникли какие то проблемы, то, возможно, потребуется поработать ручками.

Теперь рассмотрим JS компилятор, так же онлайн. Это сервис от Google, поэтому сомнений в его компетенции быть не должно. Он так же превосходно справляется со своей задачей, ведет логи в реальном времени и показывает результат. Это JS Closure Compiler. Работать с ним так же просто - вставляем наш JS код и получаем уже минифицированный. Заменяем им старый и, в итоге, получаем меньший вес у сайта.

Ну и напоследок (в этой теме) рассмотрим два сервиса сжатия изображений. Как известно изображения - неотъемлемая часть любого сайта. Без изображений никуда. Это может быть логотип, картинки в статьях или просто элементы дизайна. Так что делать если они много весят? Ведь чем больше вес тем хуже. И порой никакой фотошоп не в силах помочь и сжать изображения достаточно. Конечно в первую очередь нужно по минимуму использовать изображения в элементах дизайна сайта. Сейчас большинство CSS функций способны заменить их. Фон, или элементы меню. Лучше сделать это с помощью CSS. И запросов меньше и веса. Но как быть с изображениями в статьях, логотипами и тому подобным? Я нашел для себя два сервиса сжатия изображений. Один для jpg и jpeg файлов, а второй для png, если вам нужно оставить прозрачный фон. Разумеется все сжатие будет происходить без потери качества и только так.

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

Сервис же для сжатия PNG файлов - PunyPNG. Он конечно не так хорош. В том плане, что png изображения он сжимать в три-четыре раза не может, однако он позволяет сохранить прозрачность фона и все таки ощутимо сжать файл изображения. В общем достойных альтернатив Я так и не нашел.

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

Ну и в окончании первой части поговорим о слиянии или объединении файлов скриптов. В первую очередь это нужно для того, чтобы уменьшить общее количество запросов. Чем меньше запросов - тем быстрее загружается сайт. Запомните: на скачивание одного файла большего размера расходуется меньше ресурсов вашего сервера, чем на скачивание нескольких файлов меньшего размера. К тому же браузер пользователя скорее скачает один файл побольше, чем несколько поменьше, ведь перед тем как скачать эти несколько файлов нужно еще и запрос на сервер отправить, а уже потом начать скачивание. Как объединять файлы? Ну для Joomla немного проще, ведь существуют различные расширения и фреймворки, которые помогают все это довести до автоматизма. А что делать если вы не хотите ставить подобные расширения, или они работают некорректно, а сократить количество загружаемых скриптов очень хочется? Здесь все таки придется поработать ручками. Заходим на наш сайт, открываем исходный код и смотрим какие файлы загружаются. Рекомендую обращать внимание только на те файлы, которые загружаются на всех страницах сайта, если какие то файлы загружаются не везде, то их можно не объединять. Все же это определенное количество килобайт, которое по сути нужно не везде. Смотрим на последовательность вызываемых файлов. Потом открываем самый первый (конечно CSS и JS объединяем в соответствующие, разные файлы) и в самом конце добавляем код следующего и так далее. Все последовательно выполняем. Если файлы еще не минифицированы - лучше сделать это. Весь файл минифицировать нельзя. И разделяем части файла небольшими комментариями, которые помогут нас лучше ориентировать при обновлении или работе с ними. После каждого добавленного скрипта в первый файл ищем код, который вызывает наш файл, который мы перенесли в первый и удаляем этот код. После чего очищаем кэш сайта и бразера и смотрим - все ли корректно отображается. Это пожалуй самый простой способ. Если какие то проблемы возникают - пользуйтесь FireBug'ом, если же и это не помогло - придется оставить все как есть.

На этом первая часть закончена. Перейдем непосредственно к Joomla.

Собственно тут все довольно просто - необходимо придерживаться нескольких простых правил: всегда включать кэширование, как в общих настройках, так и плагин кэширования. Так же обратите внимание на время кэширования - оно должно быть и там и там одинаковым. Время кэширование определяет промежуток в минутах, через который кэш будет частично или полностью считаться недействительным. После этого создастся новая "партия" кэшированных данных и будут использоваться именно они. Обратите внимание, что очищать кэш каждый день не обязательно. Во первых это будет создавать нагрузку на сервер, во вторых в этом просто нет необходимости. Конечно не всегда ;). Но и оставлять неочищенным кэш неделями не нужно, так как место на хостинге может уменьшиться или даже закончиться. Особенно если вы используете фото галереи. Кэш с ними может достигать от 100 мегабайт до нескольких гигабайт. А если кэш будет снова и снова создаваться - быстро закончится место на вашем хостинге. Поэтому лучше выставлять большой промежуток времени кэша и раз в пять дней его очищать. Конечно вам придется это делать и при создании новых материалов или внесении каких либо изменений в сайт.

Так же в общих настройках включать GZip.

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

Ну и в окончании вообще всей статьи хочу поделиться с вами еще одним сервисом, который поможет детально рассмотреть что загружается при открытии сайта. Какие изображения и скрипты или другие файлы и сколько они весят. Так же этот сервис выставляет оценку, насколько быстр ваш сайт и количество запросов при его загрузке. Ну и конечно подробное описание каждого запроса. Что он подгружает и сколько на это тратится ресурсов. Это Pingdom Tools. Весьма удобен и очень полезен для всех, кто делает сайты ;)

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

Спрашиваете: Где купить песок мытый? Ответ: в компании АЛГОРИТМ algnm.ru