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

Как ускорить скорость загрузки сайта

Уменьшить количество подключаемых стилей и подключайте их в самом начале

Точнее, в Header’e страницы. Так её элементы будут загружаться последовательно, от заголовка до футера. Что это даст? Конечно же, удобство работы с сайтом для пользователя и повышение его лояльности. При подключении CSS в самом низу браузеры отказываются от постепенной подгрузки элементов. Поэтому, страница должна обращаться к файлу CSS уже в теге head.

Уменьшить количество подключаемых стилей и подключайте их в самом начале

JavaSritp – в подвал страницы

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

Очень желательно также обьединять библиотеки в один файл (конкатинация) и минимизировать его.

JavaSritp – в подвал страницы

Так выглядит код минифицированного скрипта

JavaSritp – в подвал страницы

 

Используйте поддомены

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

Используйте поддомены

 

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

Большую часть времени загружаются различные скрипты, CSS файлы, фото и flash. Желательно, чтобы браузеры подгружали максимум 2 элемента страницы с 1-го хоста. В итоге получается, что, чем их меньше, тем меньше запросов к серверу. Современные браузеры по умолчанию загружають одновременно не более 8 потоков.

Однако внешний вид сайта менять из-за этого не нужно. Есть и другие пути.

  • Inline-графика. Встраивая её в CSS, а не в саму страницу, вы получите уменьшенное количество запросов к серверу, причём размер страниц не увеличится.
  • Применение CSS-спрайтов. Их суть заключается в том, что вместо нескольких мелких изображений загружается одно, но большое. С помощью CSS кода оно разделяется на более мелкие картинки. Так, например, можно обработать несколько стоящих подряд кнопок, объединив их в одно изображение. Чем меньше загрузок изображений, тем меньше HTTP-запросов.
  • Несколько файлов в одном. Если в шаблоне применяется больше одного css или js файла, целесообразно сделать из них один файл.

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

Минифицируйте (сожмите) все JS и CSS файлы и почистите от лишнего кода

Уберите закомментированные строки, лишние пробелы, табуляцию. Эти несущественные мелочи добавляют веса вашим файлам и, следовательно, увеличивают их объём. Для сжатия кода используются специальные сервисы, так что нет необходимости править всё вручную.
Я использую для этих целей gulp, который все делает без ошибок, автоматически и очень быстро. У моих клиентов на верстку всегда все отлично;)

Минифицируйте (сожмите) все JS и CSS файлы и почистите от лишнего кода

Не уменьшайте картинку кодом

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

Применяйте CDN для фреймворков

Когда на ресурсе задействованы фреймворки, (такие как jQuery), то для них целесообразно применять CDN (Content Delivery Network) – скопление серверов, которые разделены географически с целью обеспечения максимальной скорости предоставления данных клиенту.

Сервер для передачи контента выбирается исходя из различных критериев, например, времени отклика. В качестве CDN можно пользоваться Google API и Хостингом JavaScript-библиотек от Яндекса.

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

Если вы активно используете подключение JS и CSS скриптов, то вам жизненно необходимо подключить кэш. При первом заходе на сайт браузер пользователя подгружает все коды из файлов, а также графические и flash компоненты. Если настроен HTTP-заголовок Expires, то при повторных заходах посетителя его браузер будет хранить все эти данные, и страницы будут загружаться быстрее.

Оптимизированные картинки

Правильно выбирайте формат для изображений, иначе их размер может увеличиться. Так, в Gif формате лучше сохранять картинки с несколькими цветами, а в JPEG – сложную многоцветрую графику (например, фото). PNG используется, когда необходимо хорошее качество картинки и прозрачный фон.

Чтобы сжать картинку в Фотошоп, жмите одновременно «Alt+Shift+CTRL+S» (только не сломайте пальцы), и выбирайте оптимальное соотношение размер/качество.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

четырнадцать + 10 =