Як підключити скрипти і де краще це зробити, дизайн і розробка сайту
Доброго вам дня. 🙂
По суті різниці немає, але іноді так буває, що якщо підключити скрипт в підвалі він не буде працювати. За часту все ті, хто пропонує свій скрипт, пишуть що потрібно підключати їх в шапці. Там же і підключаються бібліотеки jQuery.
Хочу поділиться з Вами своїм досвідом. Особисто я підключаю всі скрипти, все таки в підвалі. Справа в тому, що будь-який скрипт - це додаткове навантаження на сайт і чим більше Ви підключіть скриптів тим довше буде завантажуватися Ваш сайт. До того ж, як Ви розумієте сайт починає вантажиться саме з шапки і по порядку в низ завантажуються всі елементи, тому спочатку всі Ваші скрипти в шапці завантажаться і тільки потім почне завантажуватися основний контент Вашого сайту. Ось з цього я це роблю в підвалі. Спочатку вантажимо контент, потім скрипти. До того ж сайти, які показують швидкість завантаження Вашого сайту, за часту теж радять зробити підключення в підвалі, для більшої оптимізації. Так що там говорити, Google Analytics і його PageSpeed Insights і той радить прибрати всі скрипти з шапки сайту.
Так що відкриваємо файл відповідає за Ваш підвал і перед закривається body підключаємо скрипти. Якщо Ви працюєте з WordPress, то потрібно це робити після функції wp_footer (); .
Наступний момент, стосується самого підключення. іноді скрипт займає два рядки, а іноді і 100. А якщо таких скриптів 5 штук? Ваш підвал перетворюється в тихий жах. Щоб цього уникнути, я раджу кожен скрипт вставляти в окремий файл і зберігати його з розширенням js. Наприклад у нас є скрипт і ми зберегли його в файлі script.js. Тепер ми повинні його підключити до сайту, для цього потрібно просто вказати посилання і готовий код буде виглядати приблизно так:
Тільки якщо ваш скрипт був укладений в теги, то поміщаючи його в файл, теги не потрібно переносити
Тобто, скрипт на сайт додається так:
То в файл додається просто скрипт
Так робимо для кожного скрипта, який хочете використовувати на своєму сайті. Такий спосіб, явно зменшить кількість коду в основних файлах. Також перед усіма такими підключеннями, підключається і бібліотека jQuery. звичайно ж якщо вона не підключена за замовчуванням системою управління сайтом, як це зроблено в WordPress.
Щоб зробити стиснення потрібно в відкритому сайті вставити код в перше поле для тексту і під ним натиснути на. У другому полі з'явиться стислий варіант. Якщо код був великим, то його розмір явно зменшиться і прискорить завантаження Вашого сайту. Ваш скрипт буде у вигляді одного рядка без зайвого сміття 🙂
Для прикладу я вирішив взяти один і скриптів і показати Вам до і після. Початковий вид скрипта такий:
А ось так він буде виглядати після стиснення
В принципі все, я розповів все що хотів. Тепер Ви зможете теж користуватися зручним способом при роботі зі скриптами.
На цьому все, спасибі за увагу. 🙂
Привіт дорогий друже
У тебе встановлено розширення AdBlock або подібне. Додай мій сайт в білий список, і тим самим внесеш свій внесок в його розвиток. Інструкція як відключити AdBlock Хочу й собі віконце