Гід по оптимізації веб-сторінок та додатків

10 хв. читання

Коли справа доходить до продуктивності, ми не маємо права примушувати користувачів чекати і залишити веб-сторінку з негативними враженнями. Оптимізація є основою професійного створення сайту.

Що визначає швидкість сторінки? Можна виділити наступні пункти:

  • DNS;

  • SSL (якщо є);

  • HTTP;

  • DOM;

  • HTML;

  • CSS;

  • JavaScript.

Кожен пункт - це час, що витрачається на отримання, виконання і візуалізацію вмісту, час, між натисканням клавіші і відображенням сторінки.

Загальні положення

Перебір з плагінами - погана практика

Плагіни - крута штука, якщо ви використовуєте CMS! Вони допомагають з аналітикою, пошуковою оптимізацією і купою інших прикольних речей, але теж мають недоліки.

Чим більше плагінів використовується, тим повільніше ваш ресурс, особливо, якщо плагін не оптимізовано.

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

Мінімізуйте кількість HTTP-запитів

HTTP-запити - запити передачі даних, так що чим більше запитів, тим більше часу потрібно для відображення Вашої сторінки.

Основні способи зменшення кількості HTTP-запитів:

  • Об'єднуйте файли стилів і скриптів, щоб зменшити кількість файлів;

  • Використовуйте CSS замість зображення, коли це можливо;

  • Поєднуйте вбудовані зображення в таблицях стилів, щоб уникнути збільшення розмірів сторінки;

  • Використовуйте кешування.

Мініфікація

Кожну веб-сторінку структуровано так, щоб її можна було легко прочитати, але це, на жаль, додає ваги і, в кінцевому рахунку, негативно впливає на час завантаження.

Мініфікація(мінімізація) - ефективне рішення цієї проблеми. Код считується, стискається і подається у швидший і витонченіший спосіб. Тож, по можливості мінімізуйте HTML, CSS і JavaScript, це гарне спосіб збереження часу користувачів.

Зменшіть кількість перенаправлень

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

Зображення

Оберіть правильний формат файлу

Деякі формати можуть містити в собі велику кількість непотрібної інформації.

Наприклад, JPEG може мати Exif-метадані з камери: дату, модель, місце і тд.

Найбільш поширені формати файлів:

Для більшості сайтів, PNG є ідеальним рішенням, це формат, який можна стискати без втрати, який використовується для ілюстрацій, тексту, графіки і логотипів.

JPG - це формат, який втрачає якість при стисненні, тому ви повинні користуватися його тільки при необхідності, наприклад, для фотографій.

Стиснення зображень

