50% інтернет-трафіку вже зараз доводиться на частку мобільних пристроїв, і їх користувачі очікують, що сторінки сайту будуть завантажуватися практично миттєво. Тому в цій статті ми розглянемо, як при перевірці швидкості завантаження сторінок безкоштовним інструментом Google PageSpeed Insights Tool отримати 100/100 балів як для мобільного, так і для деськтопной версії сайту.
Як збільшити швидкість завантаження сторінок
Перш ніж перейти безпосередньо до порад, варто звернути увагу, що Google PageSpeed Tool лише надає рекомендації, дотримуючись яких можна досягти більш високої продуктивності сайту. Підсумковий результат залежить, в першу чергу, від вашої серверної інфраструктури, ресурсів і вибраних налаштувань.
Для застосування деяких порад потрібні глибокі технічні знання, для інших - досить загального розуміння принципів роботи сайту. Всі рекомендації підходять для використання в будь-який CMS системі.
Крок # 1: оптимізуємо зображення
PageSpeed Insights Tool перевірить зображення на вашому сайті, і якщо швидкість їх завантаження виявиться недостатньо високою, Google запропонує їх оптимізувати. Ви можете збільшити швидкість завантаження зображень, зменшивши їх вага і розмір. Щоб вирішити це завдання досить виконати два кроки:
- Для початку, стисніть все зображеннями інструментами типу Compressor.io або TinyPNG. Обидва інструменти безкоштовні, але вкрай ефективні. У деяких випадках вони стискають картинки на 80% без втрати якості.
- Зменшіть розмір зображень до мінімально можливого. Припустимо, ви хочете, щоб розмір відображається на сайті картинки становив 150x150px. В такому випадку фактичний розмір зображення, що зберігається на вашому сервері, не повинен перевищувати розмірів відображуваного зображення, тобто він також повинен складати 150x150px. Не варто підганяти розмір картинки за допомогою CSS або HTML коду.
Ви можете вивантажити все зображення, стиснути їх і змінити розмір. Непогано взяти за правило оптимізувати кожне нове зображення перед додаванням на сайт. Тобто все зображення повинні бути правильного розміру і стиснуті без втрати якості.
Google запропонує відразу завантажити оптимізовані зображення на сайт.
Наприклад, код в документі, наведеному нижче,
може бути скорочений до:
Щоб швидко вирішити цю задачу можна встановити на свій сервер інструмент, який називається Gulpjs. На основі вашого файлу він автоматично створює новий CSS файл, в якому видалені всі непотрібні пропуски. Фактично, цей інструмент може допомогти скоротити розмір файлу в два рази. Ще більше інформації про те, як видалити зайві елементи коду, можна почерпнути в офіційному довідковому керівництві Google.
А для сайтів на Wordpress рекомендується встановити плагін Autoptimize.
Крок # 3: Використовуйте кеш браузера
Для багатьох сайтів пункт про використання кешу браузера - справжнє випробування. Для вирішення цієї проблеми можна використовувати мережу CDN.
Припустимо, головний сервер вашого сайту розташований в Техасі, якщо ви не використовуєте CDN, то користувач, який знаходиться в Амстердамі, буде змушений чекати, поки ваш американський сервер завантажить для нього контент, а це може зайняти чимало часу. У той же самий час використання CDN дозволяє завантажувати сайт з точки, розташованої до користувача максимально близько. А в даному випадку, максимально близько до Амстердаму.
Як результат, сайт завантажується значно швидше.
Цю проблему можна вирішити, замінивши лічильники зображеннями, які ви можете спокійно зберігати за допомогою CDN. Замість того щоб розміщувати сторонні скрипти, які отримують інформацію про кількість передплатників з Twitter, Facebook, Google Plus і інших соцмереж, можна зберігати ці дані самостійно, знизивши, таким чином, швидкість завантаження сторінок.
Якщо ваш сайт інтегрований з Google Analytics і ви не хочете відмовлятися від інтеграції, то вирішення проблеми може зажадати додаткових зусиль.
Якщо скрипт виявить зміни, то нова версія автоматично скочується і збережеться у вашій мережі CDN.
Та ж сама операція буде повторюватися кожен раз, коли відбувається оновлення коду. Нова версія скачується і зберігається на CDN. Цей же скрипт можна використовувати і для інших сторонніх ресурсів.
Крок № 5: Увімкніть стиснення
Включити стиснення можна прямо в налаштуваннях вашого сервера. Якщо ви не знаєте, як це зробити, зверніться до вашого системного адміністратора і попросіть включити GZIP стиснення на сервері.
Крок # 6: Оптимізуйте сайт для мобільних пристроїв
Те, наскільки зручно користувачам мобільних пристроїв працювати з вашим сайтом, залежить від багатьох факторів, в першу чергу від того, оптимізований дизайн сайту під мобільні пристрої, як він відображається у користувача, наскільки добре підібраний фон, чи зручно продумана навігація по сайту і так далі.
висновок
У статті перераховані тільки самі основні кроки, які можна зробити щоб оптимізувати швидкість роботи сайту. Зверніть увагу, що не варто зупинятися на оптимізації тільки головної сторінки, необхідно також приділити увагу внутрішнім сторінкам.
Нижче коротко перераховані три основні кроки, які допоможуть домогтися більш високої продуктивності сайту:
Чи ставили ви перед собою завдання оптимізувати швидкість роботи сайту? Якщо так, то які кроки ви робили?
Тепер до конструкторам. у тих же Ukoz і WIX є дві переваги - по-перше, це власні сервера і хостинг, що набагато спрощує будь-якому користувачеві завдання запустити свій проект. По-друге, це повний захист від DDos атак, що теж є відчутною перевагою.
На рахунок того, що конструктори впадуть. спірне думку, тому що той же WIX володіє дуже чудовими дизайнами, які в Росії робити так і не навчилися по суті, якщо бути чесними. Плюс до всього, сайти на конструкторах нормально просуваються, якщо вміти це робити. Також добре вони ранжуються пошуковими системами, а система Ajax одна з майбутніх, що визнав той же Google в США на конференції IT-розробників. Не дарма ж той же Яндекс стали співпрацювати з WIX, Ukoz і іншими. Якби це була утопія, то сенс.
Тепер з приводу оптимізації, справа не тільки в коді, але і в контенті. Іноді використовують не три шрифту, а всі ці сім то теж ускладнює сайт. Крім цього всього, потрібно ще розуміти для чого робиться сайт. Залучити швидким способом клієнтів, або їх інформувати і розповісти про себе. Якщо хочете, щоб сайт був оптимальним, то дотримуйтеся 4-5 секунд завантаження, саме цей час користувач зазвичай чекає завантаження. І не втрачайте важливий момент, у кожного користувача швидкість інтернету різна і від цього багато залежить, як би ви не покращували завантаження і швидкість ваших сайтів. Якщо інет працює повільно, то і ваш сайт буде вантажиться як черепаха при всіх зусиллях))
До речі, система Ajax, яка використовується в рівній мірі з HTML 5 на WIX, це система прогрузкі всього сайту відразу, а не окремої верхній частині сторінки. Саме в цьому і перевага. ))