Доброго времени суток, друзі, гості і випадково зазирнули на вогник відвідувачі мого котячого блогу!
Якось, пригадую, я обіцяла вам статтю про один з аспектів оптимізації швидкості сайту - про перенесення скриптів з початку сторінки вниз, в її кінець. І не тільки обіцяла, але і написала, але в зв'язку зі зміною теми оформлення на цьому моєму блозі написане мені чомусь здалося неактуальним. В основному тому, що ті методи і прийоми, які я використовувала, з новою темою оформлення не спрацювали.
Трохи поміркувавши, я зрозуміла, що цілком можливо, що якраз саме вам ця інформація виявиться дуже своєчасною та корисною. А тому все ж представляю вашій кілька способів перенесення скриптів, які гальмують завантаження сайту WordPress, вниз сторінки.
Навіщо переносити скрипти вниз, у підвал (футер) сайту
Перш ніж щось робити, потрібно ясно усвідомлювати те, навіщо ми це робимо і що нам це дасть. Так навіщо ж опускати скрипти якнайнижче на сторінці, відкладаючи їх завантаження?
Тепер уявімо, що відбувається, коли користувач відкриває сторінку нашого сайту, в хедері якій розташовано декілька (а хоч і один!) JS-скрипт.
На стороні сервера відпрацьовує весь php-код, формує єдиний html-документ - вихідний код сторінки - який і починає передаватися в браузер. Код скрипта також вбудовується в цей документ в його початку.
Браузер починає обробляти отриману інформацію. Майже відразу ж натикається на JS-код, зупиняє завантаження сторінки і починає цей код виконувати. Потім продовжує завантаження, поки знову не зустріне черговий скрипт.
Головне тут те, що виконання скриптів на самому початку нікому не потрібно - користувач ж ще не побачив сторінку навіть, браузер адже ще не встиг її відобразити. Наприклад, завдяки скриптам працює кнопка «Вгору». Але навіщо виконувати скрипт для неї на початку завантаження, якщо сама кнопка, її візуальне оформлення все одно викликається в футере?
А сторінка завантажувалася б куди швидше, якби всі скрипти були внизу: браузер швидко відобразив весь html-код, а вже в останню мить, поки користувач огляне і зрозуміє, куди б йому ще натиснути, виконав всі скрипти.
Саме тому є сенс все скрипти переносити якомога нижче, ближче до кінця сторінки, в її футер.
Як перенести скрипти вниз
Способів, друзі мої, тут кілька. І для різних скриптів підійдуть різні варіанти.
Але перш за все потрібно зрозуміти, що ж це за скрипти, і де нам їх побачити.
Тепер починається найцікавіше. Починаємо переносити скрипти.
Крок перший. «Вирізати - Вставити»
Перше, що необхідно зробити, це відкрити на редагування файл header.php вашої теми оформлення і уважно дослідити його на предмет розташованих там скриптів - шукати треба саме ті рядки, які ви бачили в вихідному коді.
Якщо такий рядок виявлена, то ви її акуратно, з усіма тегами вирізаєте з коду, потім відкриваєте файл footer.php і вставляєте її в нього перед закривається тегом
.
Після кожної такої операції обов'язково перевіряйте сайт на працездатність!
На жаль, не можу показати вам наочно, як це робити, оскільки ні в одній з тем оформлення, які у мене встановлені, таким чином скрипти не підключаються. Насмілюся припустити, що це далеко не найпопулярніший спосіб. Тому підемо далі.
Переносимо скрипти в footer.php, правлячи файл functions.php
Дуже і дуже часто розробники тим підключають до своїх шаблонах скрипти, використовуючи файл functions.php. В принципі, це найправильніший і коректний спосіб. Але на жаль, далеко не всі роблять це по фен-шую, хоча підключити скрипт до теми в футере, а не в заголовку - справа всього лише п'яти зайвих знаків. Але давайте конкретніше.
При роботі зі скриптами використовуються кілька функцій. Нас в даний момент будуть цікавити дві з них: wp_register_script - фіксуючи скрипти в темі, і wp_enqueue_script - функція, що підключає вже зареєстровані (тобто «відомі» WordPress до цього файли JS).
Щоб зрозуміти принцип нашої подальшої роботи, трохи поговоримо про ці функції.
Напружуємо мозок, згадуємо курс математики - функція завжди приймає деякі аргументи. В php нічого нового - обидві ці функції беруть певний набір аргументів.
У дужках - аргументи, які приймає функція:
$ Handle - назва;
$ Src - URL підключається JS-файлу;
$ Deps - масив назв скриптів, від яких залежить підключається нами;
$ Ver - версія скрипта;
$ In_footer - це для нас найголовніший параметр - він вказує, де підключати скрипт: між тегів (В хедері) або до тега (В футере).
Ви ще тут? Не лякайтеся, розбиратися у всьому цьому не потрібно. Головне, запам'ятати, що wp_enqueue_script повинна приймати п'ять аргументів, п'ятий з яких і вказує, де підключений скрипт. Змінюючи його, можна змінювати місце розташування скрипта - відправити його вниз.
Аналогічно з функцією wp_register_script - вона приймає ті ж аргументи, відповідно, якщо скрипт оголошений в ній, то теж можна впливати на його розташування, змінюючи значення аргументу $ in_footer
Ну а тепер до справи. Нагадаю, найчастіше все скрипти, підключені до вашої теми, підключаються в файлі functions.php. Його ми і відкриваємо на редагування і шукаємо в ньому назви цих двох функцій і перевіряємо, щоб в них були вказані назви тих js-файлів, які ми бачимо в вихідному коді.
Ще раз - ось мій вихідний код:
А ось ті функції у файлі functions.php, які відповідають за ці скрипти:
Зверніть увагу, кожному скрипту в вихідному коді відповідає своя функція.
Тепер справа за малим: трохи підправити код. Аргумент $ in_footer, який вказує на місце розташування скрипта, за замовчуванням приймає значення «false» - в хедері. Значить, все, що нам потрібно, це явно додати йому значення «true», яке буде говорити про те, що цей js-файл потрібно підключати в футере.
Зверніть увагу, що оскільки функція повинна прийняти п'ять аргументів, то потрібно вказувати всі відсутні.
Так, у другій і третій функції немає аргументу версії, тому ми його теж додаємо порожнім «за замовчуванням». І тільки після цього вказуємо значення «true» (без лапок), щоб воно ставилося до п'ятого аргументу.
Після всіх правок файл зберігаємо, перевіряємо сайт на працездатність і знову дивимося вихідний код:
На скріншоті видно, що у мене залишилося всього три скрипта. Решта благополучно відправилися в футер:
Схожим чином можна переносити і скрипти, що підключаються плагінами. Потрібно в вихідному коді обчислити файл плагіна, в якому міститься підключення скрипта, а потім в ньому підредагувати код функції підключення / реєстрації цим же способом.
Звертаю вашу увагу на те, що не завжди зазначеним способом вдається перенести скрипти плагінів вниз. Ось, наприклад, скрипт плагіна «Rublon» на мої провокації не піддався 🙂
Крім того, можливий ще варіант, коли у вихідному коді сторінки ви побачите не виклик скрипта (укладений в теги ), А безпосередньо його текст. І тоді обчислити, яким плагіну він належить, можна тільки відключаючи по черзі плагіни. А якщо не допоможе, то і переключивши на час тему оформлення - можливо, винна саме вона.
Отже, три js-файлу все ще підключаються в заголовку блога. Причому два з них - це стандартне вордпрессовское підключення бібліотеки JQuery, а з третім мені розправитися не вдалося.
Далі ми з вами вступаємо на досить хиткий грунт. Справа в тому, що у всіх з нас різні шаблони. І набір плагін теж різний. Тому цілком можливо, що після виконання моїх наступних рекомендацій у вас на блозі відмовить якийсь функціонал: слайдери, кнопки «Вгору-Вниз», лайтбокси, що завгодно ще.
Втім, не спробуєш - не впізнаєш. Тому пропоную спробувати відключити стандартну JQuery, щоб отримати мінус два скрипта в хедері. Ну а якщо вже щось та зламається, то я залишаю для вас відхідний шлях.
Власне, відключити JQuery в WordPress я придумала двома способами:
Я додала після неї функцію, що скасовує її:
До речі, у мене на блозі після відключення JQuery перестав працювати плагін лайтбоксу. Так що все довелося повернути на круги своя. Однак якщо ви пріверженнік мінімалізму в дизайні і не використовуєте на своєму блозі всякі хитрі штучки :), то можливо, має сенс скористатися.
Ось таким чином і можна перенести скрипти вниз, прискоривши (у багатьох випадках значно), свій улюблений блог.
І не треба говорити мені, що це жахливо складно і практично неможливо виконати, що ви боїтеся лізти в код і взагалі чайник чайником.
Уважно перечитайте статтю, уловите основний принцип - і вперед, на барикади! Для редагування коду використовуйте зв'язку «Notepad ++» і «FileZilla», і пам'ятайте, що гарячі клавіші в ноутпад ++ (скасування і повтор) - це ваше все :).
І нагадаю, що ці рекомендації були перевірені мною на шаблоні «Admired», але ось для нової моєї теми оформлення не підійшли зовсім. Оскільки її розробники підійшли до справи грамотно, і всі скрипти, які тільки було можливо, вже опустили вниз сторінки. Тому тут я до оптимізації швидкості завантаження блогу в тому, що стосується скриптів, зайшла з іншого боку. Але детальний звіт - наступного разу.
Була з вами завжди ваша вечнопушістая Web-Кішка. Вдалого дня, джентльмени і леді!
У Яндекса під боком, або Як зробити віджет сайту для Яндекса
