How my website be improved (in terms of design)

Discussion in 'HTML & Website Design' started by Hudsonkraft, Jun 10, 2014.

  1. #1
    My traffic is growing and I'd really like this site to be as good as it can in terms of usability. One thing I'm worried about is odd and messy bits of css and js decreasing speed. I've tried my best using tutorials etc to get good scores in google tools, Pingdom etc but I feel this is as far as I can go.

    I'm not sure if I can post a link to my site?
    Site is:vandogtraveller.com

    or search for 'Vandog Traveller'

    Any constructive criticism and potential improvements would be really good
     
    Hudsonkraft, Jun 10, 2014 IP
  2. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #2
    When a question like this gets asked; generally the response being looked for is lies about how great the site is. However there are also those who actually are looking for help improving what they have. If you are part of the first group TOUGH! you might as wel quit reading because I am not going to power your butt and pat you on the head with lies about how amazing your site looks.

    So if you really want the help here it is.

    The general design is pretty ordinary which is to be expected from a site cobbled together using third party code instead of real coding.
    It has minor validation errors which are easily corrected and don't have any real negative effect except a very tiny loss of credibility with search engines. However it is bloated and slow. It just barely makes it to me in the acceptable range of 5 seconds to fully load and I am on a high speed connection. Anyone on a slow connection is going to start with a negative experience.

    It is slow because it is doing 73 HTTP calls to the server to load all the crap CSS, jquery and images. The total transport load is over 1mb (about 5 times what it should take to present the amount of content there). The body background image alone is almost 300Kb and contributes exactly nothing to the value of the page.

    To make matters worse. The content is being generated from client side scripting during the load to add even more drag on the load time, and generating the content that way means it is in the DOM, but not in the source and the search engines cannot see the content to index it.

    You say your traffic is growing, but without real metrics there is no way of knowing how long before you hit a wall because the excessive amount of traffic required for the page starts to degrade server performance. If you want the site to grow, then you need SE traffic and that means you have actually deliver content to the browser, not just a bunch of scripts to generate stuff. You also need to reduce the bloat, by dumping any jquery that is not actually contributing positively, and the CSS needs to be rationalized and consolidated.

    The will give you the kind of low end blog that is common and generally viewed as a vanity site. If you are into having some impact and growing the site, then I would use what you have as a general directional guide for the look and feel; and scrap the junk. Then code the site yourself. Acquiring the skills that you don't yet have is not difficult and you will find you can actually be creative without restriction, rather than have to work within the limits of the boxes imposed by the authors of all the third party junk you are using.
     
    Last edited: Jun 10, 2014
    COBOLdinosaur, Jun 10, 2014 IP
    kk5st likes this.
  3. webcosmo

    webcosmo Notable Member

    Messages:
    5,840
    Likes Received:
    153
    Best Answers:
    2
    Trophy Points:
    255
    #3
    I can say nothing bad , no criticism at all, because i`d be subjective since you`re living my dream - if that`s you doing the adventure. I just wanna congratulate you for living the dream. And you`ve got some writing skills... Thanks for sharing with us!
     
    webcosmo, Jun 10, 2014 IP
  4. Hudsonkraft

    Hudsonkraft Member

    Messages:
    49
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    28
    #4
    Thank you COBOLdinosaur for spending time giving me a good, thorough answer. I can assure you I have no other intention other than to try and improve my site. If I can make this a little more lightweight and economical shall we say (all those fetches) then I'd be so happy.

    Wordpress is what I have and is what I'll be sticking with though. I'm pretty sure with someone that knows what they're doing, this can be improved without abandoning WP, right?

    I had a feeling the answer would be 'bloated and slow'. I'm not sure what you mean by 'real coding' though. The validation errors I should be able to go through and fix.

    Yeah that is a load of crap -- All those calls, css and js. The background image is not a tiled image and is 6Kb in size from 300 previously -- OK that was an easy fix.

    I don't understand this client side script problem. I'll have to look it up. When you say the content is being generated from client side scripting, is this just for the front page and archived posts? or is this in a single post as well? search engines cannot see it? sounds worrying. Is this normal for a WP site? Where does this error lie, in the theme?

    I have already experienced trouble with server overload when I was with Hostgator. I was getting 10k visitors a day and I got suspended. I'm now on a VPS and no problems but obviously, yes my code is still inefficient and bloated. It needs to be fixed! but I need help. I'm not sure what you mean when you say 'not just a bunch of scripts to generate stuff'. I understand your point about removing unnecessary jquery and consolidating CSS files.

    Yes I do want impact and I will grow the site. Once this bloat problem is sorted I will be concentrating on content, purely.

    I hope that at some point I will learn a lot more about this stuff, I am very much an independent learner (electronics engineer), but at the moment I have too many projects on the go and I am travelling, in a van and have limited net. I need someones help with this and I need someone I can trust.

    webcosmo thank you for your kind words. I am not fishing for compliments here nor do I wish to show off my fortunate situation with the travelling thing. Like I said, I need to get this site right and you lot are the experts.
     
    Last edited: Jun 10, 2014
    Hudsonkraft, Jun 10, 2014 IP
    Karuna17 likes this.
  5. Hudsonkraft

    Hudsonkraft Member

    Messages:
    49
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    28
    #5
    OK, some more improvements today. I've taken out some unnecessary plugins (arguably more still remain) and messed about with some other stuff. It is faster but still a fair few fetches. I think it might be a little more acceptable now though?
     
    Hudsonkraft, Jun 11, 2014 IP
  6. awkyjack

    awkyjack Greenhorn

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #6
    Hudsonkraft,

    I will give you my honest opinion, the site is average and can definitely be improved a lot by design and functionality. The author aspect of the site is pretty professional, the design is simple but simple is good in 2014, stick with that approach, however the logo is a bit too complex for the website look, you should simplify it a bit. The navigation could do with a home link for them type of users... lol, and SEO wise you should add a title to images. You don't have a long way to go though, your site has a good starting point! :)
     
    awkyjack, Jun 11, 2014 IP
  7. Hudsonkraft

    Hudsonkraft Member

    Messages:
    49
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    28
    #7
    Thank you awkyjack,
    How do you mean the author aspect?

    Do you mean the full banner logo or just the stamp bit? if you mean the full banner then I totally agree -- I was gonna just use the stamp on its own and take out the drawn bits with little thumbs.

    Home link, I didn't even think about that.

    Titles to image. Oh there is an option in WP but I've never used this. I thought image name and alt was sufficient? if not I'll get to work
     
    Hudsonkraft, Jun 11, 2014 IP
  8. awkyjack

    awkyjack Greenhorn

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #8
    The author aspect as in the way you post blogs, it's very good!

    The full banner logo.

    And yes, the title, name and alt all come down to better SEO in total.

    You should also consider adding terms and stuff, it just makes the website a lot more professional even though people rarely view them, I for one take notice haha.
     
    awkyjack, Jun 11, 2014 IP
  9. Hudsonkraft

    Hudsonkraft Member

    Messages:
    49
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    28
    #9
    The way I post? I'm still not clear. The format, the writing, pictures?

    Terms as in T&C ? I don't think I have any legal terms, do I? or should I?
     
    Hudsonkraft, Jun 11, 2014 IP
  10. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #10
    There is already progress. Wordpress can produce some very nice sites, but it is like a lot of other things that are "quick and easy"; it imposes limits. The technical skills to get around limitations is where 'real coding' comes in. By that I mean writing scripting, markup and CSS to reduce the bloat that comes with using third party code. To use those jquery plugins you need the jquery library, plus the library for the plugin and frequently a stylesheet for the plugin.

    On the surface jquery looks like it does not require more than a few lines to do something, but you still have the big overhead of 40 to 100k of files. If instead classic javascript is used the 20 or so lines of jquery might require 100 lines of scripting resulting in perhaps a 2 or 3k file. As for the stylesheets; if you look at them you will see massive duplication, an excessive number of classes, and the potential for all kinds of conflict when multiple plugin stylesheets are used. When that get rationalized by restoring clean cascades, eliminating duplication and declaring your own classes the savings in file size can be over 50%.

    I am not suggesting that you start re-writing. As you have time, it will benefit you to learn the underlying technologies that underpin WP and the plugins; CSS, HTML5, javascript (jquery is an abstraction of javascript), and php. As you gain some expertise in those you will find that you can evaluate the code better, and you will develop the skills necessary to modify without breaking anything, and be able to do things outside the WP box.

    Now client side scripting. the spiders used by Google and other search engines cannot process javascript, and have only very limited capabilities with CSS analysis. They also cannot see special effects or graphics. The only way they know something is there is from the alt text. Think of the spiders a being a blind user. Blind users employ page reader devices to navigate the internet. That is why accessibility is important for SEO. If a site is not using valid code, semantically correct tagging in contains very little text content, then the spiders may not be able to index very much.

    Content, and content modifications done with client side scripts will appear on the page, because the scripting modifies the Document Object which is where the browser renders from, but the spiders can't see the Document Object. They can only see the original source delivered to the browser, just as the reader used by a blind person can only read the original source code.

    The number one determining fact in search engine ranking is text content. That is what the spiders understand; it is what gets indexed; and it is what search engines look at to determine relative page ranking for a search query.
     
    COBOLdinosaur, Jun 11, 2014 IP
    Karuna17 likes this.
  11. ketting00

    ketting00 Well-Known Member

    Messages:
    782
    Likes Received:
    28
    Best Answers:
    3
    Trophy Points:
    128
    #11
    I'm intrigued. How do you count HTTP call and how to reduce it.
     
    ketting00, Jun 12, 2014 IP
  12. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #12
    Just count each individual piece that has to be requested from the server. Each js file, css file, and image require an HTTP get request to the server. The browser first sends a request for the page, and then as it parses though the source code it fires additional HTTP requests for each of the additional pieces it finds. Each request results in 1 or more packets being sent via TCP/IP and some packets may not arrive or get corrupted and have to be re-sent. The order that the packets arrive is arbitrary as they do not all necessarily travel through the same routing sequence. In addition to the actual transfer there are also handshakes and queries to the Domain Name servers and reverse lookups to resolve domain names to the ip addresses of the servers where the files reside.

    Generally the slowest response time is for the first access to a site because the browser will cache some items and on additional page requests it may use the cached version of a file instead of requesting it from the server. Caching is fine for things that don't change very often, but for anything volatile it can create a problem by not getting the pieces updated to the latest version.

    To reduce the traffic, you eliminate files you don't need; combine several small files in one; reduce reliance on a lot of pieces; and for items that are not immediately need bring them in in background after the page is fully loaded using AJAX.
     
    COBOLdinosaur, Jun 12, 2014 IP
    Karuna17 and ketting00 like this.
  13. ketting00

    ketting00 Well-Known Member

    Messages:
    782
    Likes Received:
    28
    Best Answers:
    3
    Trophy Points:
    128
    #13
    Crystal clear. Thank you so much.
     
    ketting00, Jun 12, 2014 IP
  14. Best Soft Inc

    Best Soft Inc Member

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #14
    You can right check the inline css and zip your js and jquery to get less code in your website.Hope this may less your site timing..
     
    Best Soft Inc, Jun 13, 2014 IP
  15. Karuna17

    Karuna17 Member

    Messages:
    544
    Likes Received:
    46
    Best Answers:
    0
    Trophy Points:
    33
    #15
    That was a very nice explanation, @COBOLdinosaur , I tip my virtual hat to you
     
    Karuna17, Jun 13, 2014 IP
  16. Best Soft Inc

    Best Soft Inc Member

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #16
    Thanks Karuna,for your kind words
     
    Best Soft Inc, Jun 13, 2014 IP