Оптимізація завантаження сайту

Бібліотека скриптів jQuery використовується на багатьох сайтах, у тому числі побудованих на системах WordPress та Joomla. Багато плагінів та компонентів сайту підключають jQuery для своєї роботи.Як можна оптимізувати завантаження цієї бібліотеки скриптів?

1. Загальні відомості про jQuery та CDN.

Бібліотека скриптів jQuery важить приблизно 90 Кб (без стиснення). Якщо використовувати YUI Compressor і включити gzip-стиск на сервері, то обсяг даних, що передаються при завантаженні бібліотеки, зменшиться. І все ж таки це «пляшкове шийка» у завантаженні сайту, якепотрібне і можна розширити.

Важливо, що нові версії бібліотеки часто важать більше, ніж старіші. Також важливо знати, що плагіни та компоненти сайту можуть бути несумісними зі старими версіями jQuery.

За замовчуванням завантаження бібліотеки jQuery відбувається з вашого сайту (якщо сайт на WordPress, то з папки /wp-includes/js/jquery/).

CDN — це Content Delivery Network або мережа доставки контенту. Така мережа дозволяєсуттєво прискорити завантаження файлів, розміщених у мережі. Принцип роботи CDN у тому, що ємережа серверів, кожному з яких дублюється розміщена інформація. Коли користувач запитує завантаження об'єкта (скрипту, файлу стилів тощо), то відбувається визначення найближчого до клієнта сервера і з нього завантажуються дані. У результатізатримки завантаження мінімальні, швидкість максимальна.

Мінуси технології CDN полягають у її складності та високій вартості використання.

Однак ми, прості люди, можемо отримати доступ до CDN великих компаній та завантажувати бібліотеку скриптів jQuery з їхніх серверів.

Для завантаження jQuery існуєкільказагальнодоступних безкоштовних CDN:

• jQuery CDN
• Google CDN
• Microsoft CDN
• CDNJS CDN
• Яндекс CDN

Ви можете вибрати будь-який сервіс для підключення jQuery бібліотеки до вашого сайту. Я вирішив підключати бібліотеку із сервера Google.

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

Для наочності наведу картинку, що показує різницю у швидкості завантаження бібліотеки з хорошого хостингу та з CDN сервера Google:

Як ви бачите,різниця у швидкості завантаження бібліотеки в 15 разів на користь Google CDN! Якщо у звичайного хорошого хостингу бібліотека скриптів завантажується 475 мс (півсекунди), то з CDN всього лише 32 мс.

Можливо, ви думаєте: півсекунди — це дуже мало! Але тут ви помиляєтесь. Це завантаження лише однієї бібліотеки скриптів, а не лише сайту.Швидкість завантаження сайту дуже важлива - вонавизначає лояльність відвідувачів сайту. А з урахуванням того, що все більше людей виходять в інтернет з мобільних пристроїв, у яких інтернет-з'єднання досить повільне, то різниця суттєва.

1. Відключаємо завантаження jQuery із нашого сайту.
2. Вибираємо необхідну версію jQuery.
3. Підключаємо бібліотеку з CDN Google із зазначенням версії.

Для виборуверсії бібліотеки достатньо буде подивитися, яку версію скрипта використовує ваш сайт та плагіни. Це можна зробити різними способами:

У діаграмі завантаження ми знаходимо скрипт jQuery та дивимося його версію. Приклад на зображенні нижче:

У цьому випадку підвантажуєтьсяjQuery версії 1.8.3. Ось її ми і підключатимемо з Google.

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

На самому початку файлу вказана версія бібліотеки:

У цьому випадку ми також бачимоjQuery версії 1.8.3.

Версію ми визначили. Тепер слід заборонити завантаження бібліотеки з нашого сайту. Для цього:

1) Відкриваємо файлfunctions.php нашої теми оформлення (в адміністративній панелі WordPress заходимо до Зовнішнього вигляду --> Редактор --> Theme Functions (functions.php))

2) У кінець файлувписуємо код :

if (!is_admin())wp_deregister_script ('jquery');wp_register_script ('jquery', («http://ajax.googleapis .com/ajax/libs/jquery/1.8.3/jquery.min.js»), false, '1.8.3');wp_enqueue_script ('jquery');>

Зберігаємо файлfunctions.php, натиснувши кнопку «Зберегти». Все тепер бібліотека jQuery версії 1.8.3. буде завантажувати з CDN Google.

Розглянемо, які елементи коду за що відповідають:

wp_deregister_script ('jquery'); - ця команда відключає завантаження бібліотеки скриптом з нашого сайту.

wp_register_script ('jquery', («http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js»), false, '1.8.3'); — ця команда підключає jQuery і завантаження йде із зазначеного за посиланням шляху.

http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js — це шлях, яким бібліотека лежить на сервері Гугла. Якщо вам потрібна інша версія бібліотеки скриптів, просто змініть цифри 1.8.3 на потрібні.

Останній етап - це перевірка роботи бібліотеки, що завантажується з серверів Гугла.

Для цього, по-перше, повторно виконаємо тест нашого сайту наhttp://tools.pingdom.com/fpt/ :

Стрілка зліва вказує на місце підключення бібліотеки jQuery. Там же вказано, що вона завантажується із сервера Google.

Праворуч унизу стрілка показує час завантаження jQuery, ви бачите різницю.

Після перевірки подивіться на сам ваш сайт: чи все на ньому працює? Чи не виникло проблем у плагінах. Зазвичай проблем немає, але якщо щось не так, то версія jQuery не та, що вам потрібна. Спробуйте підключити новішу версію. Видаліть код, що підключає jQuery з CDN і потім перегляньте лог завантаження сайту на сервісіhttp://tools.pingdom.com, можливо завантажується кілька бібліотек, просто ви це не помітили (плагіни можуть підвантажувати свою версію). Подивіться на версію найновішої і потім підключіть її через CDN.

Ми розглянули підключення бібліотеки jQuery з CDN Google, що дозволяє значно збільшити швидкість завантаження елемента та швидкодію сайту.

Поділіться цим записом із друзями, буду вдячний!

---