Ускорить загрузку страницы html. Что это изменение алгоритма означает для вас. Избавление от лишних запросов в коде шаблона

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

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

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

Но есть еще один момент, тесно связанный со скоростью сайта – это нагрузка на сервер, где хостится ваш ресурс. Как правило, медленная работа сайта связана с тем, что в системе протекают не оптимизированные ресурсоемкие процессы, такие как выполнение лишних скриптов или передача неоправданно больших объемов информации. Все это создает на сервера лишнюю нагрузку и хостер может попросить вас перейти на более дорогой тариф. Еще хуже, если чрезмерная нагрузка «положит» хостинг и вместо загрузки страниц (хоть и долгой) посетитель будет получать одну из 500-х ошибок сервера.

Подведем итог, ускорение сайта необходимо для:

Удержания аудитории и улучшения поведенческих факторов страниц;

Повышения ресурса в результатах поисковой выдачи;

Снижения нагрузки на хостинг.

С чего начинать работу по оптимизации

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

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

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

• Load time меньше 3 секунд – это хорошо,
• 3-10 секунд – повод для беспокойства,
• больше 10 секунд – кошмар и ужас, надо срочно исправлять.

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

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

Кроме того, часть данных на странице может подгружаться с других сайтов. Здесь мы можем понять, какие сервисы и ресурсы портят картинку, например, у меня на скриншоте видно, что рекламные скрипты kwork (биржи фриланса), googlesindications (объявления Adsense) и rotaban (биржа банерной рекламы) создают 50% от объема передаваемых данных. Изменить внешние скрипты возможности нет, поэтому, когда вы обнаружите что-то очень тормозное, просто откажитесь от его использования, поищите аналоги.

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

Самые длинные полоски показывают, что тормозит работу ресурса.

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

13 шагов для ускорения загрузки сайта

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

1. Сжатие медиафайлов

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

На среднестатистическом ресурсе файлы изображений занимают существенную долю всего контента по объему (в байтах). На иллюстрации выше видно, что у меня в блоге на главной странице, эта доля составляет почти 63% (698 кб) – это притом, что они уже оптимизированы под веб (сжаты).

Исходный объем картинок был в 2-3 раза больше и составлял бы от 1,5 до 2 мегабайт – передавать такой трафик каждому посетителю сайта тяжело как для серверного железа, так и для каналов передачи данных, особенно, когда посещаемость растет.

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

Я использую – tinypng.com , о нем и о других я писал инструкцию .

Для тех, кто эксплуатирует CMS WordPress, есть решение еще проще – ставим плагин «Compress JPEG & PNG images». Этот плагин сжимает картинки прямо на лету, при загрузке. Только не забывайте при его использовании, что сжимать надо не только те изображения, которые загружаются через библиотеку, но и те, которые вшиты в вашу тему сайта. Так что из файлов темы изображения все равно надо будет скачать и сжать вручную через сервис.

2. Кэширование страниц сайта

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

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

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

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

Такой метод как бы превращает сложный PHP сайт в простой статичный HTML.

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

Для WordPress есть несколько плагинов, предназначенных для кэширования, один из них .

3. Кэширование данных в браузере

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

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

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

Вот код для htaccess, просто вставьте его в свой файл:

# html и htm файлы будут храниться сутки Header set Cache-Control "max-age=43200" # css, javascript и текстовые файлы будут храниться неделю Header set Cache-Control "max-age=604800" # флэш файлы и изображения будут храниться месяц Header set Cache-Control "max-age=2592000" # Запрещаем кеширование служебных файлов Header unset Cache-Control

# Включаем кэширование в браузерах клиентов < ifModule mod_headers.c > # html и htm файлы будут храниться сутки < FilesMatch "\.(html|htm)$" > Header set Cache-Control "max-age=43200" < /FilesMatch > # css, javascript и текстовые файлы будут храниться неделю < FilesMatch "\.(js|css|txt)$" > Header set Cache-Control "max-age=604800" < /FilesMatch > # флэш файлы и изображения будут храниться месяц < FilesMatch "\.(flv|swf|ico|gif|jpg|jpeg|png)$" > Header set Cache-Control "max-age=2592000" < /FilesMatch > # Запрещаем кеширование служебных файлов < FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$" > Header unset Cache-Control < /FilesMatch > < /IfModule >

