Как стать автором
Обновить

Как я выполнял советы webo.in

Время на прочтение 4 мин
Количество просмотров 1.6K
Оптимизация grinkevich.by Сегодня изучал советы сервиса webo.in. Захотелось рассказать, что и как делал.


1. CSS-файлы можно уменьшить в размере. JS-файлы можно уменьшить в размере.

Не сильно они и большие у меня, но если можно, то ладно.

1. yuilibrary.com/downloads/#yuicompressor – скачал
2. >java -jar yuicompressor-2.4.2.jar main-src.js -o main.js
3. >java -jar yuicompressor-2.4.2.jar main-src.css -o main.css

Пункт первый готов.

2. Выносите javascript и CSS во внешние файлы.

Счетчик гугла надо спрятать в main.js. Не все работает, как хочется, пришлось читать разные тексты:

1. community.livejournal.com/ru_coding/243574.html
2. stevesouders.com/efws/script-onload.php
3. blog.andrewcantino.com/2008/11/23/replacement-for-script-onload-in-ie — здесь еще по теме, но мне достаточно было и предыдущего варианта. Не проверял, но в закладки добавил.

Итак, main.js пополнился такими строками:

function loadScript(url, onload)
{   s = document.createElement('script');
  s.setAttribute('type', 'text/javascript');
  s.setAttribute('src', url);

  s.onload = function() { // FF, Opera
    if (!s.onloadDone) // Opera
    {
      s.onloadDone = true;
      if (onload) onload();
    }
  };

  s.onreadystatechange = function() {
    if ( "loaded" === s.readyState && !s.onloadDone ) { // IE, Opera
      s.onloadDone = true;
      if (onload) onload();
    }
  }

  document.getElementsByTagName('head')[0].appendChild(s); }

function analytics()
{
  loadScript('http://www.google-analytics.com/ga.js',
    function()
    {       try {
        var pageTracker = _gat._getTracker("UA-2367900-6");

        pageTracker._addOrganic("mail.ru","q");
        pageTracker._addOrganic("rambler","query");
        pageTracker._addOrganic("webalta","q");
        pageTracker._addOrganic("aport","r");
        pageTracker._addOrganic("tut.by","query");
        pageTracker._addOrganic("all.by","query");

        pageTracker._initData();
        pageTracker._trackPageview();
        //alert(pageTracker); // Ok?
       } catch(err) {}     }
  ); }

Object.prototype.attachEvent = function (sEvent, fnHandler, bUseCapture) {
  this.addEventListener(sEvent.indexOf('on') == 0 ? sEvent.replace('on', '') : sEvent, fnHandler, bUseCapture);
}

window.attachEvent('onload', analytics, true);


* This source code was highlighted with Source Code Highlighter.

Убрал с одного места пару строк и добавил в другое в 10 раз больше, оптимизатор:) Изучил новые мини-трюки.

3. HTML-файлы могут быть уменьшены в размере. Не включено кеширование для статических файлов.

Получилась такая функция. Применяется после ob_get_contents();

function filterContent($data)
{   $data = preg_replace('#\s{2,}#', ' ', $data);
  $data = preg_replace('#<!--.+?-->#s', '', $data);
  return $data;
}


* This source code was highlighted with Source Code Highlighter.

В .htaccess:
# server-tuning.info/apache/content-compressing.html
AddOutputFilterByType DEFLATE text/html application/xhtml+xml text/plain text/xml \
               text/css application/x-javascript
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 env=!dont-vary

# studio.tellme.com/vxml2/ovw/perf/cache_apache13.html
<IfModule mod_expires.c>
 <FilesMatch "\.css$">
  ExpiresActive on
  ExpiresDefault "access plus 1 year"
  FileETag none
  </FilesMatch>
 <FilesMatch "\.js$">
  ExpiresActive on
  ExpiresDefault "access plus 1 year"
  FileETag none
  </FilesMatch>
</IfModule>


* This source code was highlighted with Source Code Highlighter.


Оптимизация grinkevich.by И все, сейчас такая пимпа у меня красуется. Остались вопросы.

1. Кто-нибудь расскажет как бороться с оставшимися двумя советами? Что-то терзают сомнения по поводу правильности добавления всего содержимого стилей и js на страницу из-за двух лишних запросов.

2. Почему у меня аж 166% возможного ускорения?

Мой сайт похож на google — такой же самый крутой))

UPD: обновил по наводке homm вырезалку комментариев.
FileETag none — 10x 2 volinrok
Теги:
Хабы:
+9
Комментарии 48
Комментарии Комментарии 48

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн