Оптимизиране на сайт с един прост скрипт

Един сериозен недостатък на WordPress и други подобни системи с отворен код е, че се допълват от страшно много хора. Като прибавим plugin-и и темплейти, сайта може да стане доста тежък и труден за оптимизиране. Миналата седмица споменах в Twitter, че използвам един доста прост скрипт, който намалява поне размера на ресурсите. Специално за WordPress може да използват доста добавки за кеширане на страниците и gzip-ване на скриптовете. Проблемът им обаче е, че не работят с всички темплейти.

Скрипта, който написах, е алтернативно решение. Използвам го както за блога ми, така и за Lipsva.com, Crime.bg и FairElection.eu. Той открива всички js и css файлове в сайта и ги gzip-ва. Който не знае – това е зипване или архивиране. Така размерът им се намалява с между 60 и 80%, а от там и общия размер на данните, които посетителите ви трябва да свалят, за да видя сайта. Другата част от работата се върши от .htaccess файла, който се поставя в основната папка на сайта. Той добавя различни настройки, които указват на браузъра на посетителите да пазят тези файлове по-дълго, за да не се налага да ги обновяват често. Същото се прави и за снимките, така че при всяко следващо посещение ще се ускори както скоростта на сайта, така и ще се намали трафика ви.

Двата файла може да свалите от тук. Сложете файла в основната папка или в подпапка. Има четири настройки. Първата е тайна дума, която да подавате, за да пуснете архиватора. Това е проста форма на сигурност. Втората е дали да архивира HTML страници. Това е препоръчително, ако те са статични, а не се генерират автоматично. Третата настройка е пътя към основната папка. Това ще е нещо от типа „/home/ime_na_saita„. Ако не я знаете, сложете „.“ или „..“, ако сте сложили скрипта в подпапка. Последната настройка е в кои подпапки да се търси за JS, CSS и HTML страници. Тук може да изброите местата където е темата ви, споделени скритове и прочие. Другият файл .htaccess трябва да копирате в основната папка, за да важи за целя сайт. Ако вече имате такъв файл, добавете съдържанието на този в края на вече съществуващия.

За да се създаде архивирането, извикайте скрипта с кода, който сте задали. Например „http://adresa_na_saita.com/pack.php?code=sekretno„. Ще се отпечатат всички архивирани файлове, заедно с това колко е намален общия им размер. Когато правите промени по сайта си (уточнение), ще трябва да го извикате пак, за да се генерира архива, като ще се gzip-нат само обновените файлове. С добавен аргумент „force“ като „pack.php?code=sekretno&force“ ще регенерирате всички наново.

Ако вече използвате добавки за кеширане трябва да сте внимателни обаче. Възможно е този скрипт да си пречи с тях. Затова направете резервно копие на вече съществуващия .htaccess, за да може да го възстановите, ако има проблеми. Хубавото на този скрипт е, че не прави промени по самите скриптове, а създава архивни копия до тях. Всеки път, когато някой отвори сайта ви, .htaccess правилата го пренасочват към gzip-натите копия. При снимките към се добавя правило, че важат за следващите 6 месеца и браузъра на посетителите не трябва да ги сваля за този период.

Ето и малко статистика. В случая с Crime.bg, общия размер на файловете беше намален с 77%. При FairElections.eu – 80%. Тези две платформи работят с платформата Ushahidi, където има система за кеширане, но не и на скриптове и стилове. Така сайтовете се ускориха като време за зареждане с поне 50%. При този блог направих и други оптимизации, които намалиха размера на файловете с 90% и го ускориха почти 2.5 пъти. Ако разбирате от PHP и сте уверени да променяте темата си, ето три стъпки как да го направите и вие:

  • Комбиниране на JS и CSS файлове. Може да обедините всички скриптове в един и той да се gzip–не. Така ще има само една заявка, а не 10-15 както обикновено.
  • Сложете JS скриптовете в края на страницата. Това ускорява много зарежането, но е опасно, ако в самия код на страницата има скриптове, които зависят от външните ресурси – примерно jQuery.
  • Обединете снимките в sprit-ове. Това означава всички малки снимки и иконки, които са нужни за темата ви, да са в един файл. Това изисква сериозни промени по css–а на темата, но също намалява неимоверно скоростта за зареждане и размера на снимките. Ето един от sprite-овете на блога ми.
  • Това са няколко от най-основние идеи. Най-важното е, че каквито и промени да правите, бъдете сигурни, че сте направили резервно копие на сайта и може да го възстановите при проблем. Ако имате още такива идеи, ще се радвам да ги споделите.

    19 коментара

    1. Pingback: Heihachi Mishima
    2. Pingback: супермедец
    3. Pingback: ecogarden.bg
    4. Pingback: ecogarden.bg
    5. Pingback: Озеленяване
    6. Pingback: ecogarden.bg
    7. Благодаря! Ще го тествам, защото подобно нещо е от изключителна полза на такива като мен с нулеви знания за кодиране. Прав си, че има много добавки за кеширане, но няма читава именно за js и css. Пробвах прехваления minify и резултата беше покачване два пъти на времето на зареждане…
      Само един въпрос: Под „промени“ имаш предвид, че след всеки пост трябва да се вика скрипта или ако е правена промяна в дизайна?

    8. Pingback: Boris
    9. @Борис – не, ще трябва да го уточня горе. Става дума само за промени в самите JS и CSS файлове – примерно като правиш промени по външния вид на страницата или инсталираш добавки, които имат JS и CSS файлове. Тогава само трябва да се включва отново пакетиращия скрипт.

    10. Други трикове са:
      Намаляване на броя на js файловете и css файловете. Ползване на CDN, т.е. всеки статичен елемент по възможност идва от различен сървър и така броя заявки към единичен съръвър намалява. Този блог има 19 js файла и 5 css-a, който могат да се обединят. В htaccessa expires headers- Yahoo слагат дати след 10 години и при нужда за обновяване сменят името на файл. Както и ETag-овете за статичните компоненти. Общо взето много може да се говори по темата… 🙂

    11. На мен даде следната грешка.
      Parse error: syntax error, unexpected T_BOOLEAN_OR, expecting ‘,’ or ‘)’ in /home/elpak/public_html/ime-na-sajt/pack.php on line 4
      Как може да се поправи?

    12. Да, възможно е и мисля, че съм го споменал горе. Използвам ги само за самостоятелни сайтове, за да мога лесно да ги компресирам.

    13. На първо място да питам дали всичко е наред по файловете и работят ли още?
      И на второ място – ако използвам за кеширане плъгина Hyper Cache Extended дали може да има проблеми. Естествено питам само ако имаш информация. Иначе прочетох, че е вероятно да има конфликт между двата 🙂

    14. Даде ми грешка

      Parse error: syntax error, unexpected ‘{‘ in /home/simmods/public_html/pack.php on line 4

      Как може да се оправи

    Вашият коментар

    Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

    Този сайт използва Akismet за намаляване на спама. Научете как се обработват данните ви за коментари.