4. Gzip сжатие передаваемых данных

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

Такая упаковка данных снижает их объем в 2-4 раза. Серверное ПО по-умолчанию умеет сжимать данные, надо включить эту функцию с помощью кода в файле htaccess:

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

# сжатие text, html, javascript, css, xml: < ifModule mod_deflate.c > AddOutputFilterByType DEFLATE text / html text / plain text / xml application / xml application / xhtml + xml text / css text / javascript application / javascript application / x-javascript < /ifModule >

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

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

5. Уменьшение количества запросов к сайту

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

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

Аналогичным образом объединяем в один файл скрипты и CSS стили.

6. Сокращение HTML, CSS и JS

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

Браузер – это программа (), которой не нужны комментарии и остальные фишки, она читает только команды в коде и одинаково обработает оба варианта:

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

Обычно делают так: сохраняют исходник себе для будущих правок, а непосредственно на сайт выкладывают рабочую сжатую версию.

Примеры сайтов, где можно сжать код:

• HTML – daruse.ru/kompressor-html-koda-onlajn
• CSS – seolik.ru/minify-css
• JS – seolik.ru/minify-js

7. Удаление лишних функций или замена на HTML код

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

Что конкретно удалять или менять смотрите по коду в файлах сайта и по исходному коду сформированной страницы.

Для всех вариантов CMS я конкретные примеры не приведу, так как не компетентен (обратитесь к профильным специалистам), а по WordPress совет дам.

Из раздела head удаляем все скрытые ненужные ссылки, пользы от них нет, да и посетителю не видны все равно. А некоторые данные и вовсе могут стать полезной подсказкой для взломщиков.

Чтобы от них избавиться, в файле functions.php вашей темы вставляем код:

/*** Удаление лишнего из Header ***/ remove_action("wp_head","feed_links_extra", 3); remove_action("wp_head","feed_links", 2); remove_action("wp_head","rsd_link"); remove_action("wp_head","wp_generator"); remove_action("wp_head","start_post_rel_link",10,0); remove_action("wp_head","index_rel_link"); remove_action("wp_head","adjacent_posts_rel_link_wp_head", 10, 0); remove_action("wp_head","wp_shortlink_wp_head", 10, 0); remove_action("wp_head", "wlwmanifest_link");

/*** Удаление лишнего из Header ***/ remove_action ("wp_head" , "feed_links_extra" , 3 ) ; remove_action ("wp_head" , "feed_links" , 2 ) ; remove_action ("wp_head" , "rsd_link" ) ; remove_action ("wp_head" , "wp_generator" ) ; remove_action ("wp_head" , "start_post_rel_link" , 10 , 0 ) ; remove_action ("wp_head" , "index_rel_link" ) ; remove_action ("wp_head" , "adjacent_posts_rel_link_wp_head" , 10 , 0 ) ; remove_action ("wp_head" , "wp_shortlink_wp_head" , 10 , 0 ) ; remove_action ("wp_head" , "wlwmanifest_link" ) ;

Также, я заменяю на HTML функции выводящие:

- название сайта - описание сайта

- названиесайта - описаниесайта

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

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

Одним словом, поле для оптимизации обширное, но я советую обходиться без фанатизма.

8. Оптимизация и очистка базы данных

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

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

9. Блокировка лишней нагрузки от ботов

Обратиться к страницам вашего сайта может много кто, но среди всех возможных абонентов есть только 2 полезных:

Живой посетитель, который пришел за контентом;

Поисковый робот, заглянувший для индексации страниц.

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

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

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

А нем не надо тратить ресурсы на вредоносную активность, лучше сохранить их для нормальных посетителей.

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

# Запрет хакерских ботов RewriteEngine on RewriteCond %{HTTP_USER_AGENT} ^$ RewriteCond %{HTTP_USER_AGENT} (|"|%0A|%0D|%27|%3C|%3E|%00) RewriteCond %{HTTP_USER_AGENT} .*(libwww-perl|wget|python|nikto|curl|scan|java|winhttp|clshttp|loader).* RewriteRule ^(.*)$ -

