Втрата ваги для веб-сайтів Блог Grafik Marketing Agency
Одна з моїх улюблених цитат, що стосуються розробки, дуже близька до однієї з моїх улюблених цитат, що стосуються дизайну:
“Код, який ви пишете, робить вас програмістом. Видалений код робить вас хорошим. Код, який вам не потрібно писати, робить вас чудовим кодом ". - Маріо Фуско
"Дизайнер знає, що вони досягли досконалості не тоді, коли вже нічого не можна додати, а коли вже нічого не забрати". - Антуан де Сент-Екзюпері
Вони обидва виступають за філософію "менше - це більше", і добре нагадують, що за витонченими дизайнами знакових інтерфейсів від Apple, Uber та Google стоять високооптимізовані стеки технологій, призначені для швидкого отримання потрібної інформації потрібним людям. Ось декілька областей, які слід враховувати, прагнучи досягти більш елегантного UX:
Відношення тексту до коду
Коли пошукова машина сканує сторінку для пошуку вмісту, вона повинна відсортувати більше інформації, ніж на перший погляд. Це включає всю структуру, стилі, поведінку та візуальні ефекти, які збирає ваш браузер, що призводить до красиво організованого веб-досвіду. Захоплення тут полягає в тому, що деякі симпатичніші, вражаючі ефекти, які може використовувати сайт для захоплення аудиторії, зазвичай вимагають набагато більше коду. Це впливає на один з мало обговорюваних факторів продуктивності сторінки, який називається "співвідношення тексту до коду". Ця метрика вимірює, скільки вмісту, що читається людиною, існує в блоці коду.
Незважаючи на те, що це не впливає безпосередньо на рейтинг сторінок у пошукових системах, воно вважається ключовим показником можливостей, де можна покращити ефективність сторінки. Google рекомендує співвідношення тексту та коду від 20% до 70% на сторінці. Хоча на перший погляд це може здатися легкою метою для досягнення, уважніший огляд вашого технологічного стеку може виявити велику кількість непотрібної складності, а також те, що ваші сторінки можуть працювати ефективніше за допомогою правильних типів налаштувань. Тут дизайнерам і розробникам потрібно співпрацювати, щоб з’ясувати, чи ці ефекти мають сенс, враховуючи цілі ключових зацікавлених сторін.
Як стилі впливають на ефективність
Хоча вбудовані стилі в деяких випадках можуть заощадити час на впровадження, вони також є одними з найбільших порушників, коли співвідношення тексту та коду починає падати. Як розробники, ми, мабуть, усі робили це в певний момент своєї кар’єри, і в деяких випадках цього не уникнути. Незалежно від того, включені вони між тегами стилю або як правила, вставлені в атрибут стилю елемента, важливо максимально звести ці випадки до мінімуму.
У цьому практичному прикладі я покажу вам, як покращити свій коефіцієнт більш ніж на 10% за дуже незначні зусилля.
До:
Якщо нам знадобиться трохи часу на роботу з дизайнером, щоб створити стилі багаторазового використання, які можна автоматично застосовувати, використовуючи таблицю стилів багаторазового використання, зручну для кешування, ми можемо почати бачити деякі вдосконалення.
Після:
У нашому CSS-файлі ми маємо такі правила:
| Раніше | Після |
| Довжина сировини: 521 символ Довжина лише тексту: 95 символів Остаточне співвідношення: 18,23% вмісту | Довжина сировини: 318 символів Довжина лише тексту: 95 символів Остаточне співвідношення: 29,87% вмісту |
Наш перший приклад не відповідав рекомендованому мінімальному співвідношенню тексту та коду на 20%. Однак, лише декілька коригувань того, як ми застосовуємо ці стилі, призвели до покращення співвідношення більш ніж на 11%. Хоча Google не буде надавати перевагу одному над іншим, цілком зрозуміло, що другий приклад набагато чистіший, упорядкованіший, а оскільки задіяно менше символів, швидше надходить до браузера користувача.