Як r; зменшити вагу коду JavaScript і CSS
Найкращий спосіб зменшити вагу JavaScript і CSS - це використання мінімізаторів. Інші важелі: векторизуйте описи стилів та видаліть невикористані описи.
Як ми бачили у статті Навіщо оптимізувати веб-сайт ?, Покращення швидкості завантаження сторінки сайту має щонайменше чотири прямих наслідки: кількість відвідувачів (і за допомогою SEO), економічні втрати та реальний вплив на навколишнє середовище. Потім ми побачили в статті Оптимізуйте використання зображень на веб-сторінці як поліпшити роботу робочої станції, яка споживає найнепотрібніші ресурси, зображення, з претензією на зменшення, іноді, більш ніж на 75% загального обсягу.
У цій статті ми повернемося до головної мети: зменшити загальну вагу вашого сайту, зосередившись на оптимізації ваги файлів JavaScript і CSS.
Зменшіть вагу JavaScript та CSS
Для зменшення ваги JavaScript та CSS найкращим підходом є використання мінімізаторів.
Ви легко знайдете деякі в Інтернеті, такі як компілятор закриття Google або JSLint для JavaScript, і Clean CSS або CSS Compressor для CSS, не кажучи вже про YUI Compressor, здатний обробляти як JavaScript, так і CSS.
Для самостійного використання на вашому комп’ютері я рекомендую чудовий JASC (Just Another Script Compressor), який зробить чудеса як з вашими файлами JavaScript, так і CSS.
Ось чого можна досягти, наприклад, за допомогою компонентів, які широко використовуються в Інтернеті:
jQuery Mobile 1.2
Структура jQuery Mobile 1.2
Мобільна тема jQuery 1.2
"Очевидно, що я (або мої команди) завжди використовую стислі версії !", скажете ви мені. Давайте зробимо ставку на їжу? За словами Елі Бурштейн, дослідника Google, 64% сайтів [1] не використовують стиснуту версію jQuery у виробництві ... Я думаю, що я щойно виграв два безкоштовні страви за день у ресторані !
Подібним чином актуальність jQuery більше не потрібно демонструвати, оскільки його використання тепер стало практично необхідною умовою (використовується 89,9% сайтів [2]). Але чи справді ви проаналізували необхідні вам функції? Наприклад, Zepto.js або im.js є еквівалентами jQuery, приймаючи той самий синтаксис і пропонуючи лише основні функції, приблизно в 8 Кб замість 32 Кб, звичайно, для стиснених версій. Додатковий приріст близько 75% на фреймворк, який викликають усі ваші сторінки, може коштувати декількох спроб !
У будь-якому випадку, мінусом, для підтримки реальних можливостей технічного обслуговування, є робота над двома наборами файлів, один з яких не зведений до мінімуму, у розробці та інший, оптимізований у виробництві.
Щоб зменшити розмір файлів CSS, також корисно використовувати розширені синтаксиси.
280 символів
(пробіли включені)
146 символів (з пробілами),
зниження на 48%
Також не забудьте векторизувати описи стилів. На додаток до бажаної оптимізації, ви отримаєте більше чіткості та читабельності.
360 символів
(пробіли включені)
143 символи (з пробілами),
тобто зменшення на 60%
Тепер слід запам’ятати одне очевидне: видалити невикористані описи. Для цього виконайте перевірку за допомогою таких інструментів, як Unused CSS (платний). В іншому випадку існують різні плагіни для браузерів: селектори Dust-Me або використання CSS для Firefox або вбудований інструмент аудиту Chrome.
Для вдосконалених конструкцій можна скористатися такими інструментами/мовами, як Less CSS, які забезпечують не лише основні синтаксичні розширення, але й можливість компіляції CSS для отримання оптимізованого синтаксису.
Нарешті, щоб радувати пуристів, не забудьте також видалити одиниці з нульових визначень, тому що 0 залишається 0, будь то в px, em або%.
Що стосується JavaScript, оптимізація продуктивності, яку ви отримаєте, принципово пов’язана з вашими методами кодування, що далеко виходить за рамки цієї статті. Однак я пропоную спосіб розпочати роботу зі статті про оптимізацію JavaScript Джеффа Грінберга.
Висновок
За допомогою методів та інструментів, представлених у цій статті, робиться новий важливий крок в оптимізації ваги ваших веб-сторінок і, отже, динаміки завантаження сторінок.
У заключній статті, яка буде опублікована дуже скоро, ми закінчимо цей огляд, обговоривши можливі вдосконалення вашого HTML-коду.