Загальнодоступна частина веб-сайту або виражена іншим способом, що малює браузер, - це не що інше, як документ HTML, де ми знайдемо теги всіх видів: зображення, посилання, розділи, статті, заголовки, колонтитули тощо ... Грубо кажучи щось на зразок:
Це HTML (я скоротив кілька речей), який малює тему двадцять сімнадцять WordPress на основі початкової установки, без плагінів і лише на прикладі сторінки та запису Hello World. Фізично займає 12124 байт. Давайте подивимося, що ми можемо зробити, щоб зменшити розмір HTML-коду, який генерується у загальнодоступній частині WordPress.
Очистіть заголовок WordPress HTML
У заголовок завантажується серія тегів, таких як wlwmanifest, генератор, смайли (сценарій та css) тощо ..., які ви, ймовірно, не будете використовувати, а лише займають місце та генерують більше непотрібних http-запитів. Ми можемо додати функцію в наш functions.php для очищення заголовка:
У нашому заголовку міститься весь цей HTML-код:
Щоб звести до цього:
Загальна вага HTML буде зменшена до 9171 байт. Нам не тільки вдається зменшити вагу, але ми також уникаємо запитів HTTP, які збільшують час завантаження нашого веб-сайту.
Очистіть класи, які ми не використовуємо в тілі, статтях та меню
У різних тегах ми бачимо, що WordPress малює низку класів, щоб дати нам можливість налаштувати певний шаблон, або допис, або навіть дописи, що належать до категорії чи тегу тощо ... Приклад:
Мітки меню (
-
):
Якщо ви не збираєтеся використовувати ці класи для оформлення або стилізації частин вашого веб-сайту, краще видаліть їх. Будьте обережні, можливо, вам буде цікаво їх зберегти, у наведених нижче прикладах ми створимо білі списки.
Для усунення класів тегу body ми використаємо фільтр body_class. Цей фільтр малює серію класів залежно від шаблону, в якому ми перебуваємо (наприклад: home, error404, category ...):
Те саме для класів, доданих до статей, але цього разу за допомогою фільтра post_class:
Також для меню, використовуючи фільтр nav_menu_css_class:
Це не багато, але ми пішли з 9,171 байт до 8 868 байт. Я пам’ятаю, що це основна початкова установка, виграш буде більшим у реальному середовищі з більшою кількістю повідомлень, більшою кількістю пунктів меню тощо ...
Видалити параметр версії із рядків запитів
WordPress зазвичай додає параметр в кінці з номером версії до URL-адреси файлів CSS та JS, наприклад: ?вигляд = 4.7.4. Щоб видалити його, просто додайте цю функцію:
У цьому прикладі він з'являється 10 разів, усуваючи це, ми можемо зменшити HTML до 8775 байт. Крім того, деякі аналізатори продуктивності, такі як Pingdom Tools або GT Metrix, рекомендують видаляти їх, оскільки при кожній зміні версії кеш буде "анульований", і клієнту доведеться завантажувати ресурс знову, що, мабуть, є тим самим.
Зменшіть HTML, щоб закінчити
Більшість плагінів кешу пропонують можливість зменшити HTML. Зменшення HTML означає усунення всіх пробілів, вкладок, розривів рядків, коментарів тощо ... залишаючи весь HTML в одному рядку, залишаючи у вас щось таке ж потворне, як зображення обкладинки цього допису.
У нашому прикладі ми опускаємо вагу до 7 758 байт. Так як 12124 початкові байти, всі ці дії призвели до поліпшення 4366 байт. Це не багато, але слід врахувати, що цей приклад стосується виключно вмісту, створеного під час чистої інсталяції WordPress.
У реальному житті з встановленими плагінами та набагато більше вмісту оновлення може становити кілька КБ. Це ще мало, але все ж із цим прикладом завжди завантажуватиме 7,7 КБ швидше, ніж 12,1 КБ, навіть якщо вони ледве кілька тисячних непомітні для людського ока.
До цих методів потрібно підходити в тому сенсі, яким вони є піщинка більше це допоможе нам досягти кращих показників. Якщо замість плагіна кешу ви хочете наважитися зробити це вручну і мати контроль над тим, як зменшити HTML, я запрошую вас відвідати це репозиторій на GitHub, де у мене є клас PHP для виконання цього завдання.
Роздум до кінця: У списках публікацій, де ми можемо показати останні 10 публікацій, якщо кожен пост має зображення, заголовок, посилання, кнопку, витяг тощо ... і ми зменшуємо список до останніх 8, намальований HTML Мало того, що він буде менше, запит швидший, а також менше запитів http, наприклад, до зображень, крім того, щоб уникнути завантаження самих цих двох зображень.
Чи вважаєте Ви цю інформацію корисною?
Якщо ця публікація вирішила для вас проблему, купите мені каву чи пиво. Цим маленьким жестом ви закликаєте мене продовжувати писати.