# Запрет хакерских ботов RewriteEngine on RewriteCond %{HTTP_USER_AGENT} ^ $ RewriteCond %{HTTP_USER_AGENT} (< | > | "| % 0A | % 0D | % 27 | % 3C | % 3E | % 00 ) RewriteCond %{HTTP_USER_AGENT} . * (libwww-perl | wget | python | nikto | curl | scan | java | winhttp | clshttp | loader ) . * RewriteRule ^ (. * ) $ -

К таким файлам, как вход в админку поставьте запрет для посторонних IP. Для этого в htaccess вставляем код:

order deny,allow deny from all allow from xx.xx.xx.xx

< Files wp-login.php > order deny , allow deny from all allow from xx . xx . xx . xx < /files >

Вместо xx.xx.xx.xx – ваш ip адрес. Все запросы к этим файлам с посторонних адресов получают 403 ответ сервера (доступ запрещен). Нагрузку этот ответ создает минимальную.

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

10. Запрет на прямое использование картинок с сайта

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

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

Для этого создайте файл.htaccess в папке, где находятся ваши картинки к постам, у WordPress это wp-content/upload/. Можно использовать и основной htaccess в корне, но тогда блокироваться будут любые изображения, а вдруг вы решите разместить свой баннер на чужом сайта.

А так фильтроваться будут только картинки лежащие в определенной папке, а те файлы которые блокироваться не должны будут лежать в отдельной директории (сделайте ее, например, в корне сайта).

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

RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?.(jpg|jpeg|png|gif)$ -

RewriteEngine on RewriteCond %{HTTP_REFERER} ! ^ $ RewriteCond %{HTTP_REFERER} ! ^ http (s ) ? : / / (www \ . ) ? biznessystem . ru RewriteRule \ . (jpg | jpeg | png | gif ) $ -

* в коде указан мой домен – поменяйте его.

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

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

• Инженеры Google выяснили , что пользователь замечает даже пустяковую задержку загрузки - 0,4 секунды;
• Пользователь с большой вероятностью покинет страницу, если та загружается 3+ секунд;
• Мобильные пользователи готовы ждать немного дольше - 6-10 секунд;
• 79% пользователей интернет-магазинов не сделают повторную покупку, если в первый раз сайт загружался долго.

Эксперимент Financial Times

Представители деловой газеты провели эксперимент с новым сайтом издания.

Участников поделили на две группы. Первая, контрольная, просматривала страницы с обычной скоростью загрузки, а вторая - с задержкой в пять секунд. Во втором этапе приняли участие уже четыре группы: контрольная и ещё три, участникам которых «досталась» задержка в одну, две и три секунды. Глубину просмотра в течение сессии взяли за коэффициент конверсии (рассматривали пользователей, которые посетили хотя бы две страницы) и посчитали разницу между конвертированными пользователями в каждой из групп.

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

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

Скорость загрузки можно измерить с помощью этих сервисов:

Как увеличить скорость загрузки сайта1. Уменьшите объем загружаемых страниц

Используйте сжатие gzip, это сократит время передачи файлов браузеру. Объём передаваемых данных уменьшится в 4-5 раз, а скорость загрузки - увеличится.

Nginx

Для включения сжатия gzip в Nginx, измените конфигурацию сервера и добавьте эти строки:

Server { .... gzip on; gzip_disable «msie6»; gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript; }

Apache

Сначала убедитесь, что подключен модуль mod_deflate . После этого нужно добавьте в файл.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

Уровень сжатия

Gzip поддерживает уровень сжатия от 1 до 9. В Nginx его можно регулировать таким образом:

Gzip_comp_level 5;

Оптимальный уровень сжатия - 5.

2. Уменьшите объём графики

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

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

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

Как это работает:

new Imager({ availableWidths: });

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

3. Уменьшите количество запросов браузера

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

Используйте CSS-спрайты - графические файлы, содержащие сразу несколько изображений. Это оптимальный способ, если на сайте много маленьких изображений и иконок. Объедините несколько CSS- и JS-файлов в один, это сократит количество HTTP-запросов.

Чтобы посмотреть количество запросов браузера в Chrome, войдите в «Инструменты разработчика» (Настройки → Дополнительные инструменты) и перейдите во вкладку Network.