Це корисний інструмент для пришвидшення завантаження зображень і всієї сторінки загалом. Є 2 типи стиснення:без втрати якості (losseless) ( і з втратами (lossy).

Ось деякі корисні інструменти для стиснення зображень:

Онлайн:

Настільні рішення:

Не масштабуйте зображення в розмітці

Заздалегідь визначте розміри вашого зображення, наприклад:

    <img src="logo.jpg">

Це зберігає оригінальний розмір зображення і, в кінцевому рахунку, зменшує час завантаження.

Використовуйте іконкові шрифти

Іконкові шрифти - вірний спосіб зменшити число http-запитів, що надійшли з сервера до кінцевого користувача, так як вони складаються з одного файлу, плюс

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

Data URI

Data URI - це техніка для вбудованого в CSS контенту. так ми отримуємо один http-запит, а не кілька, наприклад:

    .icon-foobar {
        background-image: url('foo.png');
    }

Потрібно буде виконати два запити, один для CSS-файлу, а інший для зображення, з data URI це виглядатиме так:

    .icon-foobar {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII%3D');
    }

Однак, краще не використовувати цей метод, якщо ви не стискаєте CSS файл.

HTML

Стилі на верх, скрипти внизу

Таблиці стилів - це структура будь-якої веб-сторінки, без CSS сайти будуть виглядати як-то пережиток 1990-х сайтів, тому дуже важливо, щоб місце CSS у верхній частині кодe, так сторінка завантажується швидше.

        <meta charset="UTF-8">
        <title>CDNify</title>
        
        <link href=""style.css"" media="all" rel="stylesheet">

Помістіть скрипти в нижній частині:

        <script src="script.js"></script>

Не нагромаджувайте весь CSS в одному місці

Ви можете включати CSS або JavaScript на сторінку з допомогою трьох різних технік:

  1. Вбудування (Inline): CSS визначається всередині атрибута стилю, а JavaScript - атрибута onclick.

  2. Вставка (Embedded): CSS визначається всередині <style> тегів, а JavaScript всередині тегів <script>.

  3. Зовнішнє підключення (External): CSS завантажується з <link> тегів, а JavaScript з src атрибута тегу <script>.

Перший та другий методи збільшують розмір вашого HTML документа, але, в свою чергу, скорочують кількість запитів на зовнішні файли, так що якщо у вас є сторінка, яку користувачі відвідують лише одного разу, то ця опція допоможе зменшити число запитів. Альтернативою цим технікам є розміщення стилів і скриптів в зовнішніх файлах, таким чином, Ви можете покращити структуру вашого коду, а браузер матиме змогу кешувати окремі файли у разі необхідності.

Асинхронність

При звичайному завантаженні, браузеру потрібно дочекатися, поки скрипт буде повністю завантажено і виконано, весь цей час користувач чекає.

    <script src="script.js"></script>

Async - це споіб отримання даних не послідовним чином, тобто користувачі можуть вільно досліджувати інші елементи в той час як вони чекають.

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

CSS

Об'єднуйте декілька файлів зі стилями

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

    <link rel="stylesheet" href="structure.css" media="all">
    <link rel="stylesheet" href="campaign.css" media="all">
    <link rel="stylesheet" href="layout.css" media="all">

Але цей метод вимагає зайвих http-запитів для кожного. Запобігти цьому можна, об'єднавши кінцеві файли стилів в один документ.

    <link rel="stylesheet" href="main.css" media="all">

Цей процес легко автоматизувати за допомогою систем побудови.

Автоматизована система побудови

Frontend build system - це спосіб автоматизувати завдання, наприклад, мінімізації файлів, оптимізації зображень, складання CSS і тд.

Існує безліч автоматизованих інструментів:

  • Gulp: Потокове складання системи

  • Grunt: CMD інструмент для складання

  • Bower: Frontend управління пакетами

  • Yeoman: стек на стороні клієнта

Використовуйте link, а не @import

Ви можете під'єднати зовнішню таблицю стилів двома способами, за допомогою тега link:

    link rel="stylesheet" href="style.css"

Або директиви @import:

    @import url('style.css');

@Import \- не дозволяє браузеру завантажити активи одночасно, тому краще використовувати тег <link>.

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

Код повинен бути легко читаним і підтримуваним за допомогою правильної структури, як відступи і коментарі, щоб пояснити, що відбувається.

    /* --- Nav Bar --- */
    
    .header {
      height: 350px;
      width: 950px;
      margin: 0 auto;
    }
    
    /* --- Footer --- */
    
    .footer {
      height: 450px;
      width: 950px;
      margin: 0 auto;
    }

Однак браузер ця інформація не потрібна, тому дуже важливо не забувати зменшувати розмір файлу.

    .header{height: 350px;width: 950px;margin: 0 auto;}.footer{height: 450px;width: 950px;margin:0 auto;}

Використовуйте мініфікацію, щоб зменшити об'єм коду та прискорити час завантаження, парсингу і виконання.

JavaScript

Уникайте маніпуляцій з DOM

Доступ до DOM є трудомістким, так як вимагає роботи з кодом, так, наприклад, ви можете захотіти оновити:

    <div id="container"></div>

З JS:

    <script>
      var container = document.getElementById("container");
      container.innerHTML = "Foo Bar";
    </script>

Потім виглядатиме так:

    <div id="container">Foo Bar</div>

Спробуйте оптимізувати DOM маніпуляції. Наприклад, якщо ви звертаєтесь до DOM через цикл, зробіть це один раз і збережіть результат в змінній, таким чином, ви збережете доступ до DOM без уповільнення роботи браузера.

Мінімізуйте перекомпонування

Якщо необхідно внести зміни, робіть все відразу, таким чином, браузеру не буде потрібно повторно візуалізуватиї об'єкти.

Використовуйте 3rd party контент асинхронно

Краще завжди завантажуйте 3rd party контент асинхронно, таким чином, вся сторінка не буде очікувати завантаження певного елементу.

    var script = document.createElement('script'),
    scripts = document.getElementsByTagName('script')[0];
    script.async = true;
    script.src = url;
    scripts.parentNode.insertBefore(script, scripts);

Якщо у вас є кілька сценаріїв, які ви хочете завантажити асинхронно використовуйте:

    (function() {
        var script,
        scripts = document.getElementsByTagName('script')[0];
        function load(url) {
            script = document.createElement('script');
            script.async = true;
            script.src = url;
            scripts.parentNode.insertBefore(script, scripts);
        }
        load('//web.archive.org/web/20230529210849/https://apis.google.com/js/plusone.js');
        load('//web.archive.org/web/20230529210849/https://platform.twitter.com/widgets.js');
        load('//web.archive.org/web/20230529210849/https://s.thirdpartywidget.com/widget.js');
    }());

Мінімізуйте ваш JavaScript

До:

    MyJavaScript.app = function() {
    
      var foo = true;
    
      return {
        bar: function() {
          // stuff happens
        }
      };
    
    };

Після:

    MyJavaScript.app=function(){var a=!0;return{bar:function(){}}}

Об'єднуйте файли

    <script src="navbar.js"></script>
    <script src="component.js"></script>
    <script src="page.js"></script>
    <script src="framework.js"></script>
    <script src="plugin.js"></script>
 
    
    <script src="main.js"></script>

jQuery

Про всі подробиці правильного використання jQuery ви можете дізнатися з цієї статті.

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 1.6K
Приєднався: 1 рік тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід