Магічні способи прискорення сайту
Стаття про три способи чарівним методом прискорити завантаження вашого сайту.
Магія прискорення завантаження сайту:
🥇👉 Перше - і саме складне це налаштування кешування статичних файлів: картинок, js, css та шрифтів. Причому мінімум на 192 дні, дехто ставить 1 рік. Кеш статики може робитись галочкою в налаштуваннях хостингу або потрібно ручками писати в htaccess:
<IfModule mod_expires.c>
ExpiresActive On
AddType image/webp .webp
# Images
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
# Video
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType application/x-font-woff2 .woff2
AddType image/svg+xml .svg
# CSS, jаvascript
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType application/x-font-woff2 "access plus 1 year"
ExpiresByType text/jаvascript "access plus 1 year"
ExpiresByType application/jаvascript "access plus 1 year"
# Others
ExpiresByType application/pdf "access plus 1 year"
ExpiresByType application/x-shockwave-flash "access plus 1 year"
</IfModule>🥈💁 Друге - Потрібно погратись (краще взяти ручку і листочок та все спланувати) - потрібно розділити стилі та скрипти на ті, що потрібні для завантаження дизайну і ті які відповідають за окремі блоки: коменти, віджети, форми, авторизацію.
Для файлів які відповідають за макет(DOM) додаємо спеціальний метатег rel="preload", а для неважливих rel="prefetch", наприклад:
<!DOCTYPE html>
<html lang="uk-UA">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Важливі файли: -->
<link rel="preload" href="template.js" as="script">
<link rel="preload" href="template.css" as="style">
<!-- НЕ важливі файли: -->
<link rel="prefetch" href="/777.js" as="script">
<link rel="prefetch" href="/777.css" as="style">
<link rel="stylesheet" href="template.css">
<script src="template.js"></script>
</head>
<body>
<!-- * -->
<link rel="stylesheet" href="/777.css">
<script src="/777.js" async></script>
</body>
</html>
🥉🥊 Третє - Оптимізація розміру та ваги картинок. Якщо у вас в дизайні блок для картинки розміром 250рх., а картинка реальна 500рх, то 👮🚨 Google За це дає по сраці!
Обов'язково на усіх важливих сторінках має бути звірка розмірів картинок! Також завжди стискайте картинки такими сервісами як - tinypng.com.
Хочеш бути чемпіоном 🏆 серед конкурентів картинки мають бути у форматі .webp. (з 2022 року цей формат - стандарт для гугла!).
---------
💩💪 І як би вам не хотілось прийдеться ще стиснути JS nf CSS файли....
P.S. В "CMS-Ardila" - Ви просто в шаблоні виставляєте в необхідному порядку файли JS та CSS а двигунчик, коли генерить сторінку їх стискає або в 1 файл або запис в <head>...