Дієтичні сайти
Сьогодні ми оптимізуємо час завантаження вашого сайту за допомогою невеликої дієти. Щороку публікуються певні статистичні дані про стан сайтів у всьому світі. В останні роки ви легко можете помітити тенденцію збільшення розміру веб-сторінки. Ну, я розумію, що швидкості, які ми маємо, значно зросли (швидкість 100 Мб/с вже досить поширена у багатьох великих містах і не тільки), вони також вдосконалили плани трафіку від компаній мобільних телефонів (дещо, соромно, що на ринку є плани розміром 250 Мб - я заробив би принаймні 1 Гб). Але чи просунулись вони настільки, що знехтували розміром веб-сторінки?
Якщо ви розробник, адміністратор або просто маєте щоденник, який пишете з гордістю, продовжуйте читати.
Це справді так погано?
Давайте побачимо, згідно з протоколом архіву HTTP, наскільки збільшився середній розмір веб-сторінки наприкінці кожного року з 2012 по 2015 рік. Розмір веб-сторінки порівняно з попереднім роком збільшився на: 30% у 2012 році, 32% у 2013 році, 15% у 2014 році та 16% у 2015 році. Таким чином, на кінець 2015 року веб-сторінка мала в середньому 2262 Кб. Звичайно, ця цифра може сильно відрізнятися (наша головна сторінка трохи більше 700 кб).
Звичайно, тихо переглядаючи сторінку з передплатою x сотень мб/с, ви, мабуть, смієтесь над 2,2 Мб веб-сторінки. Але поки ви зітхнете з полегшенням, оскільки в Румунії ми все ще маємо досить швидку мережу, майте на увазі наступні ідеї:
-ми живемо не за ідеальним сценарієм, і бувають затримки (кожному відвідувачеві було б щось розсипати 1 мс із хостом вашого сайту, правда?);
-люди стають дедалі нетерплячішими, і у випадку з Інтернет-торгівлею вони можуть втратити гроші через тривалий час завантаження;
-все більше і більше користувачів смартфонів. Якщо вони спробують отримати доступ до мережі із кафе з втомленим і перевантаженим маршрутизатором, вони матимуть низьку швидкість або користуватимуться Інтернетом, що пропонується телефонними мережами (що часто не є великим і має обмеження трафіку);
-Telekom все ще має мережу ADSL, що працює в реальному часі, зі швидкістю 12 Мбіт/с. І передплатників досить, на жаль.
-час завантаження (на який впливає розмір сторінки, це було логічно, чи не так?) також впливає на швидкість, з якою Google індексує та відображає ваш сайт. Google надає перевагу швидким сайтам. - SEO підвищення. Крім цього, Google безпосередньо карає сайти, які важко завантажуються на мобільних пристроях.
І ... як і слід було очікувати, більшість сторінок мають величезні розміри через погано відображаються або неоптимізовані зображення та зображення. Досить сайтів, що мають сторінки розміром від 6 Мб або більше. Навіть купу! Увага, я кажу веб-сайти, не Інтернет-магазини, де можна було б очікувати, що сторінка з 12 товарами + іншими елементами займе трохи місця.
Отже, від кожного сайту залежить, наскільки серйозною є ця проблема. В основному, я обговорю методи оптимізації зображень, бо саме звідси найбільша втрата ваги сторінок.
І що ми робимо зараз?
Перш за все, з’ясуйте, як у вас справи. Ви використовуєте такий веб-сайт, як http://tools.pingdom.com/fpt/, який аналізує бажану сторінку та повідомляє, скільки запитів відвідувач робить до сервера, час завантаження та розмір сторінки. Моя порада полягає в тому, щоб намагатися залишатись на рівні 1-2 Мб для сторінки на сайті/в блозі та нижче 4 Мб для складної сторінки на сайті Інтернет-комерції - очевидно, чим менше сторінка, тим краще для всіх . Залежно від того, наскільки вам погано, відмінності можуть бути різкими з точки зору часу зарядки.
Кілька практичних порад, коротше кажучи, для розумнішого використання зображень на вашому сайті:
Оптимізація зображень .jpg та .png
Якщо вам доведеться зробити перші 3 ідеї самостійно, з точки зору оптимізації зображення ми можемо допомогти вам кількома порадами. Є безкоштовні сайти, які оптимізують картинки, і часто чудово роблять свою роботу. Два надзвичайно приємні приклади: https://tinypng.com/ та https://tinyjpg.com/, для png та jpegs.
Одне, на що слід звернути увагу, - це не перешкоджати заощадженню на кілька кб. Особливо у випадку з Інтернет-магазинами, де ми заощаджуємо 15 кб/фото та збираємо стільки, скільки я маю
Але іноді цього недостатньо. Потім ми використовуємо такі програми, як Adobe Photoshop, Gimp, IrfanView (він має надзвичайно потужну та просту в налаштуванні функцію масової обробки) або .NET Paint, які дозволяють нам вибрати, наскільки ми хочемо стиснути файл .jpg. Ідеально підійти до межі між гарною якістю/прийнятним розміром. Багато разів, навіть якщо ми економимо на 85% від початкової якості, ми не помічаємо втрат якості, але помічаємо, що зображення набуває набагато менших розмірів. Якщо ми змінимо розмір зображення так, щоб він був нормальним для Інтернету, ми вже помічаємо значне зменшення.
Але звідки ми знаємо правильний розмір картинки, коли ми хочемо використовувати її на веб-сайті?
Якщо ми говоримо про фонове зображення сайту, ми маємо на увазі резолюції, якими користуються наші відвідувачі. Досить хорошим припущенням було б мати ширину 1920px або 2550px для шпалер. Ці цифри випливають з резолюцій загальних моніторів. Зображення шириною 1920 пікселів буде виглядати бездоганно як фон на ще меншому моніторі FullHD. Один із 2550px буде виглядати бездоганно на моніторах вищого класу 1440p. Таким чином, ми не використовуємо зображення в 4000-6000 пікселів, і все ж воно виглядає ідеально - звідси значне зменшення ваги.
Якщо говорити про інші елементи чи картинки у лайтбоксах, то це спірно. Зазвичай я дотримуюся того самого правила, якщо намагаюся показати знімок екрана або загальну картинку. Очевидно, що піктограма Facebook у нижньому колонтитулі має не 1920 пікселів, а ширину 32 пікселі.
В якості тесту, щоб довести, скільки ви можете заощадити, я взяв красиві зимові шпалери, досить складні (так важче оптимізувати), і зменшив їх з 6,7 МБ до 464 КБ. При розмірі менше половини Мб картинка виглядає дуже добре і має ширину 1920 пікселів, тому її можна легко використовувати як фон веб-сайту.
Звичайно, ми могли б зберегти його із стисненням 60-70 jpeg, і є велика ймовірність, що ми не помітимо видимих падінь якості з першого погляду. Таким чином, ми отримуємо менші розміри.
Якщо ви хочете піти в крайність із економією місця, враховуйте наступне:
-чисто білий колір (#fff), займає менше місця, ніж градієнт або тінь;
-використовуючи такі фільтри, як "Більше розмити" в Adobe Photoshop, ми можемо значно зменшити розмір зображення (приклад: наведено зображення, на якому є основний елемент. Якщо ми застосуємо "Розмиття більше" кілька разів на задньому плані, щоб зберегти чіткість лише на нашому об'єкті, ми помітити зменшення розміру кінцевої картинки)
Так, але…
Кілька запитань і швидка відповідь на них, щоб довести, що варто оптимізувати кожне зображення на вашому сайті.
Багато хто не турбується про мікрооптимізацію династії
Я б не називав їх мікро, якщо ви розміщуєте першу сторінку свого сайту від 6 Мб до 2 Мб без помітних втрат якості. І якщо більшість ігнорує або не знає цих речей, це не означає, що це можна робити те саме.
Не має значення. Перший раз його важче завантажити, тоді знімок робиться з кешу
І що, я не можу закрити вкладку з вашим веб-сайтом до того, як він завершить завантаження вашої сторінки? Кеш формується протягом певного періоду у браузері та на відповідному пристрої. Якщо я використовую CCleaner, 2-й візит буде таким же жахом. Якщо я спробую отримати доступ до вашого сайту зі свого мобільного телефону, який щойно завантажив фотографії на мій робочий стіл, мій акумулятор уже розряджений.
А тепер я прошу вас:
У вас є виділений сервер із CDN та гарантоване 1 Гбіт/с з’єднання для вашого сайту? Швидше за все, ви користуєтеся середнім VPS або навіть спільним хостинговим обліковим записом. Таким чином, ви також заощадите на сервері зайві клопоти, оптимізуючи вміст сайту. Уявіть, що ви публікуєте свіже посилання (так що кеш ще не повністю побудований, якщо ви його реалізували) на свій сайт у Facebook, і ваш хост повинен негайно доставити сторінку розміром 8 Мб до 20 друзів хто клацнув. Очікуйте час завантаження жахів для деяких з них.
Чи всі ваші відвідувачі користуються 500 Мб волокна? Я думав, що ні.
Висновок
Хоча ми в 2016 році і, можливо, багато хто з нас користується мережею Wi-Fi та високопродуктивним кабельним з’єднанням 80% випадків, ми не повинні захоплюватися. Останнє, що ви хочете зробити, це загубити клієнта чи читача, бо йому нудно було щось шукати на вашому сайті, але його сторінки занадто сильно завантажувались на його середньому телефоні, в бездротовій мережі в кафе в кут. Оптимізуючи час зарядки, ми завжди повинні мати на увазі слабкі з’єднання та слабші пристрої. Мені здається справедливим, що користувач Інтернету 3G може читати свою улюблену статтю, не сидячи 30 секунд, поки його сторінка не завантажиться.
Ми несемо відповідальність за те, що розміщуємо в мережі. Будь ми дизайнерами, розробниками, адміністраторами чи блогерами. Якби ми всі звертали увагу на розмір сторінок на наших сайтах, ми отримали б кращий досвід для всіх користувачів.
Мій виклик для вас: оптимізує все. Від 32 x 32 пікселів .png до останнього .jpg, оптимізуйте та перегляньте час завантаження. Ваші користувачі це оцінять, Google оцінить це, і все, що вам потрібно зробити, це перемогти. Це коштує лише часу. Якщо ви хочете перейти на наступний рівень, оптимізуйте також файли .js та .css. Якщо ви економите більше 200 кб, не відмовившись від зображення, я оголошую вашу оптимізацію успішною. Нам цікаво ваші результати.
Якщо вам сподобалася стаття, не забудьте поділитися нею, щоб ми змогли зробити всі сайти швидшими. Настав час дієти!
[social_buttons facebook = ”true” twitter = ”true” google_plus = ”true” linkedin = ”true”]