Thanks to the suggestions and advice of David Salerno I have tried to optimize the loading of undolog.com, activities which, for reasons of "time", I always put off. In fact I was not able to apply all the valuable tips of David, but I managed to give a nice "clean up" and reduce loading times anyway!
Reduction of Widgets, and Badget antipixel
The first thing I did was to minimize the burden placed by the various widgets in the blog:
- I dropped the lines displayed in widgets MyBlogLog : 10 to 5 lines
- I deleted the blogroll from antipixel
- The library aNoobi shows 2 books instead of 5
Compression of the main theme of the CSS styles and JavaScript Script
As is well established, I have "compressed" the CSS file relative to the theme of the blog. I used the simple compressor proposed by peterbe.com . Other CSS, such as those related to plugins, I left unchanged, both for their small size, and by retaining the ability to automatically update by WordPress and not "recompress" every time.
More complex, however, has been optimized JavaScript scripts. David suggested to create a single file, but in my case this is relatively articulated (some scripts are included dinamicamanete by Plugin). The only thing I could do was slightly compress prototype.js , using the compressor Dean Edwards ! Also try this Javascriptcompressor.com .
WordPress Plugin Cache
Here I have not done anything ... I looked at various solutions (WP-Cache or WP-SuperCache) but I must say that I do not have much satisfied ... for now! We will see later!
Images: use of the technique of "sprites"
When you view images through CSS (with image-replacement techniques) you can make a "special" form of optimization due to the characteristics of the styles. Normally I use this technique in cases of rollover or even multilingual sites. This procedure reduces the questions (HTTP request is a single image that contains miscellaneous) and, indirectly, also performs the function of preloading (built in Javascript) so much in vogue up to Quelch time ago, just before the massive use of CSS . By defining properly the style of an element, you can choose - through definition of the CSS - the portion to display an image that, in reality, it contains more than one. For example, the titles of the footer undolog.com are not three separate images, but only one:
When you define the CSS you can specify the coordinates to start. In my case, for example, a single title is 314 × 55 pixels. The image only contains the three titles under each other, so 314 x (55 x 3)!
Let's see how it works starting from the HTML, which acts as a container:
1 2 3 |
You also use a technique of "image-replacement", ie the replacement of text characters with just a picture! – che definisce l'area visualizzata: 314×55. The presence of the TAG SPAN does just that: get rid of the text while maintaining the housing H2 - that defines the display area: 314 × 55.
In CSS the first game is solved:
1 2 3 4 5 6 | / * Hide the text in characters * / display : none } div. footer-box h2 span {display: none} / * Call the container * / display : block ; width : 314px ; height : 55px } div. footer-box h2 {display: block; width: 314px; height: 55px} / * Put the image as the background of the title * / { background : url ( images/tits_footer.png ) no-repeat } div. titf_recentpost # footer-box h2 {background: url (images / tits_footer.png) no-repeat} |
The second title:
1 2 | / * Same image but with offeset vertically shifted up 55 pixels * / { background : url ( images/tits_footer.png ) 0px -55px no-repeat } div. titf_mostview # footer-box h2 {background: url (images / tits_footer.png) 0px-55px no-repeat} |
Note the presence of -55px which does nothing but move the offset of the image display.
This technique is great for all those cases where we have several images to be replaced (I also used for titles in the sidebar or the arrows "green" in and out of the post) all at no-repeat. Some problems, or if you prefer, but some attention should be given in the case of horizontal repetitions and / or vertical. If we have a real texture, which must therefore be ripetura horizontally and vertically, this technique can not be used. In the current version of CSS, in fact, you can specify only offeset display the size and not "cut". This is done indirectly from the container, in my case from H2 (see definition in the CSS display:block;width:314px;height:55px ). A larger container would show the rest of the image.
In cases of repetition only orizzonatle or only vertical, tecnca this can still be used with a minimum of foresight:
- Horizontal Repeat: the image must end on the right and left
- Vertical Repeat: the image must end above and below
Brute Force: export from MySQL and Notepad
One good thing I did, using a very low level of intervention was to export all the posts as text and give it a healthy cleaned:
- Removed unnecessary spaces
- con il nuovo Plugin SWFObject, che ho introdotto da poco Replacement of all TAG
OBJECTandEMBEDwith the new SWFObject Plugin, which I recently introduced - General clean up HTML also due to the passage of several versions of WordPress: from 2.0 to 2.5
To "measure" the goodness of our interventions may be useful to rely on monitoring and verification tools available online such as Pingdom
Also the eye wants its part
Other minor optimizations concern the compression of the background images, which are able to reduce and / or eliminate. For the rest, I believe that the eye wants its part. Undolog.com blog will not be the fastest in the world, but I like it 
The improvements you see and feel
Even, however, the change has made its hosting because MT is more responsive and fast.
In my opinion however it is still too heavy on the template. It 'hard to follow long posts in white on black.
Obviously de gustibus ...
Hello,
Emmanuel
According to firebug you set the etags and not compress the data transmission.
The etags, if not used by WordPress (which I doubt they use), prevent client-side caching and compression would reduce the traffic of text (html, js and css) a good 50%.
If you have the site served by Apache, add these lines to your. Htaccess (or create it if you do not have one):
FileETag none
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css app
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
Header append Vary User-Agent env=!dont-vary
Seeing is believing ...
There are other tricks feasible, set the expiration of such elements that will never change a lot in the future, but this involves not being able to change up to the date set.
@ Emmanuel: I thought I had any problems reading white on black mode. Probably come from a generation that began with the green phosphor monitor
and then when I have to do with "code", I much prefer this solution 
Obviously it is a matter of taste 
@ David: I'm happy! The only "problem" I found these days is a significant change in performance, by (mt) during the night, until you come to a complete standstill!
I read in their blog that these days are doing some maintenance work and the servers being located in Los Angeles, then a 9 hour time zone, when we are approaching midnight, they will have access peaks. I am confident, however, that the situation will improve, given the excellent performance during the daylight hours here in Italy
@ Nicholas: excellent tip! I document and try! Thanks
Excellent straight about moving images. Me on my site I was thinking of introducing it to reduce the "weight" of the many little icons that I have for the rest ... unless you have a multilingual or multi-site CSS, WP-Cache can do for you. Regarding the ETag, unless you change the post and is not a thing of WordPress, but I'd recommend to disable them ... However I think an excellent job of cleaning, a little 'we should all do from time to time on our blogs!