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

    Оптимизация 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
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 48

      0
      preg_replace('#<!--[^>]+>#', '', $data);
      а жадный квалификатор разве не съедает все от первого комментария до последнего тега?
      preg_replace('#<!--.+?-->#', '', $data);
      Так не лучше?
        0
        не, не съедает
        он работает до закрывающейся скобки треугольной. а она только в конце комментария
          +1
          Да, что-то я затупил про съедает. Но зато ваш регексп вырежет не весь комментарий, если внутри него будет закрывающая треугольная скобка
          <!-- эта часть вырежется > а эта часть попадет прямо в код -->
            +1
            мда я что-то тоже морознул) вписал ваш точный вариант
            странно что я его часто видел, а тут свое кривое что-то вписал)
              0
              Кроме того, такой регэксп не удалит многострочные комментарии.

              Я бы воспользовался таким:
              <!--[\s\S]*?-->
              (возможно, что профи регэкспов закидают меня помидорами, но он работает, это я знаю точно:))
                +1
                А ваш код не равен
                <!--.*?-->
                  0
                  (Это вопрос)
          0
          В любом случае, если вы пишете скрипты и CSS «по-старинке», или «правильно»:

          <script ...><!--

          alert("Hello world!");

          //--></script>


          Вырезание комментариев таким регекспом может вызывать потерю значимого кода.
            +3
            а мы все скрипты вынесли в main.js :)
          +1
          Согласно YSlow помимо использования CDN еще нужно сконфигурировать ETags для JS/CSS файлов.

          — There are 2 components with misconfigured ETags

          * www.grinkevich.by/styles/main.css
          * www.grinkevich.by/scripts/main.js

          Entity tags (ETags) are a mechanism web servers and the browser use to determine whether a component in the browser's cache matches one on the origin server. Since ETags are typically constructed using attributes that make them unique to a specific server hosting a site, the tags will not match when a browser gets the original component from one server and later tries to validate that component on a different server.
            0
            Спасибо! ETags вписал как надо, а вот с CDN еще предстоит разобраться.
              +1
              CDN для такого сайта и не нужен.

              Вообще очень рекомендую почитать blog.stackoverflow.com. Много интересной информации о оптимизации большого проекта.

              Например вот здесь много полезного:
              blog.stackoverflow.com/2009/08/a-few-speed-improvements/
                0
                Спасибо! Добавил в читалку, буду изучать
            0
            > Выносите javascript и CSS во внешние файлы.
            Разве лишнее подключение к серверу (загрузка внешнего файл) ускоряет загрузку страницы?
              0
              так они раз попадут в кэш и не надо будет к каждой странице
              дополнительно приписывать по 10-15-30… Кб мусора. уверен, что ускоряет :)
                0
                Хотя там наверно таким образом решалась задача не оптимизации скорости загрузки страницы, а нагрузки на сервер.
                  0
                  Извиняйте, за сбитую хронологию сообщений. Поздно уже — руки плохо работают.)
              0
              Тоже логично. Но наверное это не абсолютное решение. К примеру, главная страница яндекса — там почти все включено в один файл.
                +2
                Ммм, прежде чем оптимизировать неплохо бы замерить и понять надо ли :)
                Оптимизация ради оптимизации — это всего лишь хороших способ пораскидать кнопочки по сайтам.
                  0
                  для данного проекта и не факт, что надо было
                  это тренировка. а тест webo.in показал, что чего-то да и наоптимизировал :)
                  да и самому заметно. мелочь, а приятно)
                  +4
                  хоспади…
                    +1
                    И это говорит создатель webo.in? :)
                    +2
                    ахаха, круто
                    вы вынесли весь JS в один файл (чем плохо в двух?), но зато понаписали кучу кода для того, чтобы второй js-файл работал в первом js-файле
                    имхо, это уже клиника
                    я не вижу никакого роста производительности в том, что вместо 124 запросов на сервер будет 125
                      0
                      Это вы про аналитикс? Там дело не в запросах, а в том, что он периодически тормозит, и если скрипт подгружается inline, то вместе с ним тормозит и рендеринг страницы. Даже если он стоит перед </body>, то скрипт не даст сработать событию onload пока не протормозится.
                        0
                        в чем сложность перенести скрипт с гугла на ваш сервер? я не знаю, будет ли он работать, но по идее должен, если у гугла не стоит проверка на реферер
                        просто опять же дело не в скрипте от гугла, дело в том, что сделал автор топика — сделал мотоцикл, чтобы запустить велосипед
                        кстати, сколько себя помню — ни разу не тормозил скрипт GA
                          0
                          я думал его перенести себе, но здесь www.google-analytics.com/ga.js:
                          Last-Modified Sat, 12 Sep 2009 00:35:39 GMT
                          то есть нужно было бы еще и обновлять у себя его регулярно
                          а моей велик на мотоцикле сейчас летаей ой-йой-йой))
                            +1
                            несколько раз встречал при просмотре сайтов, ожидание запросов к GA
                            0
                            кстати, вы уж меня извините, но мне кажется, что с серверов Гугла грузится не менее надежно, а может даже и более надежно, чем с вашего хостинга
                              0
                              А никто и не говорит про надежность. Речь про скорость доступа. GA подтормаживает. Нечасто, но может протормозить и пару секунд.

                              Переносить на свой сервер я не предлагал, это скорее всего противоречит EULA. А вот вынести в onload вместо inline — вполне разумное решение.
                                0
                                про onload вы правы
                                  0
                                  Собственно, автор в топике это и сделал.
                          +2
                          Знаете толк в извращениях…
                            0
                            Слишком длинная и сложная статья. Надо было сократить до «Как я скачал и запустил yuicompressor».
                            • НЛО прилетело и опубликовало эту надпись здесь
                                0
                                нене. еще есть цели:
                                1. веб-сайт полностью посещает пару млрд. человек
                                2. веб-сайт полностью приводит тысячи клиентов
                                3. веб-сайт полностью сделал работников компании миллиардерами
                                ну и тому подобное. есть к чему стремиться :)
                                  0
                                  Оптимизировано всё, что можно кроме GA — 85/82 и возможное ускорение по оценке сервиса 10%, на этом счел свою миссию завершенной
                                    0
                                    нене, вы не поняли… там еще замечания есть ))
                                    «Загружается более 1 фонового изображения.»
                                    «Размер фоновых изображений очень большой.»
                                    «Загружается более 1 картинки.» о_О
                                    короче, оптимизируйте xD
                                      0
                                      webo.in/ все равно лучше оптимизирован :)
                                      0
                                      И это блин, самый крупный форум в Казахстане — хотя есть плюс, ему есть куда стремиться, со своим то 1430%
                                        0
                                        Это же Центр Тяжести :)
                                        0
                                        Вот если бы у вас в результате этих манипуляций показатель отказов уменьшился вдвое, вдвое выросли продажи, а трудоемкость поддержки и разработки сайта почти не увеличилась бы — это был бы реальный плюс =)
                                          0
                                          что-то не уверен, что для данного случая это реальный плюс :)
                                          0
                                          Вчера только читал рекомендации «Разгони свой сайт» Николая Мациевского, там написано что не всегда архиваторы так хороши. Связано с тем что если js или css архивировать, то полная время получения файла будет равна времени на скачивание+время на разархивацию. Поэтому надо решить для себя каким каналом интернета пользуются ваши клиенты, и возможно лучше просто отдавать файлы уменьшенного размера. уменьшить можно с помощью CSS Minifier(http://www.artofscaling.com/css-minifier/) например.
                                            0
                                            YUICompressor ж вроде не «архивирует». CSS он просто сжимает, а в JS еще и локальные переменные переименовывает из, например, myLocalVar в m.

                                            Может под-архивацией подразумевается gzip-сжатие на серваке.
                                            0
                                            По поводу FileETag-ов, не лучше ли будет использовать «FileETag MTime Size»?
                                              0
                                              YSlow сказал, что не лучше)
                                              0
                                              или даже можно так )))
                                                0
                                                <ifmodule mod_expires.c>
                                                <filesmatch "\.(ico|jpg|gif|png|css|js)$">
                                                ExpiresActive on
                                                ExpiresDefault «access plus 1 year»
                                                FileETag MTime Size

                                              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                              Самое читаемое