WebDuty » оптимизация http://webduty.ru Блог посвящённый веб-технологиям Tue, 10 Apr 2012 19:48:00 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Ускорение Google Analytics http://webduty.ru/%d1%83%d1%81%d0%ba%d0%be%d1%80%d0%b5%d0%bd%d0%b8%d0%b5-google-analytics.htm http://webduty.ru/%d1%83%d1%81%d0%ba%d0%be%d1%80%d0%b5%d0%bd%d0%b8%d0%b5-google-analytics.htm#comments Sun, 09 Aug 2009 13:04:02 +0000 admin http://webduty.ru/?p=862 3185410319_419a368b35_tЧто-то давно ничего не писал. Но на то есть свои причины – очень увлекся темой дорвеев, да и работы поднакопилось предостаточно. Итак, начнем.
Как вам наверно известно, Google Analytics – один из наиболее мощных сервисов для сбора статистики веб-сайта. Но у неё есть один огромный минус. Зачастую скрипт аналитики долго грузится и если размещать его в начале страницы (сразу после body) для более точных результатов, он не даёт грузиться элементам страницы, пока не загрузится сам. Это связано с тем, как устроен этот сервис.
Google Analytics загружает и выполняет некий Javascript-код ga.js, потом выполняет его, что и является сигналом того, что на сайт забрел очередной сервер. Так вот, загружая этот скрипт, он блокирует загрузку всего остального.
Сам Google Analytics Tracking Code выглядит так:

<!-- Google Analytics -->
<script type="text/javascript">
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
  try {
  var pageTracker = _gat._getTracker("UA-0000000-0");
  pageTracker._trackPageview();
  } catch(err) {}
</script>
<!-- Google Analytics -->

Для борьбы с этим изъяном и придумали небольшой jQuery-плагин под странным названием Geekga.

‘jquery.geekga.js’ jQuery-плагин

Файл jquery.geekga.js:

/*
 * jquery.geekga.js - jQuery plugin for Google Analytics
 *
 * This plugin extends jQuery with two new functions:
 *
 *   - $().geekGaTrackPage(account_id)
 *       Track a pageview.
 *
 *   - $().geekGaTrackEvent(category, action, label, value)
 *       Track an event with a category, action, label and value.
 *
 *
 * This code is in the public domain.
 *
 * Willem van Zyl
 * willem@geekology.co.za
 * http://www.geekology.co.za/blog/
 */
 
(function($) {
 
  var pageTracker;
 
  /**
   * Track a pageview, e.g.:
   *
   *   $().geekGaTrackPage('UA-0000000-0');
   */
  $.fn.geekGaTrackPage = function(account_id) {
 
    //check whether to use an unsecured or a ssl connection:
    var host = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    var src = host + 'google-analytics.com/ga.js';
 
    //load the Google Analytics javascript file:
    $.getScript(src, function() {
      if (typeof _gat != undefined) {
        //the ga.js file was loaded successfully, set the account id:
        pageTracker = _gat._getTracker(account_id);
 
        //track the pageview:
        pageTracker._trackPageview();
      }
      else {
        //the ga.js file wasn't loaded successfully:
        throw "Unable to load ga.js; _gat has not been defined.";
      }
    });
 
  };
 
  /**
   * Track an event, e.g.:
   *
   *   $('a.twitter').click(function() {
   *     $().geekGaTrackEvent('feed', 'click', 'Twitter', 'willemvzyl');
   *   });
   */
  $.fn.geekGaTrackEvent = function(category, action, label, value) {
 
    if (typeof pageTracker != undefined) {
      //the pageTracker was defined, track the event:
      pageTracker._trackEvent(category, action, label, value);
    } else {
      //the pageTracker wasn't defined:
      throw "Unable to track event; pageTracker has not been defined";
    }
 
  };
 
})(jQuery);

Использование плагина

Для начала подключим необходимые js-файлы: jQuery и сам плагин.

