June 9, 201016 yr I have only been learning web designn for around 12 months and have recently ecountered a problem that i dont know how to get around. The problem is with loading speeds with one of the first websites I designed. Im pretty sure i know what the problem is but im not realy experienced enough to think my way out of it. The website - www.andys-motorcycles.comwas origionaly designed from a psd template that i created within Photoshop using slices for a few of the main content areas and the nav buttons. When exporting psd templates into dreamweaver the entire page is made up of lots of seperate images. The main content area and button images were deleted and replaced with div tags, inserting the image back into the css rule as a background image so that content can easily be inserted and replaced whenever required. It was reported that loading speeds were suffering at almost 7 seconds per page so i started by converting all the html files into php and then anabling gzip on each of the 4 main webpages. After this i converted every single jpg that the page was made up of into png-8 images again to try and compress the site. I realy thought that this would do the trick but if im honest i swear its slowed it down more & iv been thinking of converting it back to html. My guess is that the pages are made up of far to many images for the browser to load quickly and that fixing this will sort out the problem. I was thinking of deleting the images one by one, replacing them with div tags and re-inserting the pictures back into the divs css rule as a background image but i figured that this would not help as i would then have another 45-50 css rules for my site on top of the 9 it is already operating from. I have also been told about sprites but dont know how to check that out within dreamweaver. Can anyone please help as im still a bit of a beginner and know nothing about any of the techniques that i have not already done. The problem is just with the main site and not the store as this is software. Thank you
June 9, 201016 yr Ran YSLOW on your site... This page has 5 external Javascript scripts. Try combining them into one. This page has 9 external stylesheets. Try combining them into one. You're also using tables which are going to reduce the loading time too. (bigger filesize & sometimes the page will hang) You're also using a spacer image many times on the site... try combining it into one image. Create a .htaccess file in the root directory and put the following into it. This will cache the images so they wont be requested from your server every time. # Caching block <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/gif A2592000 ExpiresByType image/png A2592000 ExpiresByType image/jpg A2592000 ExpiresByType image/x-icon A2592000 ExpiresByType application/x-javascript A2592000 ExpiresByType text/plain A2592000 </IfModule>
June 9, 201016 yr Given the number of images on that page, I'd suggest using CSS sprites as well - that can help a lot. I use them where ever possible.
June 9, 201016 yr Author Thank you for your fast reply however as I mentioned earlier I am still learning so i did not catch the first half of your message. The code was automatically written by dreamweaver when importing the psd file. I have a basic knowledge of divs & css etc but do not know how to combine the files you mentioned. This is why I posted in the hope that someone could help me in any way. If you could please elaborate a little i would be extremely gratefull. Also my host only allows 1 .htaccess script and i think that is mod-rewrite. Any ideas. Thank you for your quick reply.
June 9, 201016 yr Author Given the number of images on that page, I'd suggest using CSS sprites as well - that can help a lot. I use them where ever possible. Yes this is something that i found whilst googling but dont know how to do this in dreamweaver. Can you offer any support or links that may guide me. thank you.
June 9, 201016 yr Author i tried using the htaccess file you mentioned but as soon as i uploaded it it blocked my entire website with a 500 error page so i had to remove it.
June 9, 201016 yr Theres nothing more to suggest than what everyone above me has said, but I will give you one more piece of advice and that is: MOVE AWAY FROM DREAMWEAVER! The code it generates is messy, and come on... Tables... The javascript it generates is not effecient and is very difficult to understand for debugging purposes, and as you seem to have noticed, it makes common speed increasing techniques like CSS sprites hard to do. You will have alot more control over the site if you use code instead of wizards. The site design looks great by the way, some issues obviously but still very good.
June 10, 201016 yr Author Theres nothing more to suggest than what everyone above me has said, but I will give you one more piece of advice and that is: MOVE AWAY FROM DREAMWEAVER! The code it generates is messy, and come on... Tables... The javascript it generates is not effecient and is very difficult to understand for debugging purposes, and as you seem to have noticed, it makes common speed increasing techniques like CSS sprites hard to do. You will have alot more control over the site if you use code instead of wizards. The site design looks great by the way, some issues obviously but still very good. I do also have coffeecups HTML editor which is great and also has a visual view. Although dreamweaver is a wysiwyg editor it is very powerfull and also has a faily good HTML editor which is why I use it. My text HTML editor is better forwriting code as it lists all the different tags for quick and correct insertation which is great for learners like me. I would love to completely stop using Dreamweaver but the problem i have that i struggle to write even the most basic of websites using text whereas with Dreamweaver I have been able to create some visualy quite good sites. Im at a funny stage of my learning process where it will feel like im stepping backwards if I start with a text only editor as i simply dont understand most of the tags. I suppose that this is simply a matter of learning which I do need to do but it will take me a very long time to be able to create a page with the same visuals as Iv been creating with Dreamweaver, and that is obviously not an attractive process. Does anybody have any good learning resurces or links I could check out? Im gonna start with text only and see how that goes for a little. Thank you for your input
Create an account or sign in to comment