[Guide] По-бърз сайт за 30 минути

[RaFa]

Здравейте съфорумници,

С този урок ще се опитам да ви науча как да оптимизирате сайта си за 30-тина минутки или поне се надявам да премахна грешки, които съществуват още откакто влязох в Mu Online света преди 7 години.

Можете да използвате GTMetrix, за да видите още съвети и скоростта на сайта си (преди и след)

1. JavaScript
Повечето от вас искат всевъзможни ефекти по сайта и затова в голяма част от случаите наблъскат тонове ненужен код. Моят съвет. Да, колкото по-просто, толкова по-добре, всичко повече от jQuery и 200 реда код за MuOnline сайт са напълни излишни!

Добре де, имате jQuery и 200 реда код... може и по-добре! Изтеглете minified версията на jQuery и минете вашите 200 реда код през Minifier, не е най-добрият, но пак върши работа:

За 400+ реда JavaScript
Input: 13.98 KB
Output: 5.50 KB

Render-blocking JavaScript... ко туй? JavaScript, който спира зареждането на страницата, решението е по-просто, отколкото си мислите! Преместете ЦЕЛИЯ JavaScript над затваращият body таг (</body>). Ако сте следвали по-горните стъпки трябва да имате 2 файла - единият на jQuery (ако е нужен), другият вашия JavaScript)

Добре де, jQuery и 200 реда, ама ми трябват и плъгини за jQuery-то?! Най-елегантното решение за мен (откъм скорост) е да се изтеглят всички плъгини, които ви трябват и да ги наблъскате в един файл (plugins.js примерно) minified, разбира се!

2. CSS
Използвайте minifier-a по-горе, за да смалите своят CSS. Препоръчително е да е в един файл!

За 9500 реда CSS
Input: 217.62 KB
Output: 153.89 KB

3. Изображения
Отворете всяко едно изображение с PhotoShop натиснете Ctrl+Shift+Alt+S или File -> Save for Web & Devices, изберете оптимални настройки (Качество/размер).

4. Компресия на целия сайт
G-Zip. Как да го пуснете, ако не е пуснат няма да ви уча, има немалко статии в Google по въпроса, това което ще ви кажа е как да го използвате. Пейстнете следния код в .htaccess файла в root директорията си:

<IfModule mod_headers.c>
    Header unset ETag
</IfModule>

FileETag None

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE application/x-font
    AddOutputFilterByType DEFLATE application/x-font-opentype
    AddOutputFilterByType DEFLATE application/x-font-otf
    AddOutputFilterByType DEFLATE application/x-font-truetype
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE font/opentype
    AddOutputFilterByType DEFLATE font/otf
    AddOutputFilterByType DEFLATE font/ttf
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE image/x-icon
    AddOutputFilterByType DEFLATE image/png
    AddOutputFilterByType DEFLATE image/jpeg
    AddOutputFilterByType DEFLATE image/jpg
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/xml

    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
    Header append Vary User-Agent
</IfModule>

<IfModule mod_expires.c>
    <FilesMatch "\.(jpg|jpeg|png|gif|swf|ico|flv|pdf)$">
        Header set Cache-Control "max-age=604800, public"
    </FilesMatch>

    <FilesMatch "\.(xml|txt)$">
        Header set Cache-Control "max-age=172800, proxy-revalidate"
    </FilesMatch>

    <FilesMatch "\.(html|htm|php)$">
        Header set Cache-Control "max-age=60, private, proxy-revalidate"
    </FilesMatch>
    
    ExpiresActive on
    ExpiresDefault                                      "access plus 1 month"

  # CSS
    ExpiresByType text/css                              "access plus 1 week"

  # Data interchange
    ExpiresByType application/json                      "access plus 0 seconds"
    ExpiresByType application/ld+json                   "access plus 0 seconds"
    ExpiresByType application/xml                       "access plus 0 seconds"
    ExpiresByType text/xml                              "access plus 0 seconds"

  # Favicon (cannot be renamed!) and cursor images
    ExpiresByType image/x-icon                          "access plus 1 week"

  # JavaScript files
    ExpiresByType text/javascript                       "access plus 1 week"
    ExpiresByType application/javascript                "access plus 1 week"
  
  # HTML
    ExpiresByType text/html                             "access plus 0 seconds"

  # Manifest files
    ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
    ExpiresByType text/cache-manifest                   "access plus 0 seconds"

  # Web feeds
    ExpiresByType application/atom+xml                  "access plus 1 hour"
    ExpiresByType application/rss+xml                   "access plus 1 hour"
</IfModule>

Компресиране на 153.89KB (горният CSS):
Gzip: 24.87 KB

Ако намерите информацията за полезна, с радост ще разширя урока!

Поздрави,
RaFa

 

[dota-sdso]

Тест

Резултат от бърза оптимизация на javascript-minimizirane na css без картинките:
82% => 94% (10%), ако се заиграя ще го направя 100%, но за Му не си струва. На RaFa урока работи на 100%...

В сравнение с Google.com е зле, но пък там има само 1 форма за търсене

https://gtmetrix.com/compare/ETkPeBab/XZNMnnD0/qNeywkrQ/zqNpmmCu

 

[RaFa]

Резултат от бърза оптимизация на javascript-minimizirane na css без картинките:
82% => 94% (10%), ако се заиграя ще го направя 100%, но за Му не си струва. На RaFa урока работи на 100%...
https://gtmetrix.com/reports/muplayring.com/ETkPeBab

Добре, че ме подсети... изпуснал съм за CSS-a

 

[dota-sdso]

Само да не компресират, ако не са го завършили. Затова най-добре оптимизацията най-накрая, като имаш готов завършен темплейт и завършен css да буташ само сървърната страна и ползваш готовите класове... ама то това сякаш само в мечтите се получава ;-)

 

[RaFa]

Само да не компресират, ако не са го завършили. Затова най-добре оптимизацията най-накрая, като имаш готов завършен темплейт и завършен css да буташ само сървърната страна и ползваш готовите класове... ама то това сякаш само в мечтите се получава ;-)

Може да кача и един урок за GruntJS - работиш си по нормалната версия на файловете, после ти набива JS-a в един файл, CSS-a в един файл, компресира ги (не просто минифайва) и забравяш за този проблем