test
Viewing 15 posts - 16 through 30 (of 38 total)
  • Author
    Posts
  • Arvind Chauhan Moderator
    #297032

    First of all, congrats for having able to put the css on top and jss at the bottom of page. Not many can achieve that with their templates. I am glad to see your results.

    The answer to the reaction time is becuase broswer is waiting for loading your html page :

    If you go through the results in http://analyze.websiteoptimization.com. The HTML size is 80307 bytes taking 16 secs (@56 K). This seems to be in accordance with the two screenshots you have attached with your post.

    The reaction time is to download your HTML page. Thats the first thing browser requests the server.

    As you are aware that Joomla has to ask mysql what all is required to show or hide from the user (access level) based on the each request. Its as good as joomla makes a new page based on request and access level before displaying. When you enable cache, most of the cached portions of the web are thrown in directly from the cache.

    I do appreciate your security concerns about your site. But i can certainly bring down the time down significantly. If all goes well it would be difficult for you also to believe. FTP access is required for that though.
    <blockquote>
    Up to 60441 bytes could have been saved through compression. </blockquote>

    I can demonstrate to save those bytes and also compress and enable seondary cache using minify (google code) to have the results.

    imsleepy Friend
    #297041

    <em>@drarvindc 119013 wrote:</em><blockquote>Sorry took me long to reply :

    Just to clear some point :

    I did suggest placing css on top and JS at the bottom of page. But this suggestion was based on my research from joomla forums and google. I personally have not been able to pull it off fully myself.

    • I do stand by calling multiple css files in one command and same with js. But it gets difficult when planning to call the files from different folders.
    • The first step and easiest is to call css files or js files originating from a common folder. Only requires editing the index.php of template.
    • To call multiple css files from various folders together may involve editing multiple files to correct the moved file’s path.

    Css sprites, combining css together or combining js together is for advanced Joomla guys. Hacking files to make these work also necessitates keeping a track of files changed and blocks changed. Keeping track of such files / blocks for so many sites isn’t all that practical.

    The Steps which i fully understand, employs, support and Recommend are as follows :

    • Removal of unwanted / unused entries from css files (especially template.css and typo.css)
    • Optimization of CSS and Compression of JS (using online tools).
    • Assessment and removal of expendable modules.
    • If using JCE, avoid JCE Utilities plugin. (that adds additional JS, CSS and increases HTTP request by over 15 and may be 25 at times).
    • Deploy minify (google code). It works great.

    This may please be read along with my first post, so as to ascertain what can work or what may not work on your sites. Always remember to take backups of files before you explore / exploit them.</blockquote>

    I have a question about combining the css and js files.

    When all of the css files are combined to one file, obviously I would change this information in the head of the page to reflect the file name, but aren’t there many many pages in the site that call up these different css files? Same question with the js files. Is there an easy way to find out which files call up these different css and js files or does one simply have to go through the hundreds of files in Joomla to find all of these instances?

    What is the best way to do this?

    imsleepy Friend
    #297043

    <em>@drarvindc 119092 wrote:</em><blockquote>

    As you are aware that Joomla has to ask mysql what all is required to show or hide from the user (access level) based on the each request. Its as good as joomla makes a new page based on request and access level before displaying. When you enable cache, most of the cached portions of the web are thrown in directly from the cache. </blockquote>

    Regarding users. If a site only has a super admin and no other users, can something be done to change this so it loads faster? I am working on two sites that don’t even have the login form displayed because they are just information websites and will not have additional users.

    cgc0202 Friend
    #297050

    <em>@drarvindc 119018 wrote:</em><blockquote>Regarding your question 1.

    I myself wasnt sure of answer to this and so i did consult my Joomla friends about this, they also feel that these missing Divs / tags, should pose a very little performance issue (but layout problems may be evident), when compared with missing image.

    Question 2.
    Regarding your questions on Javascripts, i can try to help. Dont bother about being silly. here everyone is naked in shower. Cant learn till we bang our heads.

    My objective while optimizing joomla for speed are limited :
    1. Minimum editing of files.
    2. Increase site speed by atleast 20-40 %. I use the gmail as benchmark – my sites should not take more time then the time taken to open the gmail inbox.
    3. Decrease http requests as much as possible to decrease server load. It is must for me as, i have once received email from my hosting company asking me to cut down on server load.

    Put in your questions and lets see, if i cant answer someone else will surely do.</blockquote>

    HI drarvindc,

    The topic of optimization is rather quite complex. It is difficult to lump them all in one thread.

    So, I went through the index.php and isolated the javascripts. I placed them into three groups, and have quite a few questions that need clarification in this thread.


    Javascripts and Optimization

    http://www.joomlart.com/forums/topic/javascripts-and-optimization/

    I will try to do the same with CSS, also a separate thread, but would ask some of them here, since Camillo already have shown some of them.

    I will try to keep each response to one very specific issue, so there will be so many of them.

    Thanks.

    Cornelio

    N.B.

    cgc0202 Friend
    #297068

    <em>@imsleepy 119102 wrote:</em><blockquote>I have a question about combining the css and js files.

    When all of the css files are combined to one file, obviously I would change this information in the head of the page to reflect the file name, but aren’t there many many pages in the site that call up these different css files? Same question with the js files. Is there an easy way to find out which files call up these different css and js files or does one simply have to go through the hundreds of files in Joomla to find all of these instances?

    What is the best way to do this?</blockquote>

    Hi imsleepy,

    There is no fast simple answer for this, from what I read and understood so far. Usually, it is a compromise, especially in modular based CMS or any complex site.

    If you look at the CSS files of many commercial online newspapers and magazine, BBC, New York Times, etc. you will find that they have quite a few CSS files being called — perhaps more than Joomla-Joomlart , and yet they load quite fast (part of the difference is the speed of server)..

    Web design considerations

    From what I read, one reason why CSS files are kept separate for some specific functions is that in terms of the conceptual design (if you were the one who did the scripting, it is far easier to look at few related CSS tags on one file, let say a module — for JA Hot Topic, Ja News, etc.

    Portability

    Moreover, these modules are not called all the time. For example, the JA News Frontpage, as the name says is mainly in the Frontpage. So, there is no need to wade through the CSS tags associated with the Frontpage only.

    Moreover, from the point of view of companies like Joomlart, the designer of a specific template might decide not to use a specific module, and thus also the corresponding CSS associated with the module.

    The trouble is that if you have a very complex CMS, like TikiWiki, where the CSS is unified, as much as 64Kb, you have go through the entire labyrinth to remove those that you do not need. Then there is the issue of what if the other modules also used the same CSS tags?

    It’s almost tax time here in the US, imagine the difficulty of finding all the documents you needed to file your income tax returns, if the documents needed were all over the place.

    That is why, there is a separate template.css for the more commonly used CSS tags.

    Modularity versus design considerations

    As the webdesign layout becomes more complex, there might be repetition in the tags that might be quite related in two aspects CSS tags associated with layout specifications, those associated with text specifications, and others like images..

    Note that if there is a unified design strategy from the beginning, the same tags may be used for different situations. The concept here is that the less the number of CSS tags defined the faster the website will be.

    And, sometimes, it has to do with choices, lets take the case of color, size, lower/uppercase/first capitalized, for example. when defining the attributes of a text. The more colors and sizes you use.

    If you examine the CSS files of the Teline II for example, you will find that there might be some CSS tags that are legacy, or in some cases just commented out. It would have been better if they have been removed if they are not used. Imagine bringing your entire wardrobe when yhou go out of country because you cannot decide what to wear.. But, imagine if you did not bring the correct attire either.

    I am not sure if Joomla or Joomlart started with specifically designed CSS systems to minimize the number of CSS tags created.

    Cornelio

    imsleepy Friend
    #297070

    Thank you so much for this! It never occurred to me that there might be css tags throught the css files that are duplicated or not in use. I have in the past run across duplicate tags when I was trying to change a color or something but it would not change then I found the duplicate and changed both… when in fact, all I probably had to do was eliminate one.

    I think before I try to combine them, I will simply compare them and clean them up a bit. I can see how this could happen with so many different people working on the Joomla core files and probably several working on the JA files. And then of course, when in a hurry designing a new template, you might just copy everthing over and make changes and additions as needed and not notice duplicates etc.

    imsleepy Friend
    #297071

    Does it make the site faster if modules and plugins not being used are uninstalled rather than just turned off?

    cgc0202 Friend
    #297078

    <em>@imsleepy 119137 wrote:</em><blockquote>Thank you so much for this! It never occurred to me that there might be css tags throught the css files that are duplicated or not in use. I have in the past run across duplicate tags when I was trying to change a color or something but it would not change then I found the duplicate and changed both… when in fact, all I probably had to do was eliminate one.

    I think before I try to combine them, I will simply compare them and clean them up a bit. I can see how this could happen with so many different people working on the Joomla core files and probably several working on the JA files. And then of course, when in a hurry designing a new template, you might just copy everthing over and make changes and additions as needed and not notice duplicates etc.</blockquote>

    Hi imsleepy,

    I assume you are very careful when you do this, that they are exactly the same, because what might appear quite similar usually have different uses, or have different functions in the layouting. I am sure you know the basics. like this:

    #ja_tag
    div.ja_tag
    .ja_tag
    .ja_tag a or .ja_tag h1

    are not redundant. It took me several years before I got the confidence to touch a CSS file and modify it.

    Joomlart uses a more complex set of CSS tags, or actually seem to have the same tags repeated but they are refining some layout specifications. Until now, there are some tags I do not fully understand.

    Right now, I am more concerned with tags without any CSS definition. So, I create them based on the idea that the server will go bonkers looking for it. “Where’s my watch? where’s my watch?” — if we make the human analogy. On the other hand, if you have two sets of slippers, it won’t hurt as much — unless of course you decide to have one in every corner of your house.

    At least that is how I view things, from my experience in every day life.

    Cornelio

    cgc0202 Friend
    #297082

    <em>@imsleepy 119138 wrote:</em><blockquote>Does it make the site faster if modules and plugins not being used are uninstalled rather than just turned off?</blockquote>

    I have read quite a people suggest you do. The analogy is that so much clutter affects you, even in real life. Thus, while I use the QuickStart Kit, when I already populated my Sections and Categories, I not only unpublish all the articles.

    The only problem here is that in the case of Modules sometimes you find out that you found something use fpr it.

    For example, I used to ignore the Hot Topic because it looks like just another one of those “whistles and bells”. Then, I found out the Hot Topic could be made horizontal and can be randomized. It is also dynamic and you can also choose what categories to include in there. Also clicking a Hot Topic image leads to actual articles.

    If you take all the aforementioned features together, for lack of better choices in Joomlart, the Hot Topic can be used as a very powerful navigational tool — much more than the Latest or Popular — because with proper use, you can let your visitors get acquainted with articles that might have been burried otherwise — because they may not be the latest nor the most popular.

    There are key feature pf Hot Topic to bear in mind: the fact that you can select the categories to add in there, and clone it (for as many as you want, as well as the ability to select where the module may be visitble (or not), only your imagination now limits how it can help you highlight specific Sections and categories.

    In this sense, the Hot Topic module, as far as I am concerned, is more useful than the HighSlide, as configured now.

    Cornelio

    cgc0202 Friend
    #297604

    For some reason, some of the thumb rules that we are discussing here seem to fly in the face of how fast the Yahoo home page

    http://www.yahoo.com/

    Website Optimization
    http://www.websiteoptimization.com/services/analyze/

    it takes 0.20 seconds (T1) to 0.38 seconds (14.4) to load. In spite of the fact that it has gazillion javascripts at the top and all over the place.

    What is sure though is that Yahoo placed everything on the “index file” — including the entire css script (no calling for other files), javascripts, as well as “all???” other scripts needed to create the page — no calling of outside modules to define any section of the Home page.

    I read one of their researchers, who did in-depth study of site optimization and they indeed talked about “automated” integrator to compile a page.

    If you look at the Page Source of the Yahoo page, it is very long. Unless it is server-based compression, there seem to be no stripping of the “index” file with comments or even white spaces.

    What I found odd in the analysis is the summary report:

    Diagnosis

    Global Statistics

    Total HTTP Requests: 1
    Total Size: 226 bytes
    Object Size Totals

    Object type Size (bytes) Download @ 56K (seconds) Download @ T1 (seconds)
    HTML: 226 0.25 0.20
    HTML Images: 0 0.00 0.00
    CSS Images: 0 0.00 0.00
    Total Images: 0 0 0
    Javascript: 0 0.00 0.00
    CSS: 0 0.00 0.00
    Multimedia: 0 0.00 0.00
    Other: 0 0.00 0.00
    External Objects

    External Object QTY
    Total HTML: 1
    Total HTML Images: 0
    Total CSS Images: 0
    Total Images: 0
    Total Scripts: 0
    Total CSS imports: 0
    Total Frames: 0
    Total Iframes: 0

    How can it be zero other objects and the single html totaled only 226 bytes? The Yahoo homepage uses a gazillion icons and even more complex set of Tabs, multimedia and numerour images, ads, etc. — more complex than any Teline II page shown here??? Why does the report say zero (html and css) images, when there were quite a few of them??? Almost all the contents of the Home page also come from “integration of news” from outside sources, to be dynamic, and yet the summary shows zero, on all these.

    How does Yahoo (and I believe Google) achieve such speed?

    Anyway, I did remember the take home lesson of what the guy summarized to be the rule in optimization — integration.

    This is not the case with Joomla and the Joomlart templates. To ease the process of inclusion of extensions from other sources, the extensions are included in the form of modules and components — that must be called (no full integration) in order to be “included in what appears in a Joomla page”. There is no full integration to a single page, as Yahoo apparently did????

    I would be interested to know the actual reason from more experienced programmers — but based from what I understood with what Yahoo did — the modular nature of the Joomla-Joomlart created page, is at the heart of the problem of the slow Joomla pages, especially the way Joomla 1.5.x was configured.

    For example, is there really a need to create module for the Footer, which is essentially “static” in its content. Why not hardwire the footer contents into the index.php, as has been essentially done with the logo and the right column content of the header?

    In fact, many of the modules can be similarly “hardwired” into the index.php — once the webmaster has already decided on the stable rather than experimental nature of a site layout.

    In fact, if you examine the Yahoo homepage, it might even be more complex and more dynamic than the Teline II homepage, and yet it was able to do this without having to called outside scripts to define its dynamic content.

    One can argue that modular system provides ease of layout rearrangement — which is true, especially for many of us who do not know scripting altogether.

    But at what cost?

    The more modules, the more outside https that must be called to be integrated with the index.php.

    Cornelio

    Arvind Chauhan Moderator
    #297611

    <blockquote>the modular nature of the Joomla-Joomlart created page, is at the heart of the problem of the slow Joomla pages, especially the way Joomla 1.5.x was configured.

    For example, is there really a need to create module for the Footer, which is essentially “static” in its content. Why not hardwire the footer contents into the index.php, as has been essentially done with the logo and the right column content of the header?

    In fact, many of the modules can be similarly “hardwired” into the index.php — once the webmaster has already decided on the stable rather than experimental nature of a site layout.</blockquote>

    Yahoo’s results have always amazed me, to some extend i went hunting after them :p.

    About your results about yahoo, the http://analyze.websiteoptimization.com got tricked. Yahoo.com has local editions for every country. I tried yahoo.com and got the same results as yours. But when i try yahoo.com in broswer it is redirected to yahoo.co.in.

    So what results you got are from the redirect script, which based on user’s IP redirects to concerned edition.

    Here are the results of yahoo.co. in

    URL: http://in.yahoo.com/
    Title: Yahoo! India
    Date: Report run on Tue Mar 24 03:44:25EDT2009

    Diagnosis

    Global Statistics
    Total HTTP Requests: 16
    Total Size: 79158 bytes

    Object Size Totals
    Object type Size (bytes) Download @ 56K (seconds) Download @ T1 (seconds)
    HTML: 40055 8.18 0.41
    HTML Images: 19046 5.60 1.90
    CSS Images: 15994 4.19 1.08
    Total Images: 35040 9.79 2.98
    Javascript: 0 0.00 0.00
    CSS: 4063 1.01 0.22

    External Objects

    External Object QTY
    Total HTML: 1
    Total HTML Images: 9
    Total CSS Images: 5
    Total Images: 14
    Total Scripts: 0
    Total CSS imports: 1
    Total Frames: 0
    Total Iframes: 0

    Here is the example of css sprites technique used by yahoo to have single image :

    First sprite image (combining 3 images)

    Second CSS sprite image : (combining 35 images together)

    Yahoo considers css sprites as one of the important step towards optimization, they use css sprites for just 38-40 css images? Would you believe JA Purity loads over 159 css images, whereas Ja rhuk loads around 55 css images.

    I also agree fully with your point of view regarding doing away with modules, which are supposed to have static content and be so there forever.

    <blockquote>
    You wrote : Is there really a need to create module for the Footer, which is essentially “static” in its content. Why not hardwire the footer contents into the index.php, as has been essentially done with the logo and the right column content of the header?

    In fact, many of the modules can be similarly “hardwired” into the index.php — once the webmaster has already decided on the stable rather than experimental nature of a site layout.</blockquote>

    Would be updating this post today again.

    cgc0202 Friend
    #297644

    Thanks drarvindc,

    You confirmed my suspision that something was not correct with the analysis. A bried look at the index page showed that they could not have placed everything in such a short text presented there.

    I cannot install the Joomlart-Teline II kits that I uploaded, because I requested my hosting service to move some of my sites, from one of my accounts to another. I hope they will finish it tomorrow.

    This led me to look at the Yahoo page instead, as well as compare it to some of my sites. The speed, when a site is very slow, is time of the day dependent, as I was explaining to Camillo — overall internet traffic affects how the information is moved from one location to another, as well as the traffic within a site.. The same site I was testing for example could go as fast as less than 10 seconds to as long as 30 seconds.

    <em>@drarvindc 119811 wrote:</em><blockquote>Yahoo’s results have always amazed me, to some extend i went hunting after them :p.

    About your results about yahoo, the http://analyze.websiteoptimization.com got tricked. Yahoo.com has local editions for every country. I tried yahoo.com and got the same results as yours. But when i try yahoo.com in broswer it is redirected to yahoo.co.in.

    So what results you got are from the redirect script, which based on user’s IP redirects to concerned edition.

    Here are the results of yahoo.co. in

    URL: http://in.yahoo.com/
    Title: Yahoo! India
    Date: Report run on Tue Mar 24 03:44:25EDT2009

    Diagnosis

    Global Statistics
    Total HTTP Requests: 16
    Total Size: 79158 bytes

    Object Size Totals
    Object type Size (bytes) Download @ 56K (seconds) Download @ T1 (seconds)
    HTML: 40055 8.18 0.41
    HTML Images: 19046 5.60 1.90
    CSS Images: 15994 4.19 1.08
    Total Images: 35040 9.79 2.98
    Javascript: 0 0.00 0.00
    CSS: 4063 1.01 0.22

    External Objects

    External Object QTY
    Total HTML: 1
    Total HTML Images: 9
    Total CSS Images: 5
    Total Images: 14
    Total Scripts: 0
    Total CSS imports: 1
    Total Frames: 0
    Total Iframes: 0</blockquote>

    Do you have the program to create Sprites? I do not have photoshop, unfortunately nor any decent photo editing program. I still cannot visualize how integrated images can then be used in different locations. Is it more like the gzip compression making “optimized” temp images from the ones uploaded?

    The sprite is the exact opposite of what was done during the early days of the internet in the mid 1990’s. If my recollection does not fail me, large images were cut into small pieces to allow faster loading?

    <em>@drarvindc 119811 wrote:</em><blockquote>
    Here is the example of css sprites technique used by yahoo to have single image :

    First sprite image (combining 3 images)

    Second CSS sprite image : (combining 35 images together)

    Yahoo considers css sprites as one of the important step towards optimization, they use css sprites for just 38-40 css images? Would you believe JA Purity loads over 159 css images, whereas Ja rhuk loads around 55 css images. </blockquote>

    Yes, that is the case also with Teline II. I do not know who started what. I understand the importance of symbols that transcend the limits of languages, but the fascination of quite a number of people with icon also encouraged webdesigner to create and use more icons.

    <em>@drarvindc 119811 wrote:</em><blockquote>

    I also agree fully with your point of view regarding doing away with modules, which are supposed to have static content and be so there forever.

    Would be updating this post today again.</blockquote>

    Indeed. If I have more expertise in scripting, I would hardwire quite a few of the modules. I specifically put the term static in quotation for a reason, the “current measures of time” obviously changes but the script to record current time is “static”.

    Cornelio

    cgc0202 Friend
    #297703

    What puzzled me about CSS images was the total number that appeared. I understand that there was indeed a lot. But, upon closer inspection, it turned out that only a few of these CSS images are needed in the Home page layout, and most actually are used in specific pages, for example: sections and categories, article page, etc.

    Perhaps the solution to this is not to remove the CSS images, but just to ensure that for the Homepage, the ones called would be the pertinent CSS images only, perhaps even hardwired in the index.php, just like Yahoo does, and the rest called later, by placing them at the bottom of the index.php or even localizing them in the respective modules?

    In this alternative strategy, the relevant CSS file and the pertinent CSS images will be called only, as needed.

    Cornelio

    Arvind Chauhan Moderator
    #297710

    <blockquote>Do you have the program to create Sprites? I do not have photoshop, unfortunately nor any decent photo editing program. I still cannot visualize how integrated images can then be used in different locations. Is it more like the gzip compression making “optimized” temp images from the ones uploaded?

    The sprite is the exact opposite of what was done during the early days of the internet in the mid 1990’s. If my recollection does not fail me, large images were cut into small pieces to allow faster loading?</blockquote>

    Hi cgc,

    Here are the two good links about what, why, how about css sprites. No its not temp generated images, its a single image and linked through the technique they call css sprites.

    1. http://websitetips.com/articles/css/sprites/
    2. http://css-tricks.com/css-sprites-what-they-are-why-theyre-cool-and-how-to-use-them/

    In mid 1990’s they used to slice the bigger images to have progressive loading of web pages, css sprites involves combining various smaller images together, so as to save on total file sizes and most importantly HTTP request. It is interesting to know that every css image is equal to 1 HTTP request. so for example if you have 100 css images on your site, thats 100 HTTP request, now multiply it by number of users per day.

    cgc0202 Friend
    #297734

    <em>@drarvindc 119932 wrote:</em><blockquote>Hi cgc,

    Here are the two good links about what, why, how about css sprites. No its not temp generated images, its a single image and linked through the technique they call css sprites.

    1. http://websitetips.com/articles/css/sprites/
    2. http://css-tricks.com/css-sprites-what-they-are-why-theyre-cool-and-how-to-use-them/

    In mid 1990’s they used to slice the bigger images to have progressive loading of web pages, css sprites involves combining various smaller images together, so as to save on total file sizes and most importantly HTTP request. It is interesting to know that every css image is equal to 1 HTTP request. so for example if you have 100 css images on your site, thats 100 HTTP request, now multiply it by number of users per day.</blockquote>

    Thanks drarvindc,

    I can relate with this. It is what I portrayed in the houses, rooms, cabinets, racks folders files and objects analogy I posted earlier.

    So why does template companies, like Joomlart not use them? Are they just behind the times? Or, they do not care?

    I did read the links when you first gave it in your earlier post. What I meant when “I still do not grasp:confused:, exactly how it is done”, I am referring to the details.

    For example, in the sprite gifs you provided in your previous posts, why two “sprite gifs” and not just one — it would have saved another htttp? Why were the images aligned vertically in the first sprite gif? While you have both horizontal and vertical in the other?

    Intuitively, I understand that it has to do with spatial relationships. But, what if a gif is used all over the place, and in different pages. For example, the confused icon used here:

    What I meant when “I still do not grasp:confused:, exactly how it is done”,

    now has different spatial coordinates than in the previous one. Perhaps we can expore this more in the collaborative project we discussed.

    Cornelio
    *********

Viewing 15 posts - 16 through 30 (of 38 total)

This topic contains 38 replies, has 5 voices, and was last updated by  dkurnik 15 years, 5 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum