Скорость загрузки страницы - важный фактор для пользователей и поисковых систем. Чем дольше грузится страница тем меньше у вас будет посещений!
Пусть мы живем в век быстрого интернета и смотрим видео онлайн, но все же я решил написать эту статью и дать советы по повышению скорости загрузки страничек сайта.
Любой поисковик хочет, чтобы сайты, которые выдаются в поисковой выдаче были не только полезные, но и быстро грузились. Быстрый ресурс позволяет обслужить большее количество пользователей уменьшить количество отказов (тех, кто не дождался полной загрузки сайта и закрыл страницу). Трудно спорить с тем, что каждый хочет получить ответ на свой вопрос и при том БЫСТРО.
Сейчас приведу немного статистики. По результатам экспериментов в буржуйнете было установлено, что если увеличить время загрузки сайта со 100мс до 400мс, то количество поисков для каждого пользователя уменьшится примерно на пол процента. А это очень невыгодно!
Советы по увеличению скорости сайта
1. Активизация GZIP
GZIP - замечательная технология, которая позволяет сократить вес передаваемых страниц за счет их сжатия. При каждом обращении клиента к серверу сервер сжимает исходную страницу для более быстрой загрузки. Активизация GZIP, конечно будет сильней нагружать сервер с, одной стороны, но, с другой стороны, страницы будут передаваться быстрей. Для активации этой функции нужно прописать в файл .htaccess код:
Большая часть сайтов в интернете имеет одинаковую структуру на всех страницах. Это шапка сайта с логотипом, левое и/или правое меню и футер с авторскими правами. А теперь представьте, что пользователь начал читать ваш сайт и переходить от одной страницы к другой. Каждый грузится целая страница с теми же блоками, что были на предыдущей странице и пользователь ждет, ждет, ждет пока же все загрузится. Вместо этого лучше было бы закэшировать или сохранить неизменяемые блоки и значительно увеличить скорость сайта - ведь теперь будут загружаться только новые элементы, а старые будут браться их кэша браузера. Для включения кэширвоания браузера добавьте в файл .htaccess код:
1
2
3
4
5
6
<IfModule mod_expires.c>ExpiresActive On <FilesMatch "\.(jpg|jpeg|png|gif|svg)$"> ExpiresDefault "access plus 1 month" </FilesMatch></IfModule>
3. Минимизация кода
Зачастую код, который содержится в html-страницах, javaScript файлах, в стилях CSS содержит комментарии, переносы строк, лишние пробелы, а все это замедляет загрузку страниц. Для быстрого удаления лишних символов существуют специальные сервисы по минимизации кода. Ссылка на один из таких сервисов тут.
Из такого кода:
1
2
3
4
5
6
7
/* Список */.content_ul{margin-top:10px;padding-left:35px;list-style:none;min-height:600px;}
Можно получить всего одну строку:
1
/* Список */.content_ul{margin-top:10px;padding-left:35px;list-style:none;min-height:600px;}
Для больших документов исходный размер и минифицированный будут на порядок отличаться.
4. Слияние файлов CSS и JavaScript
В таком случае не предется дергать сервер несколько раз для загрузки каждого файла по-отдельности. Будет достаточно сделать всего один HTTP-запрос.
5. Удаление неиспользуемых компонентов
Если вы не используете какие-либо элементы, то вы не должны их загружать. Ничего трудного: используете - загружаете, не используете - не загружаете.
6. Оптимизация изображений
Если у вас на сайте есть много графических элементов небольшого размера, то было бы логичней уменьшит их размер на сервере. Нет смысла загружать картинку размером 1200 на 1200 пикселей и вывести ее в блок 50 на 50 пикселей. Для изображений предпочтительно использовать два формата: JPG и PNG.
7. Использование спрайтов для показа изображений.
Спрайты позволят сократить количество запросов к серверу и, соответственно, увеличить скорость загрузки вашей странички. Пример кода для вывода спрайта:
Часто бывает, что необходимо воспользоваться редиректом, не нужно этого бояться. Но, если использовать переадресации необоснованно и повсюду, то вы увеличите нагрузку на сервер и заставите ждать пользователя пока браузер пройдется по всем адресам страниц в переадресации. Итого: каждая переадресация добавляет задержку, поэтому использовать их надо с осторожностью.
9. Замена JavaScript на CSS 3.0
Несколько лет назад было нормальным использовать код:
1
2
$(«#id»).fade()$(«#id»).slideDown()
Но сейчас, когда появилась такая чудесная технология как CSS 3.0, можно обойтись и меньшей кровью :)
10. Удаление ненужных скриптов
Конечно здорово использовать на сайте десяток навороченных шрифтов, но это имеет свои минусы. Во-первых, шрифты нужно грузить на устройство клиента, а во-вторых обилие разных шрифтов (более 3х-4х) на сайте - это перебор. Не стоит грузить шрифт в 200кб-300кб ради одной красивой надписи.
Применяйте данные советы на практике и ваши странички будут грузиться на много быстрее!
Если статья была для Вас полезной - Поделитесь ссылкой!
Тоже в одно время основательно занималась увеличением скорости. Использовала связку W3 Total Cache & Autoptimize. Получила хорошие показатели выше 90 на GTmetrix и PageSpeed, но потом установила MaxCache, и сейчас сервисы уже не показывают те результаты =(
Рисую себе новый шаблон, который не перегружен лишними элементами, и там заново смотреть все буду
Комментарии (1)