4 Поради щодо покращення ефективності вашої сторінки

Sep 16, 2025

Як

Web-performance expert Henri Helvetica sitting with his laptop

Аналітик веб-продуктивності Henri Helvetica буде обмінюватися своїми порадами щодо того, як підвищити продуктивність вашого сайту Генерувати Нью-Йорк 2018. Отримайте квиток зараз .

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

На щастя, фріланс розробник та веб-аналітик Henri Helvetica (справжнє ім'я Henri Brizard), під рукою, щоб запропонувати свої найвищі поради щодо продуктивності вашого сайту.

01. Намагається виміряти

Helvetica пропонує, що перш за все, ви повинні забезпечити вимірювання. "Ви ніколи не можете покращити те, що ви не вимірюєте", - пояснює він. "Як тільки ви маєте свої вимірювання та дані, викладені, ви повинні з'ясувати, які важливі елементи для вимірювання. Ви могли б мати дві сторінки, які завантажують дев'ять секунд, але у вас може бути більш швидкий вигляд, тому у вас є кращий досвід користувачів.

"Ви повинні виміряти те, що важливо в процесі завантаження для вашого сайту та вашого комерційного підприємства. Подумайте про те, що важливо для взаємодії з вашими користувачами. Кожен сайт має свої потреби."

Одного разу він подивився на завантаження сторінки, яка допомагає йому підібрати, як і коли певні елементи завантажуються, наступний крок Helvetica, як правило, засуджує хром DevTools, щоб точно оцінити те, що відбувається. Це очевидний вибір, тому що це тут, і це безкоштовно - вам не потрібно стрибати в інший інструмент, щоб спробувати виявити, чому сторінка може бути повільною. Проте багато розробників ледве використовують це. "DevTools трохи схожий на детектор диму", - стверджує Гельветика. - Якщо є вогонь, DevTools розповість вам. Це, принаймні, покаже вам, де є дим.

02. Втратити вагу сторінки

Тоді Гельветика дивиться на водоспад, який вказує на різні проблеми, такі як розмір активу та затримку, яка була залучена до його завантаження. Якщо сайт містить погано розміщені зображення, наприклад, ви зазвичай бачите дуже довгий водоспад, який є одним з простіших точок болю, щоб швидко забрати. Зображення є одним з найбільших винуватців для Slow-Loading Site - це питання, яке можна легко виправити. Оскільки вони найбільше джерело даних, зображення також є найбільшим джерелом заощаджень даних.

"Я завжди враховував вашу вагу сторінки", - пояснює Гельветську. "Незалежно від того, як ви його нарізаєте, якщо у вас є одне зображення, яке 3 Мб, або навіть три зображення на 1 Мб кожен, ви, ймовірно, матимете виклик користувачів.

Web-performance expert Henri Helvetica coding on his laptop

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

Гельветика також рекомендує ледачі навантаження, техніку, яка затримує завантаження об'єкта, поки не буде потрібно. "Не всі користувачі збираються зробити його в нижній частині сторінки", - попереджає він. "Нерідко ви можете завантажувати активи, які ніколи не будуть бачити. Використання ледачого навантаження буде дуже корисним, оскільки ви зберігаєте дані, а також каналізацію акумулятора або управління пам'яттю. Якщо ви не завантажите зображення, ви не будете мати будь-яку пам'ять USURP на пристрої. "

03. Подивіться, як ви складаєте

Інша причина Helvetica Favors DevTools - це те, що зараз він також надає показники, як перша фарба (час, необхідна для користувача, щоб побачити перший піксель вмісту), а перша змішана фарба (час, необхідний для основного вмісту сторінки, щоб стати видимим ).

Тоді є фільм (або в DevTools, або Web-панелі інструментів), який показує додаткові скріншоти браузера, що надає сайт, тому ви можете побачити, яка сторінка виглядає, коли вона завантажує. Вивчаючи їх, ви можете з'ясувати, які активи були завантажені, коли і перегляньте способи завантаження деяких з них на більш ранній час у часовій шкалі.

У веб-сторінці WebPagetest - яка хелветика хвалить для його натхненного рівня деталізації - ви також можете експортувати відео з навантаження та порівнювати фільм з конкурентом. "Як тільки ви підключите крапки, ви можете вивчити, як покращити досвід користувача, приводячи ці активи у вигляд, швидше", - пояснює Гельветик.

04. Розріжте безлад

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

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

"Переконайтеся, що ви зберігаєте свої SVGS як максимально складно," Helvetica пропонує при прикладі. - Тоді ви матимете менше коду, коли ви надаєте SVG. Я чую це від розробників весь час. Вони отримають SVG від дизайнерів і повинні відправити його назад, тому що це вплине на виконання. "

Ця стаття була опублікована у випуску 303 чистих, найпопулярніших журналів у світі для веб-дизайнерів та розробників. Купувати випуск 303 або Підписатися на мережу .

Хочете більше розуміти супчуть швидкість вашого сайту?

Henri Helvetica is giving his talk Planet of the APIs: A Tale of Performance & User Experience at Generate New York from 25 - 27 April 2018 — Henri Helvetica дає свою розмову планету API: казка про продуктивність & amp; Досвід користувачів у Generate New York від 25 - 27 квітня 2018 року

Якщо ви зацікавлені в забезпеченні ваших сторінок завантажувати блискавку швидко, переконайтеся, що ви захопите квиток Генерувати Нью-Йорк . Henri Helvetica буде спричинена сучасними та навіть експериментальними практиками, що використовуються у вимірюванні веб-додатків, та надання досвіду-досвіду, а також пропонуючи більше розуміння вимірювань, таких як перша фарба, значуща фарба та час для інтерактивного.

Створити Нью-Йорк відбувається з 25-27 квітня 2018 року. Отримайте квиток зараз .

Пов'язані статті:

7 Поради щодо експертів для забивання веб-виконавців
3 Top Інструменти для тестування веб-ефективності
Чому веб-продуктивність має відчувати себе швидко

4 Поради щодо покращення ефективності вашої сторінки

01. Намагається виміряти

02. Втратити вагу сторінки

03. Подивіться, як ви складаєте

04. Розріжте безлад

Хочете більше розуміти супчуть швидкість вашого сайту?

Як - Найпопулярніші статті

Як намалювати кішку

Як повернути день у ніч у Photoshop

Як зробити та використовувати Mahlstick для малювання

10 порад для освоєння фотографій Apple

Зберігайте ідеальний контроль версії з абстрактним

Створення якісних цифрових копій вашого мистецтва

Створіть ігрове середовище в нереальному двигуні 4

Створіть ігрові текстури, використовуючи художник речовини

Категорії