• Главная
  • »
  • jQuery
  • »
  • №1 — Как не стоит издеваться над сайтом?

№1 — Как не стоит издеваться над сайтом?

Дата: 03.04.2017 в 19:19, Категория: jQuery
  • 1891
  • 8
№1 — Как не стоит издеваться над сайтом?

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

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

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

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

Начну с сайта joomla-secrets.ru, который в данной статье рассказывает о том, как оптимизировать сайт на Joomla. И давайте заглянем в исходный код этого сайта.

Посмотрели? Все, теперь чистим глаза белизной! И стираем из памяти то, что увидели sudo clear.

И такое тоже никогда не делайте!

Обратимся к WebPageTest и проверим данный сайт.

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

# Как подгружается сайт?

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

Конечно пример «высосан из пальца», но суть думаю ясна. Наш браузер обращается к серверу, который в свою очередь выполняет серверные скрипты и после, выдает браузеру HTML код страницы и уже выполняет отображение элементов страницы.

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

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

# Расставляем все по своим местам

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

<!DOCTYPE html>
<html lang="ru-RU">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>Мой сайт</title>
        <link href="/css/style.min.css" rel="stylesheet">
</head>

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

    <script src="/js/main.min.js"></script>
</body>
</html>

Вы наверное замечали, что на многих сайтах, скрипты вставляют перед тэгом </body>. После загрузки стилей и прочих файлов, браузер подгружает уже скрипты. И это есть хорошо!

# Сжать и асинхроннизировать!

Еще очень важной задачей оптимизации, является сжатие CSS и JS файлов. Для этого, я использую JS Compressor и CSS Compressor.

К примеру, сжав CSS код:

body {
        font-family: 'Roboto Slab';
        font-size: 16px;
        background-color: #F8F8F8;
        color: #323A49;
}

.wrap {
        display: block;
        float: left;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.5s;
}

Получаем такой результат:

body{font-family:'Roboto Slab';font-size:16px;background-color:#F8F8F8;color:#323A49].wrap[display:block;float:left;width:100%;height:100%;opacity:0;transition:opacity .5s}

Просто копируем свой код и вставляем в данные утилиты. Результат сохраняем уже в своем файле. Таким образом размер файла уменьшается в 2-3 раза. А это очень хорошо влияет на загрузку сайта. (P.S.: Не забываем делать резервную копию своих JS и CSS файлов, на всякие пожарные. Желательно к названию сжатого файла добавлять суфикс .min ).

Или при сжатии такого JavaScript кода:

function insertTag(tag,val) {
     var Field = $('.content.article-edit .form-group textarea')[0];
     var val = Field.value;
     var selected_txt = val.substring(Field.selectionStart, Field.selectionEnd);
     var before_txt = val.substring(0, Field.selectionStart);
     var after_txt = val.substring(Field.selectionEnd, val.length);
     if (tag=='list') {
        Field.value = before_txt + '[' + tag + "]\n\t" + selected_txt + "\n[/" + tag + ']' + after_txt;
        return false;
     }
     Field.value = before_txt + '[' + tag + ']' + selected_txt + '[/' + tag + ']' + after_txt;
}

Мы получим такой результат:

function insertTag(t,n){var e=$(".content.article-edit .form-group textarea")[0],n=e.value,i=n.substring(e.selectionStart,e.selectionEnd),l=n.substring(0,e.selectionStart),r=n.substring(e.selectionEnd,n.length);return"list"==t?(e.value=l+"["+t+"]\n"+i+"\n[/"+t+"]"+r,!1):void(e.value=l+"["+t+"]"+i+"[/"+t+"]"+r)}

Так же, не мало важным является асинхронная загрузка JS файлов. Смысл асинхронной загрузки в том, что эти скрипты будут подгружаться после полной загрузки страницы. Для этого, к тэгу <script> добавляем свойство async.

<script async src="/js/main.min.js"></script>

Однако, тут есть и свои минусы:

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

Как я говорил, не пихайте 100500 ссылок на файлы JS и CSS в <head> как на фото выше. Все ваши стили сжимайте и сохраните в CSS файл, так же с JS.

Конечно некоторым разработчикам удобно хранить стили в разных файлах и подгружать каждый там, где им нужно. Но будет глупо делать так же, как делает joomla-secrets.ru. Они подгружают эти все стили в каждой странице:

<link rel="stylesheet" href="/plugins/system/rokbox/assets/styles/rokbox.css" type="text/css" />
<link rel="stylesheet" href="/cache/widgetkit/widgetkit-36de55ca.css" type="text/css" />
<link rel="stylesheet" href="/libraries/gantry/css/grid-responsive.css" type="text/css" />
<link rel="stylesheet" href="/templates/rt_cygnet/css-compiled/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="/templates/rt_cygnet/css-compiled/master-d0afa82797c36263599c814319e96ded.css" type="text/css" />
<link rel="stylesheet" href="/templates/rt_cygnet/css/master-webkit.css" type="text/css" />
<link rel="stylesheet" href="/templates/rt_cygnet/css-compiled/demo-d0afa82797c36263599c814319e96ded.css" type="text/css" />
<link rel="stylesheet" href="/templates/rt_cygnet/css-compiled/mediaqueries.css" type="text/css" />
<link rel="stylesheet" href="/templates/rt_cygnet/css-compiled/grid-flexbox-responsive.css" type="text/css" />
<link rel="stylesheet" href="/templates/rt_cygnet/css-compiled/menu-dropdown-direction.css" type="text/css" />
<link rel="stylesheet" href="/templates/rt_cygnet/css-compiled/animate.css" type="text/css" />
<link rel="stylesheet" href="/templates/rt_cygnet/css-compiled/odometer.css" type="text/css" />
<link rel="stylesheet" href="/templates/rt_cygnet/css-compiled/menu.css" type="text/css" />
<link rel="stylesheet" href="/templates/rt_cygnet/roksprocket/layouts/quotes/themes/default/quotes.css" type="text/css" />
<link rel="stylesheet" href="/templates/rt_cygnet/roksprocket/layouts/features/themes/showcase/showcase.css" type="text/css" />

Можно из этого всего, сделать один CSS файл:

<link rel="stylesheet" href="/plugins/system/rokbox/assets/styles/styles.min.css" type="text/css" />

Вы наверное спросите почему ставят .min.css? Это обычно делают для того, чтобы мы не путались с файлами и знали, какой файл со стилями является сжатым, то есть минимизированным - minzed.

Если объединить все эти файлы в один, то это хорошо повлияет на загрузку сайта. Однако, тут всё зависит еще от того, какой у вас тип протокола HTTP. Если вы используете на своем сервере протокол HTTP/2, то разумно уже делить файлы по частям, а не сохранять все в одну кучу. Вот хорошая статья, в которой объясняется будущее загрузки CSS

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

У меня есть два скрипта: jquery.js и main.js. Библиотека подгружается синхронно, а уже основные скрипты загружаются асинхронно. Это я сделал для того, чтобы прогрузились все скрипты и стили, а потом уже выполнился скрипт для отображения контента сайта.

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

К примеру, код:

<ul>
    <li><a onclick="nav.go('/',event);" href="/">Главная</a></li>
    <li></li>
    <li><a onclick="nav.go('https://archakov.im/about',event);" href="https://archakov.im/about">Обо мне</a></li>
    <li></li>
    <li><a onclick="nav.go('https://archakov.im/about#contacts',event);" href="https://archakov.im/about#contacts">Контакты</a></li>
    <li></li>
    <li><a href="mailto:[email protected]">[email protected]</a></li>
</ul>

Можно сжать в одну строку, удалив оттуда табуляции и переносы строк:

<ul><li><a onclick="nav.go('/',event);" href="/">Главная</a></li><li></li><li><a onclick="nav.go('https://archakov.im/about',event);" href="https://archakov.im/about">Обо мне</a></li><li></li><li><a onclick="nav.go('https://archakov.im/about#contacts',event);" href="https://archakov.im/about#contacts">Контакты</a></li><li></li><li><a href="mailto:[email protected]">[email protected]</a></li></ul>

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