I’ve been reading that in order to make my page to open faster one of the things I should do is to use the CSS and javascript external. I know there are Freeway actions for this and know there are numerous threads on this forum that cover this subject and I read some, however I’m a little confused…There’s no instruction about external javascript either. I watched the Dan J screencast but I am still not sure how to implement this on my website if my page is already done and uploaded… How can I add the external stylesheet in this case? Does it really make difference in my case?
On the other hand when I go to external javascript action I have up to 5 files to select and I suppose I have to select the javascript files in the resource folder: “scriptaculous183.packer.js”, “scriptaculous183.packera.js”, prototype1610.packer.js". “prototype1610.packera.js”, “AC_RunActiveContent.js”, for example, but then it also shows another options like before/Head
after body
or before /body
Can it be done just using Freeway or I need to use also a mark-up code?
Any file that is already in the Resources folder is taken care of. You
don’t need to worry about the bits and pieces that Freeway or the
various Scripty Actions have put there. What you might want to work on
is the great raft of JavaScript that the Rollover and Target Show/Hide
and others put into the head of the page. Those can and do detract
from your site in terms of load time. Not because of their size, but
because it’s often the same large lump of code, effectively “pasted”
into every page in your site. That duplication means that the file
can’t be cached by the browser. External JavaScripts like Prototype
may be fairly large, but you only ever have to load them once per site.
As far as what you can do to extract that code, I know that Tim Plumb
has an Action called Externalize, you might want to look at that. Or
see if you can get by with fewer visual effects in your site, or learn
to write them in Protaculous, since then you can paste 10-20 lines of
code into the head of the page and rest assured that everything else
is off in the Prototype and Scriptaculous files, conveniently loaded
from Google’s Content Delivery Network.
Walter
On Jan 11, 2011, at 7:36 PM, Marcus Do Carmo wrote:
On the other hand when I go to external javascript action I have up
to 5 files to select and I suppose I have to select the javascript
files in the resource folder: “scriptaculous183.packer.js”,
“scriptaculous183.packera.js”, prototype1610.packer.js".
“prototype1610.packera.js”, “AC_RunActiveContent.js”, for example,
but then it also shows another options like before/Head
when I go to external javascript action I have up to 5 files to select and I suppose I have to select the javascript files in the resource folder: “scriptaculous183.packer.js”, “scriptaculous183.packera.js”, prototype1610.packer.js”. “prototype1610.packera.js”, “AC_RunActiveContent.js”, for example, but then it also shows another options like before/Head after body or before /body
A lot of the Scripty type actions that use scriptaculous have been externalised already - they reference the files on a googleapis server - so no worries there.
And a word of warning - Never select/refer to or import from the FW created Resources folder. FW manages the contents of this folder and is best leave alone unless you know exactly what you are doing. The contents of this folder change every time you ‘publish’ and what may be there one minute may be renamed by FW the next.
As far as external stylesheets go there is a checkbox in File>Document Setup>output to turn external stylesheets on.
But for most sites this isn’t really a big concern.
Walter, I’ve seen the Tim Plumb “Externalize” action, but got a little scared because it says “This is a beta release of this action and is unsupported. There is a very good chance that it may break something so be warned.”… I do want to learn to write them in Protaculous. That’s a good option
David, thanks for the warning. I won’t touch these files inside the resource folder. No way. I also turned the External stylesheet on.
I’ve been accessing my website in different places with different internet speeds and I was pretty happy about the loading time, but two things started to bother me: The Webmaster tool form Google said “On average, pages in your site take 4.6 seconds to load (updated on Jan 1, 2011). This is slower than 71% of sites.” After that I installed the “web fast” action and also the “Page Speed extension” from Google on the root. The other thing is that I went to a friend’s house on Sunday and her laptop (PC) took more than a minute!! to load my page. It must be a problem of her laptop because I tried with my son’s PC and it loaded faster even using the horrible IE, but you know… I don’t want to be perfectionist but these little two things still there…hahaha
I’ve used the recommendations you gave me to turn external stylesheets on and also used the Tim Plum action externalize. Can’t see the difference but you right, it may be cached already
Thanks in advance and have a great day. I’m going to rest a little and will reply tomorrow
Yours is 435k mine is 128k - do you think that there is any real loss of quality?
That is a size saving of 70%
Do the maths on your home page - call it 3Mb of images (probably a lot more), save 70% gets you down to less than 1Mb - how much faster would that load?
Also note that your background image is a png, by simply changing that to a jpg I have reduced its size from yours at 168k to mine at 53k
Hi David! Thank you very much for pointing the real problem.
On the images you created, if you haven’t told me I coudn’t even say which one is mine and which one is yours. They look the same!
David, to downgrade these images that are on the welcome pages I know I can do it using the inspector end moving it to quality 75%. Is that fine or I do need to change it in Photoshop?
On the other hand the images I’m using in Showcase thata are on the gallery, they are all big images. If I do the same in Showcase and moving the jpg quality to 75% do you think is enough?
Another problem is that I have two different welcome page and two different about page. One in English and one in Spanish and it may contribute for the site to be heavy, because the target/show hide are in both, but I don’t know any other way to it and substitute just the text and menu language.
Please let me know. Thank you vey much for sharing your knowledge, David!
I’ve been learning more in the last 2 months in this forum, about web and every requirements, etc than I did in my whole career as graphic designer.
One of your largest images is actually your background.jpg which is still at 165k - that could be reduced dramatically - mine was 53k. Just open it in Preview and then File>Save As and down the bottom you get the option to adjust the Quality slider with the benefit of being able to see the finished output size below. Slideshow-back could do with the same treatment BTW.
I have two different welcome page and two different about page. One in English and one in Spanish
This doesn’t matter as it is not the whole site ‘weight’ that matters but individual pages - a visitor can only see 1 page at a time.
But as you can see, you can dramatically reduce image sizes - without any real loss of quality - and get your site loading quickly enough so that your visitors are not put off.
Just stopped before going to sleep to thank you again!
Best,
Marcus
On Jan 12, 2011, at 6:59 PM, DeltaDave wrote:
So much quicker! Down to 1.6Mb
One of your largest images is actually your background.jpg which is still at 165k - that could be reduced dramatically - mine was 53k. Just open it in Preview and then File>Save As and down the bottom you get the option to adjust the Quality slider with the benefit of being able to see the finished output size below. Slideshow-back could do with the same treatment BTW.
I have two different welcome page and two different about page. One in English and one in Spanish
This doesn’t matter as it is not the whole site ‘weight’ that matters but individual pages - a visitor can only see 1 page at a time.
But as you can see, you can dramatically reduce image sizes - without any real loss of quality - and get your site loading quickly enough so that your visitors are not put off.
I do want to learn to write them in Protaculous. That’s a good option