Что еще можно сделать для ускорения сайта?

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

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

• Amazon: задержка загрузки на 0,1 секунду приводит к падению продаж на 1%.
• Google: задержка в 0,5 секунды приводит к потере 20% поисковых запросов.
• Yahoo!: задержка в 0,4 секунды увеличивает количество людей, не дождавшихся окончания загрузки, на 5−9 %.

И потому приступим: запускайте свое расширение Page Speed, и начинайте анализ скорости загрузки сайта.

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

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

Рассмотрим некоторые предложения Page Speed.

Оптимизируйте порядок загрузки стилей и скриптов

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

На практике это выглядит так — сначала в коде Вы располагаете все внешние стили, что-то вроде:

<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="style1.css" />
<link rel="stylesheet" type="text/css" href="style2.css" />

А уже ниже располагаете скрипты:

<script type="text/javascript">
document.write(«Привет, мир!»);
</script>

<script>
document.write('<script src="example.js"><\/script>');
</script>

<script src="example.js"></script>

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

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

Сократите JavaScript и CSS

С помощью сервиса Page Speed Вы можете оптимизировать свои скрипты и стили. Действие выполняется аналогично оптимизации картинок.

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

То же самое касается пункта Сократите CSS. Действия такие же, только вместо файлов js Вы будете изменять файлы css.

Опять же, перед началом работы можете прикинуть с помощью сервиса Pingdom Tools ожидаемый эффект. Если мизерный, и скрипты и так загружаются за миллисекунды, то и делать это все особого смысла нет.

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

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

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

И осталось только исправить ситуацию: сделать файл .htaccess, разместить в нем код, и залить файл в папку поддомена с картинками. И все заработало.

Используйте Keep Alive

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

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

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

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