4. Включите кэширование данных

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

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

Как включить кэширование?

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

Это можно сделать так:

Header set Cache-Control «max-age=1234000»

Укажите нужные расширения файлов в конструкции FilesMatch, где для них устанавливается заголовок Cache-Control и переменная max-age, с помощью которой указывается время хранения файлов в секундах. Те файлы, которые не нужно кэшировать, просто не включайте в список.

Также можно запретить кэширование файлов. Добавьте приведённый ниже код в.htachess, предварительно указав, какие типы файлов кэшировать не нужно:

Header unset Cache-Control

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

Например, так:

ExpiresActive On ExpiresDefault «access plus 2 month» ExpiresByType image/png «access plus 4 months» ExpiresByType image/swf «access plus 4 months»

ExpiresByType text/html «access plus 2 month 14 days 7 hours» ExpiresByType image/gif «modification plus 8 hours 3 minutes»

5. Сократите размер кода CSS и JavaScript

Специальные сервисы для упрощения JavaScript и CSS удаляют из кода «лишние» символы (пробелы, комментарии) и сокращают время его загрузки. Для увеличения скорости они могут быть эффективнее, чем стандартное сжатие gzip. Google рекомендует СSS-файлы небольшого размера вставлять непосредственно в документ HTML.

Вы можете воспользоваться этими сервисами:

Размещайте CSS-файлы в начале страницы, а JS-файлы - в конце.

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

Успешной настройки!

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

Сегодня я хочу попробовать систематизировать все то, о чем уже было мною написано по поводу оптимизации скорости, а также добавить существенные моменты, позволяющие немного снизить нагрузку на сервер хостинга за счет использования не динамического, а статического 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 - как отключить внешние файлы стилей и объединить их в один для ускорения загрузки

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

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

Поговорим мы о том, как ускорить загрузку вашего сайта, использовав при этом 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.

Скорость работы сайта – один из самых важных показателей при создании сайта и интернет-приложений.

Согласно исследованиям различных аналитиков из Google, люди обычно просматривают менее первых 25 секунд видеоролика, а некоторые даже меньше 10 секунд

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

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

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

Ускорение сайта методом оптимизации изображений

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

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

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

Форматы изображений

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

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

Код изображения

Самое плохое, что мы можем сделать и отрицательно повлиять на скорость загрузки изображения, это позволить коду автоматически выставлять размеры изображения. Ну что ж, можно сказать: «Разрешим коду сделать ___ для нас». В таком случае обычно говорят: «Можешь сделать лучше – сделай сам», и это действительно правильно. Используя такие показатели, как width=’60px’ height=’50px’, можно действительно снизить нагрузку на сервер и время загрузки им изображения, так как сервер считывает информацию о странице и видит поставленные перед ним задачи. Потому, убедитесь, что вы на верном пути и сделайте так со всеми вашими изображениями.

Инструменты оптимизации изображений

Инструменты всегда полезны. Хорошо, в большинстве случаев… Иногда они мешают и отвлекают внимание, но в данном случае они действительно будут очень полезными. Если вам удастся найти замечательный инструмент для оптимизации изображений, прежде всего, пожалуйста, напишите об этом в комментариях, так как мы всегда в поиске лучшего. Следующие несколько инструментов – мои любимые. Мне нравится ImageOptim для Mac и Riot для Windows. Они очень отличаются друг о друга, но выполняют одну задачу.

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

Ускорение загрузки сайта засчет оптимизация CSS и JavaScript

CSS и JavaScript являются важными языками, когда дело доходит до веб-дизайна и, особенно, при создании динамического контента. Я считаю, что люди часто забывают о том, что могут оптимизировать свой динамический контент, а также не улучшают свои JavaScript и CSS. Конечно, это не самые необходимые вещи для небольших сайтов, но для больших – это действительно важно, особенно для тех, которые полагаются на большое количество дизайнерских решений. Давайте рассмотрим несколько «Правил для JavaScript и CSS», которые достаточно хорошо стандартизированы при создании веб-приложений.

Первое правило для CSS и JavaScript

• Если вы можете сделать это в CSS , то делайте в CSS