<html>
<head>
  <title>Hello, world!</title>
  <script src="javascript/jquery-1.3.2.min.js" type="text/javascript"></script>
  <script src="javascript/jquery.geekga.min.js" type="text/javascript"></script>
</head>
<body>
  <p>Hello, world!</p>
</body>
</html>

Затем укажем плагину ваш ID в аналитике Google’а:

<html>
<head>
  <title>Hello, world!</title>
  <script src="javascript/jquery-1.3.2.min.js" type="text/javascript"></script>
  <script src="javascript/jquery.geekga.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $().geekGaTrackPage('UA-0000000-0');
    });
  </script>
</head>
<body>
  <p>Hello, world!</p>
</body>
</html>

Где UA-0000000-0 – ваш ID.
Вот и всё. Мне в одном из проектов помогло, поможет и вам.
Cкачать плагин

889734416_06f014a237

]]> http://webduty.ru/%d1%83%d1%81%d0%ba%d0%be%d1%80%d0%b5%d0%bd%d0%b8%d0%b5-google-analytics.htm/feed 13 5 способов оптимизации CSS http://webduty.ru/5-way-css-optimization.htm http://webduty.ru/5-way-css-optimization.htm#comments Thu, 23 Jul 2009 15:02:53 +0000 admin http://webduty.ru/?p=751 Некоторые из нас, возможно, помнят времена, когда 30KB были рекомендованным максимумом размера веб-страницы, включая HTML, CSS, Javascript и изображения. На данный момент у многих достаточно больших сайтов только CSS-стили имеют размер более 30KB.
Но существуют некоторые принципы, которые помогут оптимизировать ваш CSS код. Оптимизация не просто уменьшает размер файла, она делает ваши CSS-стили более организованными и эффективными. Использование оптимальных методов CSS неизбежно приведет к уменьшению размера CSS-файлов.

1. Используйте сокращенные формы

Используйте сокращенные формы таких свойств как margin, border, padding, background, font, list-style. Это самый простой способ оптимизации CSS-стилей. Если вы ещё не применяете этот метод – начните сегодня.
Сокращенная форма означает, что вместо использования различных деклараций для соответствующих свойств…

   p { margin-top: 10px;  
        margin-right: 20px;  
        margin-bottom:  30px;  
        margin-left: 40px; }

… вы используете их комбинацию:

   p { margin: 10px 20px 30px 40px; }

Правила, по которым браузеры интерпретируют сокращенную запись показаны на следующих иллюстрациях.
css 1
Аналогичные правила выполняются для padding и border-weight.
По следующим правилам можно сократить свойство font
css 2
Это лишь два примера использования сокращенной формы CSS-свойств. Их использование сделает ваш код гораздо более кратким.
Более подробную информацию о сокращенной форме я нашел в этой статье. Возможно, я коснусь этого вопроса более подробно в своих следующих статьях.

2. Не используйте CSS-хаки

figureE
Вероятно, каждый человек, кто дочитал до этого пункта, хотя бы раз использовал CSS-хаки. Во многих случаях это достаточно удобно и эффективно. Но когда таких хаков становится несколько десятков, код становится очень “грязным” и менее понятным. В таких случаях удобнее использовать условные комментарии. Это общепринятая практика, рекомендуемая даже Microsoft (неудивительно, ведь в отношении их браузеров как правило используются хаки). Кроме того использование условных комментариев облегчит ваши CSS-файлы, т.к. современные браузеры не будут загружать хаки для отсталых.
Вот так можно подключить дополнительный файл ie6.css только в IE6:

 <!--[if IE 6]>  
     <link rel="stylesheet" type="text/css" href="ie6.css">  
 <![endif]-->

Вот несколько условных комментариев для IE:

<!--[if IE]> Инструкции для Internet Explorer <![endif]-->
<!--[if IE 5]> Инструкции для IE 5 <![endif]-->
<!--[if IE 5.0]> Инструкции для IE 5.0 <![endif]-->
<!--[if IE 5.5]> Инструкции для IE 5.5 <![endif]-->
<!--[if IE 6]> Инструкции для IE 6 <![endif]-->
<!--[if IE 7]> Инструкции для IE 7 <![endif]-->
<!--[if IE 8]> Инструкции для IE 8 <![endif]-->

