Оптимизация кода сайта
Магазин запчастей CoolCar:шины аккумуляторы, аксессуары, инструмент и многое другое
Магазин запчастей CoolCar:шины аккумуляторы, аксессуары, инструмент и многое другое
0

Оптимизация кода сайта для начинающих

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Оптимизация кода сайта — базовое руководство

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

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

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

Оптимизация HTML

Сжатие пробелов

С помощью объединения повторяющихся пробелов и переносов строк можно уменьшить итоговый размер страницы и, соответственно, уменьшить время на итоговую загрузку страницы. Данный метод нельзя на прямую использовать для следующих тегов: <pre>, <textarea>, <script> и <style>.

Пример, часто бывает так

Но, в итоге код можно уменьшить до

Уменьшение объема контента в верхней части кода страницы

Для достижение максимальной скорости загрузки страницы в верхней части html кода нужно использовать, только тот контент (JavaScript, CSS), который необходим для загрузки первого экрана. Весь остальной код, желательно разместить в нижней части страницы. Ко всему этому, нужные блоки CSS и JavaScript можно встроить прямо в html код страницы.

Пример, такой оптимизации

Если документ HTML выглядит следующим образом:

а файл стилей small.css имеет вид

то нужный код CSS встроить можно таким образом:

В итоге файл small.css будет подгружаться после загрузки страницы.

Предварительный резолвинг DNS

С помощью данной оптимизиции вы можете сообщить браузеру по каким адресам могут находятся внешние ресурсы на данной странице (например, картинки, файлы стилей, javascript). Это позволяет сразу выполнять преобразование DNS имён.

Например, таким образом можно ускорить загрузку для систем аналитики

Удаление домена из URL в атрибутах href и src

Можно сократить код сайта путем преобразования абсолютных URL в относительные для атрибутов href и src.

Это выглядит следующим образом: до удаление домена

После удаление домена

Оптимизация CSS

Объединение всех CSS в один файл

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

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

Пример, до

После

Минимизация CSS

Минимизация файлов стилей состоит в следующем:

  • удаление всех комментариев;
  • удаление пробелов;
  • сокращение название цветов.

Например,

Можно сжать до

Перемещение CSS в секцию HEAD

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

Пример,

После

Перемещение файлов со стилями CSS перед JavaScript скриптами

Данное дейстивие позволит

  • лучше распаралеллелить скачивание CSS и JacaScript-файлов
  • увеличить скорость рендеринга страницы

Перенос небольших описаний стилей в HTML

Перенос небольших описаний стилей до 1КБ может помочь вам сократить число запросов к серверу.

Оптимизация JavaScript

Объединение всех JavaScript в один файл

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

Минимизация JavaScript

Минимизация JavaScript позволяет убрать лишние символы из исходного файла и специальными способами уменьшить размер кода (например, замена длинных переменных на более короткие).

Например, можно сделать с помощью этого сервиса: http://developer.yahoo.com/yui/compressor/.

Оптимизация изображений

Отложенная загрузка изображений

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

  • значительно сократить объемы первоначально загружаемой информации
  • сократить нагрузку на сервер

Комбинирование изображений

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

Сервисы для проверки оптимизация вашего сайта

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

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


admin