Оптимизация кода сайта — руководство для начинающих Часть 1

0
483
оптимизация кода

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

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

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

Оптимизация кода HTML

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

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

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

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

<html> 
  <head> 
    <link rel="stylesheet" href="mystyle.css">
  </head> 
  <body>
    <div class="prumer">
      Привет, земляни!
    </div>
  </body>
</html>

а файл стилей mystyle.css имеет следующий вид

.prumer {background-color: yellow;}
.textsite {font-size: 14px; color: #000;}
.blogtext {font-size: 16px; color: red;}

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

<html> 
  <head> 
    <style> 
      .prumer {background-color: yellow;} 
    </style> 
    </head> 
  <body> 
    <div class="prumer">
      Привет, земляни! 
    </div> 
  </body> 
</html> 
<link rel="stylesheet" href="mystyle.css">

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

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

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

Нередко бывает так:

Привет,   земляни!<script>// <![CDATA[
var x = 'Привет,   земляни!';
// ]]></script>Привет, земляни! <pre> Привет, земляни! </pre>

Однако, в результате код можно уменьшить до

<html>
<head>
<title>Привет, земляни!</title>
<script> var x = 'Привет,   земляни!';</script>
</head>
<body>
Привет, земляни!
<pre>
      Привет,
        земляни!
</pre>
</body>
</html>

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

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

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

<link rel="dns-prefetch" href="http://mc.yandex.ru"/>
<link rel="dns-prefetch" href="http://www.google-analytics.com"/>

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

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

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

<html>
  <head>
  <base href="http://www.wowit.info/">
  </head>
  <body>
    <a href="http://www.example.com/bar">Анкор </a>
  </body>
</html>

После того как мы удалим домен

<html>
  <head>
  <base href="http://www.example.com/">
  </head>
  <body>
    <a href="bar">Анкор</a>
  </body>
</html>

Оптимизация кода CSS

Оптимизация кода CSS

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

Данное деянье позволяет убавить нужное количество HTTP запросов при загрузке страницы.
В особенности важно:

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

Вид, до

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/mystyle1.css">
    <link rel="stylesheet" type="text/css" href="css/mystyle2.css">
    <link rel="stylesheet" type="text/css" href="css/mystyle3.css">
</head>
  <body>
    <div class="blue yellow big bold">
      Привет, земляни!
    </div>
  </body>
</html>

После

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles/allmystyle.css">
  </head>
  <body>
    <div class="blue yellow big bold">
     <pre>Привет, земляни!</pre>
    </div>
  </body>
</html>

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

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

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

К примеру,

<style>
      body { background-image: url("fon.png"); }
      /* Этот комментарий будет лишним */
      #iddy, .anotherId {
        border: solid 1px #cccccc;
        padding: 1.5em;
        float: left;
        color:##ff0000;
      }
    </style>

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

<style>body{background-image:url(("fon.png"}#iddy,#anotherId{border:solid 1px #ccc;padding:1.5em;float:left;color:red}</style>

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

Следите за нашими статьями и узнавайте больше !

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...