Hello,

I wonder how to get better performance (i.e. with smaller CSS and better semantics).

The first thing common to every adaptative theme is that when I use the theme.css provided with the module, in the end my css code is full with loads of empty selectors (I mean these : .anything {}) even after aggregating the css files. I have noticed with Yslow that it's actually the same there : http://adaptivethemes.com/
Is there any way to get rid of them all or do I have to erase or comment all the unused selectors ?

The second point is that I have way too much dom elements (around 2000 !) I definitely have to simplify my markup and wonder if there are some well known clues to be aware of ?
I have read the short doc in Yslow http://developer.yahoo.com/performance/rules.html#min_dom
I see that panels makes use of a lot of divs, so does views and even the pane-header.tpl.php provided with the theme. Do I have to make custom panels layouts with less divs to solve this ? I use views semantics but it seems to me that there's no such thing available with panels.

For anonymous users that's not a big deal as boost module helps me, but for authentified users my page takes too much time loading.

Comments

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented

Regarding CSS, what I usually do is copy/renmave theme.css to theme-dev.css and do all my CSS development in this file - then when I am done with the development I run it through http://www.cleancss.com to remove all the comments and empty selectors and that becomes my live CSS (which I paste into theme.css and unset the theme-dev.css file).

Regarding panels and excessive markup - you are correct that you really have to build your own panel layouts if you want to change the markup to a significant degree.

The sad truth is that when you build sites with CCK, Views and Panels and you want semantically rich and lightweight markup you have to do a lot of work to achieve this.

Jerome F’s picture

Jerome F CreditAttribution: Jerome F commented
Status: Active » Fixed

Thank you for this usefull tip regarding CSS. Just as I expected, there's a lot of pure coding to get lightweight markup. Well I guess you can't expect both functionnality / flexibility and performance / rich semantics, unless you've got time to work on it. It' funny that the only thing the client notices is that it takes time for a page to load.

Jerome F’s picture

Jerome F CreditAttribution: Jerome F commented

I found very usefull to change the panes style in panel pages content and use "no markup at all" when pane and pane content divs aren't usefull. There's also a style selection on each panel. In addition to views semantics that helped a lot.

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented

Yep, thats a good point about the "no markup at all" setting, feel free to leave any other tips you have also, I'm always keen to hear new ideas about fast ways to cleanup output.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Jerome F’s picture

Jerome F CreditAttribution: Jerome F commented
Status: Closed (fixed) » Active

Hi,

I ended up using a style in panels that is basically a no markup at all style + a wrapping div with classes and id and the pane title if there is one available.

<?php
// $Id: semantics-pane.inc,v 1.0 Jerome Fritsch Elephant studios $

/**
 * @file
 * Definition of the 'semantics' pane style.
 */

// Plugin definition
$plugin = array(
  'title' => t('Semantics'),
  'description' => t('Presents the panes with wrapper div (include id and class)'),
  'render pane' => 'example_panels_everywhere_semantics_style_render_pane',
);

/**
 * Render callback.
 *
 * @ingroup themeable
 */

function theme_example_panels_everywhere_semantics_style_render_pane($content, $pane, $display) {
  $output = '';
  
  if ($content) {  
      
      $idstr = $classstr = $panetitle = '';
      if (!empty($content->css_id)) {
        $idstr = ' id="'. $content->css_id .'"';
      }
      if (!empty($content->css_class)) {
        $classstr = ' '.$content->css_class.'';
      }
      if (!empty($content->title)) {
          $panetitle = '<h2 class="pane-title">'.$content->title.'</h2>';
        }
      
      
      $output = '
      <div '.$idstr.' class="panel-pane'.$classstr.'">'.$panetitle.' '.$content->content.'</div>
      ';}
      
      return $output;

}

This is usefull as it is lighter than the deafult style and provides classes for styling.
I have also seen that the theme settings in AT provides some classes that can be usefull in views, cck, etc.

Jerome F’s picture

Jerome F CreditAttribution: Jerome F commented
Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.