😎 » SEO » Оптимизация сайта » Магічні способи прискорення сайту
2 0  

Магічні способи прискорення сайту

Стаття про три способи чарівним методом прискорити завантаження вашого сайту.

Магія прискорення завантаження сайту:

🥇👉 Перше - і саме складне це налаштування кешування статичних файлів: картинок, 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>...


Залишити свій коментар:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2009
2023