Шляхи прискорення сайту і скриптів за допомогою CDN

1. Чому швидкість так важлива?
2. Користь CDN для збільшення швидкості
3. Як здійснюється прискорення CDN
4. множинні скрипти
5. Географія
6. Найбільші CDN в світі
7. завершення

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

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

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

Зокрема, мова піде про підключення CDN, незважаючи на те, що хтось із читачів подумає: «з цим все ясно, багато чого я читав уже». Ніхто і не сперечається, але іноді корисно все зібрати в одному місці і подивитися на питання оптимізації трохи з іншої сторони.

Чому швидкість так важлива?

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

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

Користь CDN для збільшення швидкості

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

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

Але як же насправді CDN може прискорити сайт, що в ньому такого незвичайного і привабливого?

Як здійснюється прискорення CDN

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

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

множинні скрипти

Коли ми починаємо свою творчість як веб-дизайнера або верстальника, здається, що ... «як прекрасно все навколо». Можна встановити окремі скрипти, віджети, підібрати і те, і се, і практично самому навіть писати код не потрібно, оскільки є готові шаблони. Ми насолоджуємося уявної свободою, тестуємо і встановлюємо і ... сайт сповільнюється в роботі, сайт перевантажується. Нехай уповільнення відбувається на частки секунд, але воно є і накопичується.

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

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

Наприклад, можна побачити кількість уже існуючих запитів до сайту через «код елемента» в Opera. Три типу сайтів і різну кількість запитів, насичення скриптами та ін.

Чим менше тим краще. Стискайте, об'єднуйте, зменшуйте код скриптів, включите HTTP / 2 і, в ідеалі, тримайте сайт подалі від важких плагінів.

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

Третьою дуже важливою рекомендацією є включення HTTP / 2. Детально про переваги HTTP / 2 ми поговоримо окремо в майбутньому, але зараз звернемо увагу на той факт, що протокол був написаний (2015 рік, підтримується всіма браузерами) спеціально для оптимізації часу завантаження веб-сайтів, зокрема, тих сайтів, які мають багато різних ресурсів для обслуговування. Відповідно, побічно перехід на даних протокол впливає на позиції сайту.

Більшість послуг CDN дозволяє швидко і легко підключити HTTP / 2 до веб-сайту (хоча і без нього можна), що і робить миттєвий приріст швидкості.

Географія

Дуже добре, якщо ви створюєте проект для місцевої аудиторії. Але якщо сайт призначений для міжнародних користувачів? Підібрати хороший хостинг і сервер стає скрутним. У CDN є мережа з сотень серверів в десятках місць по всьому світу. Ці сервери копіюють ваші зображення і статичні ресурси, такі як Javascript і CSS файли до себе. Коли ж користувач потім потрапляє на ваш сайт, великовагові ресурси будуть завантажуватися з того сервера, який фізично розташований якомога ближче до даного користувачеві. Зрозуміло, це значно зменшує проблему відстані і дає сайту великі переваги при завантаженні.

Найбільші CDN в світі

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

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

Але якщо звернутися до тих CDN, які представлені в світі, то звернемо увагу на:

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

Однак для бізнесу або електронної комерції буде потрібно більш складні і функціональні плани із захистом від DDoS, підтримкою Web Application Firewall та ін.

Сервери Incapsula знаходяться в 30 ЦОД по всьому світу, і відповідно, забезпечують швидке завантаження даних практично всім користувачам. На поточний момент послугами постачальника користуються понад 500 000 сайтів, серед яких Siemens, Wix, T-Mobile, Moc, Hitachi і інші.

CloudFlare - ще один найбільший гравець на ринку безпеки сайтів і прискорення їх завантаження. Його послугами користується понад 4 мільйонів сайтів, а сервери знаходяться в 118 ЦОД.

Вони також пропонують безкоштовний план з можливостями кешування даних, асинхронні завантаження Javascript, HTTP / 2 і SPDY, WebSockets, захист від DDoS, захист від спаму та багато іншого. Налаштування проста і підключається досить швидко. Але якщо потрібно мобільна оптимізація, безпеку вищого рівня, то доведеться переходити на платні тарифи.

Оскільки CloudFlare є найбільш популярним рішенням оптимізації сайту, то і використовують його такі компанії як Reddit, Mozilla, Feedly, Yelp, StackOverflow, також і Google, Microsoft, Qualcomm.

jsDelivr - як уже зрозуміло з назви, розвантажує бібліотеки JavaScript, JQuery, шрифти, CSS і багато іншого, що здатне пригальмовувати завантаження сайту. Також він обслуговує файли з Cloudflare, Keycdn, Quantil і MaxCDN. Особливість jsDelivr в тому, що можна завантажити кілька файлів за допомогою одного запиту HTTP і немає ніякого обмеження трафіку.

Його послугами користуються новинні агентства New-York Times, NBC News, а також і Mozilla.

Зрозуміло, що крім цих трьох, найбільш відомих, існують і такі платформи як Datapath (З підтримкою оптимізації роботи в хмарному Office 365, Azure, Google Cloud), Photon від Jetpack і Netlify . І так, вони можуть виглядати, як щось складне і «круте», але по факту вирішують самі неабиякі завдання, навіть якщо у вас самий звичайний невеликий сайт з великою кількістю ефектів, анімації, картинок і іншого.

Підключення CDN здійснюється зазвичай у вигляді плагіна, який переписує URL статичних ресурсів, підставляючи до адресою cdn. example.com, де cdn це ту адресу, що дається вам після підключення до системи.

завершення

Як ми помітили вище, підключення CDN не так важко і дорого, як можна було б подумати. Але при цьому, і дизайнер, і верстальник можуть бути впевнені в тому, що навіть, якщо вони зробили всю залежну від них роботу по оптимізації сайту (скриптів, картинок, відео та ін.), То CDN додатково здатний в рази збільшити швидкість завантаження сайту . А це, в свою чергу, призведе до поліпшення UX, до переходів, популярності, розвитку бренду і вашого професіоналізму теж. І тим більше, дозволить використовувати і найостанніші версії бібліотек, движків , Насичувати сайт анімацією, ефектами, додавати ресурсомісткі VR і панорами високої якості і так далі.

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

Не має значення який хороший ви верстальник і як добре пишете скрипти і налаштовуєте бібліотеки. Все одно сайт може пригальмовувати, він може виявитися перевантаженим (навіть якщо ви пишете код самі, а не використовуєте CMS). А значить, використання CDN не буде зайвим при роботі над будь-яким типом сайту.