- Автор темы
- #1
Для вебмастеров и оптимизаторов время скорости загрузки для сайта имеет важное значение. В качестве подтверждения этого, хочу привести немного статистики и фактов:
Способы ускорить время загрузки страниц сайта
По факту все способы очень просты и чаще всего сводятся к оптимизации веса страницы и грамотной загрузке кода.
В интернете довольно много материала по этой теме. Я постарался изложить все способы компактно и только по делу. Начнем.
1. Включить сжатие gzip
На каждом сайте есть подключаемые файлы css и js. Их можно сжимать на "лету" (при загрузке страницы). Проще говоря мы уменьшаем их вес и тем самым сайт быстрее грузится. Мои файлы в среднем сжимались на 75%. Например, если файл весил 45 кбайт, то после сжатия он стал весить уже 12 кбайт. Итого, экономия 33 КБайта веса на файле с таблицей стилей.
Включить сжатие проще простого. Нужно лишь написать следующие строки кода в файл .htaccess (файл находится в корне сайта):
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
Проверить включено ли сжатие можно на сайтах
Если что-то не получается, то смело пишите вопрос в тех.поддержку хостинга. Зачастую бывает, что у них самих что-то не включено в настройках сервера.
2. Включить кэш браузера
Использования кэша браузера подключается почти как и сжатие gzip добавлением пары строк кода в файл .htaccess:
<IfModule mod_expires.c>
Header append Cache-Control "public"
FileETag MTime Size
ExpiresActive On
ExpiresDefault "access plus 0 minutes"
ExpiresByType image/ico "access plus 1 years"
ExpiresByType text/css "access plus 1 years"
ExpiresByType text/javascript "access plus 1 years"
ExpiresByType image/gif "access plus 1 years"
ExpiresByType image/jpg "access plus 1 years"
ExpiresByType image/jpeg "access plus 1 years"
ExpiresByType image/bmp "access plus 1 years"
ExpiresByType image/png "access plus 1 years"
</IfModule>
Есть только важная проблема, какой срок хранения кэша поставить. Если вы поставите очень большой срок, а файл изменился, то браузер упорно будет грузить то, что у него есть в кэше. Выходом из ситуации может послужить замена имени файла и внесение изменения в шаблон, но разве это удобно? Так что вам стоит подумать и самостоятельно определить как часто вы меняете файлы на сайте.
Мое мнение, что в любом случае, срок 1-7 дней можно всегда поставить.
Это самое простое, что можно было сделать, идем дальше.
3. Оптимизируйте изображения
Использование изображений jpg - для контрастных и gif - где мало количество цветов. Это все аксиомы. Ни в коем случае не использовать лишний раз png или bmp, поскольку оба формата являются совсем не оптимизируемыми.
Уже существующие изображения jpg и png можно легко еще сжать с помощью программ и сервисов. Лично я поискал в интернете сервисы для сжатия изображения. Сравнил результаты, сделал вывод, что онлайн сервис tinypng.com нравится мне больше всех. Иногда ему удается уменьшить изображение даже на 75%, при этом качество остается почти без изменений.
Если сайт использует в качестве фона большое изображение, то его можно очень сильно сжать. Например, мне удалось сжать с 300 Кбайт до 86 Кбайт картинку с задним фоном для одного из сайтов.
4. Подгружать файлы с другого домена
У браузеров есть ограничение на количество одновременно исполняемых запросов (не более 2 параллельно). Другими словами, если у вас на сайте будет куча изображений (даже маленьких), это сильно увеличивает время его загрузки. Поэтому применяют следующую хитрость:
Создают поддомен для хранения фотографий, javascript и другое. Например, если ранее вы грузили фото по адресу /img/foto.jpg, то теперь адрес нужно поменять на img.site.ru/img/foto.jpg. Для браузера это будет другой домен и таким искусственным методом мы ускоряем загрузку.
Примечание
Сейчас довольно модно применять "CSS-спрайт". Смысл следующий: к примеру у нас на сайте есть куча маленьких картинок для фона (я думаю это знакомо каждому). Все эти картинки можно объединить в одно большое изображение, а с помощью CSS "вырезать" нужные куски в нужных местах.
5. Оптимизация CSS и JS
Зачастую в файлах CSS и JS находится множество лишних описаний стилей, скриптов и даже простых пробелов и комментариев. Это дополнительный вес для сайта. От этого можно легко избавиться с помощью сервисов:
Вроде бы такая простая "махинация", а это еще небольшой бонус к уменьшению размера страницы.
6. Правильное расположение CSS и JS
Все файлы .css подключаем в заголовочных тегах head (перед тегом body), все скрипты подключаем в конце страницы. Вообще говоря это не ускорит загрузку страницы, но зато контент перед пользователем начнет появляться раньше, а это в свою очередь мотивирует его подождать, ведь он видит, что сайт грузится.
Примечание
Если вы подгружаете библиотеку AJAX (от Google), то вообще говоря, конечно, грузить с сайта гугла напрямую ее быстрее плюс можно быть почти на 100% уверенным, что в браузере пользователя уже есть ее кэш. Но бывает, что гугл почему не доступен или тормозит загрузку, поэтому чтобы минимизировать этот риск можно прописать следующий код:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
window.jQuery || document.write('<script type="text/javascript" src="js/jquery-1.6.2.min.js"><\/script>');
</script>
Смысл довольно прост. Сначала пытаемся загрузить библиотеку напрямую с ajax.googleapis.com, если это не удается, то грузим со своего сайта копию библиотеки.
Примечание
Если у Вас уникальный случай, что сайт все равно очень тяжелый и грузится долго, то сделайте у себя на сайте "прогресс-бар". Этим вы показываете пользователю, что сайт грузится и нужно лишь чуть-чуть подождать.
- Больше половины посетителей покидают страницу, которая грузится более 3-х секунд;
- Сайт, который грузится 3 секунды, имеет на 25% меньше просмотров, на 50% больше отказов и на 25% меньше конверсии, чем сайт, который грузится 1 секунду;
- Прогресс-бар увеличивает время ожидания загрузки страницы;
- Скорость загрузки напрямую влияет на продажи и на позиции сайта;
Способы ускорить время загрузки страниц сайта
По факту все способы очень просты и чаще всего сводятся к оптимизации веса страницы и грамотной загрузке кода.
В интернете довольно много материала по этой теме. Я постарался изложить все способы компактно и только по делу. Начнем.
1. Включить сжатие gzip
На каждом сайте есть подключаемые файлы css и js. Их можно сжимать на "лету" (при загрузке страницы). Проще говоря мы уменьшаем их вес и тем самым сайт быстрее грузится. Мои файлы в среднем сжимались на 75%. Например, если файл весил 45 кбайт, то после сжатия он стал весить уже 12 кбайт. Итого, экономия 33 КБайта веса на файле с таблицей стилей.
Включить сжатие проще простого. Нужно лишь написать следующие строки кода в файл .htaccess (файл находится в корне сайта):
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
Проверить включено ли сжатие можно на сайтах
Если что-то не получается, то смело пишите вопрос в тех.поддержку хостинга. Зачастую бывает, что у них самих что-то не включено в настройках сервера.
2. Включить кэш браузера
Использования кэша браузера подключается почти как и сжатие gzip добавлением пары строк кода в файл .htaccess:
<IfModule mod_expires.c>
Header append Cache-Control "public"
FileETag MTime Size
ExpiresActive On
ExpiresDefault "access plus 0 minutes"
ExpiresByType image/ico "access plus 1 years"
ExpiresByType text/css "access plus 1 years"
ExpiresByType text/javascript "access plus 1 years"
ExpiresByType image/gif "access plus 1 years"
ExpiresByType image/jpg "access plus 1 years"
ExpiresByType image/jpeg "access plus 1 years"
ExpiresByType image/bmp "access plus 1 years"
ExpiresByType image/png "access plus 1 years"
</IfModule>
Есть только важная проблема, какой срок хранения кэша поставить. Если вы поставите очень большой срок, а файл изменился, то браузер упорно будет грузить то, что у него есть в кэше. Выходом из ситуации может послужить замена имени файла и внесение изменения в шаблон, но разве это удобно? Так что вам стоит подумать и самостоятельно определить как часто вы меняете файлы на сайте.
Мое мнение, что в любом случае, срок 1-7 дней можно всегда поставить.
Это самое простое, что можно было сделать, идем дальше.
3. Оптимизируйте изображения
Использование изображений jpg - для контрастных и gif - где мало количество цветов. Это все аксиомы. Ни в коем случае не использовать лишний раз png или bmp, поскольку оба формата являются совсем не оптимизируемыми.
Уже существующие изображения jpg и png можно легко еще сжать с помощью программ и сервисов. Лично я поискал в интернете сервисы для сжатия изображения. Сравнил результаты, сделал вывод, что онлайн сервис tinypng.com нравится мне больше всех. Иногда ему удается уменьшить изображение даже на 75%, при этом качество остается почти без изменений.
Если сайт использует в качестве фона большое изображение, то его можно очень сильно сжать. Например, мне удалось сжать с 300 Кбайт до 86 Кбайт картинку с задним фоном для одного из сайтов.
4. Подгружать файлы с другого домена
У браузеров есть ограничение на количество одновременно исполняемых запросов (не более 2 параллельно). Другими словами, если у вас на сайте будет куча изображений (даже маленьких), это сильно увеличивает время его загрузки. Поэтому применяют следующую хитрость:
Создают поддомен для хранения фотографий, javascript и другое. Например, если ранее вы грузили фото по адресу /img/foto.jpg, то теперь адрес нужно поменять на img.site.ru/img/foto.jpg. Для браузера это будет другой домен и таким искусственным методом мы ускоряем загрузку.
Примечание
Сейчас довольно модно применять "CSS-спрайт". Смысл следующий: к примеру у нас на сайте есть куча маленьких картинок для фона (я думаю это знакомо каждому). Все эти картинки можно объединить в одно большое изображение, а с помощью CSS "вырезать" нужные куски в нужных местах.
5. Оптимизация CSS и JS
Зачастую в файлах CSS и JS находится множество лишних описаний стилей, скриптов и даже простых пробелов и комментариев. Это дополнительный вес для сайта. От этого можно легко избавиться с помощью сервисов:
Вроде бы такая простая "махинация", а это еще небольшой бонус к уменьшению размера страницы.
6. Правильное расположение CSS и JS
Все файлы .css подключаем в заголовочных тегах head (перед тегом body), все скрипты подключаем в конце страницы. Вообще говоря это не ускорит загрузку страницы, но зато контент перед пользователем начнет появляться раньше, а это в свою очередь мотивирует его подождать, ведь он видит, что сайт грузится.
Примечание
Если вы подгружаете библиотеку AJAX (от Google), то вообще говоря, конечно, грузить с сайта гугла напрямую ее быстрее плюс можно быть почти на 100% уверенным, что в браузере пользователя уже есть ее кэш. Но бывает, что гугл почему не доступен или тормозит загрузку, поэтому чтобы минимизировать этот риск можно прописать следующий код:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
window.jQuery || document.write('<script type="text/javascript" src="js/jquery-1.6.2.min.js"><\/script>');
</script>
Смысл довольно прост. Сначала пытаемся загрузить библиотеку напрямую с ajax.googleapis.com, если это не удается, то грузим со своего сайта копию библиотеки.
Примечание
Если у Вас уникальный случай, что сайт все равно очень тяжелый и грузится долго, то сделайте у себя на сайте "прогресс-бар". Этим вы показываете пользователю, что сайт грузится и нужно лишь чуть-чуть подождать.