В условных комментариях можно использовать операторы, с помощью которых можно задать более комплексное условие. В таблице ниже приведены все операторы.

Оператор Описание
lt меньше чем
lte меньше или равно
gt больше чем
gte больше или равно

И несколько примеров:

<!--[if ! IE 5]> Инструкции для  IE 5.5, 6 или 7 <![endif]-->
<!--[if gt IE 5.0]> Инструкции для IE 5.5, 6 или 7 <![endif]-->
<!--[if lte IE 5.5]> Инструкции для IE 5.0 или 5.5 <![endif]-->
<!--[if gte IE 6]> Инструкции для IE 6 или 7 <![endif]-->
<!--[if lt IE 7]> Инструкции для IE 5.0, 5.5 или 6 <![endif]-->
<!--[if lt IE 8]> Инструкции для IE до 8 <![endif]-->

Условные комментарии – хорошая альтернатива хакам. Помните, что меньше хаков – тем чище код.

3. Форматируйте ваш код

figureC
Правильное форматирование кода повысит его “читабельность” и ясность. Здесь существует два подхода: писать каждое CSS-свойство с новой строки..

p { margin-top: 10px;
     text-indent: 15px; }

..либо писать всё в одну строку, разделяя свойства пробелами:

p { margin-top: 10px; text-indent: 15px; }

Тут каждый выбирает для себя. Например я, как правило, пишу в одну строчку. Разрешение моего монитора позволяет легко читать такой код. Кроме того, в этом случае существенно уменьшается размер CSS-файла и количество телодвижений при написании кода, что очень важно при достаточно объемных стилях.
Решать вам, но помните, что пробелы как воздух – вы их не видите, но они есть и имеют свой вес. Меньше лишних символов – меньше файл.

4. Используйте CSS-библиотеки и Reset

figureF
О CSS-библиотеках я уже писал в своей статье. Суть здесь в том, что из проекта в проект вы, зачастую, пишите практически идентичные блоки кода, решая локальные задачи. Будь то стили для отображения текста, верстка многоколонного дизайна, и т.п. Чтобы не писать несколько раз то, что давно уже написано до вас ведущими специалистами в этой области, используют CSS-библиотеки.
Самыми распространенными из них считаются библиотеки для сброса стилей. Например YUI Grid CSS или Reset.css Эрика Маера. Они помогают нейтрализовать настройки браузера “по умолчанию”, как бы сбросить стили.
Стоит заметить, что сами CSS-библиотеки иногда могут нуждаться в оптимизации. Например, вы знаете что на вашем сайте о кулинарии никогда не будут использоваться теги pre и code, значит их стили можно убрать из используемых CSS-библиотек.
Используйте CSS-библиотеки только если они существенно сократят время разработки, иначе они превратятся в ненужный груз.

5. Сжимайте код

Существует несколько программ для сжатия CSS-файлов, например CSSTidy или YUI Compressor. Есть также и онлайн аналоги. Один из них вы можете использовать на моём сайте. Подобные программы сжимают CSS-стили, убирая из них лишние символы (пробелы, табуляции), преобразуют некоторые свойства в сокращенную форму и многое другое.
Некоторые специализированные текстовые редакторы умеют сжимать CSS-стили, например BBEdit, TextMate или TopStyle. Также можно сжимать файлы на стороне сервера с помощью PHP. В следующих статьях будет более полный список средств для сжатия и оптимизации CSS.

Заключение

Чистый и оптимизированный CSS-код важен не только для веса ваших стилей, но и для поддержания его удобочитаемости. Принципы, упомянутые выше, помогут уменьшить объем стилей, повысить ясность и чистоту кода и сэкономить время на его разработку.


В статье использованы материалы smashingmagazine.com
Progg it

]]> http://webduty.ru/5-way-css-optimization.htm/feed 3