Мы часто забываем, что у нас есть такой замечательный инструмент и, я бы сказал, система CSS является самым замечательным, что есть у веб-дизайнера. Также добавил бы, что дизайнеры слишком быстро переводят работу в Photoshop (но это их работа и не будем осуждать их за это). При выполнении дизайна вам следует учитывать тот факт, что кроме графического редактора, ваш браузер тоже может вам кое-чем помочь, если вы воспользуетесь CSS3. Используйте все его преимущества! Располагая инструментом, где макеты можно выполнять действительно быстро, вам уже не потребуется в дальнейшем использовать для их компоновки HTML. Уверен, что вы сможете реализовать все при помощи CSS!

Второе правило для CSS и JavaScript

• Уменьшайте, уменьшайте, уменьшайте!

Минимализация кода – это, пожалуй, один из самых простых и лучших способов повысить скорость загрузки сайта. Обратите внимание, что мы говорим о миллисекундах, но и они влияют позитивно, особенно при использовании, например, библиотеки jQuery. Помните, что установив плагин для JavaScript/CSS и задав настройки для скачивания уменьшенной версии кода сайта (ее не надо редактировать), вы улучшите скорость загрузки сайта, потому сделайте так! Моими любимыми инструментами являются Code Minifier для Mac, Minify для Windows и JSCompress /CSSCompressor для тех, кто хочет работать в смешанной кросс-браузерной платформе. Хорошего уменьшения!

Третье правило для CSS и JavaScript

• Скажите In-line «нет-нет»

Плохой практикой является использование in-line в CSS или JavaScript, особенно, когда дело доходит до CSS. Здесь проблема не только в том, что это устаревший метод, но и в том, что если оставить CSS в коде HTML (особенно в in-line), это будет читаться так: HTML/CSS/HTML/CSS/HTML/CSS/HTML/CSS, а не просто HTML => CSS. Вы знаете, что это очень плохо для времени серверной загрузки, и может ухудшить большинство веб-приложений, использовавших такой подход к отдельным файлам. Это, конечно, не выведет из строя ваш сайт, но может привести к тому, что нужно будет звать мастера, который станет разбирать, где ошибка – а это уже важно. Потому, всегда будьте тем, кто может решить проблемы, а не тем, кто ее создает.

Четвертое правило для CSS и JavaScript

• Перемещайте вниз

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

Пятое правило для CSS и JavaScript

• DOM-оптимизация

По возможности уменьшите DOM. Например, вы часто используете jQuery, который создает много элементов DOM или все считывает через DOM – все это значительно замедляет работу вашего сайта. Есть одна пословица, которая мне нравится и ее можно использовать в этом случае: «Если вы так делаете потому, что это единственный верный способ, значит, существуют и более верные способы». Еще можно сказать, «Если вы так делаете потому, что это единственный верный способ, который вы знаете, значит, вы делаете это неправильно», но эта версия немного жестковата.
Ищите и найдете искомое. Если вы работаете с div-элементами в HTML только потому, что они необходимы для каких-то маленьких задач, и знаете только этот единственный способ работы, то он может быть не самым лучшим способом. Теперь, конечно, я понимаю, что использование тегов div необходимо для CSS, но можно найти и другие способы их применения, кроме стилизации.

Как раз недавно я сам пришел к этому, так как вел работу над проектом на Ruby on Rails. Немного ранее на этой неделе я сделал то, что давно хотел – один в один перевел около 5 div-элементов в HAML (переместил папку в папку и затем еще раз в папку). Я так сделал только лишь потому, что не знал лучшего способа, и в результате у меня получилась какая-то гадость, которую пришлось переделывать. Такая работа оказалась намного сложнее, но из нее я узнал много полезных вещей, она заставила меня выучить новый способ решения подобных вопросов в будущем. Двигайтесь дальше и получайте новые знания! Истина очень близко.

Основные работы по увеличению скорости загрузки сайта

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

• Слеши в ссылках

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

• Фавиконы

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

Данная тема очень обширна, и я, к сожалению, не являюсь в ней хорошим экспертом. Однако вся суть кэширования достаточно проста. Это хранение файлов (как правило, с кодом HTML/CSS) с часто посещаемых вашим компьютером сайтов и потому ему не нужно скачивать их каждый раз.

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

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