1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Website code critique

Discussion in 'HTML & Website Design' started by Web_Dev_Chris, Dec 27, 2018.

  1. #1
    Hi All,

    I have finished designing the below website for our church:
    https://pottershouseblacktown.com.au

    I am keen on improving my coding knowledge and skills.

    Please review my website and advise how I can make it faster.
    It currently loads in 1.5 seconds.

    .htaccess file has
    .php rewrites
    automatically gzips website
    expires headers for 1 month


    Also please review my coding and advise how can be more efficient.

    Thanks

    Regards
    Chris
     
    Web_Dev_Chris, Dec 27, 2018 IP
  2. homemadejam

    homemadejam Well-Known Member

    Messages:
    143
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    145
    #2
    If you are using an up-to-date version of Google Chrome, you can run a performance audit on your site from within your Dev Tools.
    After doing so on your site, you score a 88/100 on your performance. It says that the area you could save the most loading time is on your images. They are larger than they are being displayed at on your site. Here's a link on more info: https://developers.google.com/web/tools/lighthouse/audits/oversized-images
     
    homemadejam, Dec 27, 2018 IP
  3. Web_Dev_Chris

    Web_Dev_Chris Well-Known Member

    Messages:
    222
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    105
    #3
    Oh, I never considered that. Thanks.
    I actually compressed all images and they are being rendered on imgur.com's super fast server. I am directly linking to the images.
     
    Web_Dev_Chris, Dec 27, 2018 IP
  4. mmerlinn

    mmerlinn Prominent Member

    Messages:
    3,197
    Likes Received:
    818
    Best Answers:
    7
    Trophy Points:
    320
    #4
    mmerlinn, Dec 27, 2018 IP
  5. Web_Dev_Chris

    Web_Dev_Chris Well-Known Member

    Messages:
    222
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    105
    #5
    However, I have tested it pingdom on different countries and regions and it loads in 1.5 seconds and even when I clear my full browser history and cache ect... it still loads in 1.5 seconds max.... Since the expires header stores the content in your cache next load for you will be quicker than 2 minutes.....

    Regarding the errors:
    Ok, the ID was a wrapper and wrappers are suppose to be used multiple times???
    Also the error with iframe, I'll need to take a closer look at that as I just took this code from a codepen. My video is hosted on vimeo which serves video content 100times faster than my web server.

    Thanks for you critique regarding images. I'll look at reducing the width and height of the pixels as previous stated to hopefully reduce the file sizes and get them smaller. However it is strange that they are loading slow considering they are hosted at imgur.com a website dedicate to serving images which they do a hell good job at as the images load faster through them than my own web server.
     
    Last edited: Dec 28, 2018
    Web_Dev_Chris, Dec 28, 2018 IP
  6. mmerlinn

    mmerlinn Prominent Member

    Messages:
    3,197
    Likes Received:
    818
    Best Answers:
    7
    Trophy Points:
    320
    #6
    Second and third loads were not noticeably faster than the first load, still at 2 minutes.
     
    mmerlinn, Dec 28, 2018 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #7
    Setting aside the design issues -- massive video too big to belong on a website as a background, illegible colour contrasts, serif fonts on screen media, too many massive separate files and images dragging load times into the deepest pits of hell -- the code has its own share of issues.

    Probably the biggest being that frankly, you have no logical document structure... which is to say your utter lack of numbered headings is not compensated for by the near useless and pointlessly redundant HTML 5 "structural" tags. If you're going to use SECTION most of your "SPAN" shuold be H1. Your single lonely H2 should be a H1... but that's why I'd skip the pointless dumbass section tag and just make them all H2 reducing the number of elements, since H2 means the start of a major subsection of the page. Which would work well with your H3's which you DO seem to have tried to use properly.

    you also have multiple anchors just tossed in with no block-level containers, meaning they will be treated as a run-on sentence by screen readers.

    An address is not a grammatical paragraph, so that's just plain the wrong tag.

    Your choice of classes are relatively meaningless, say what the sections ARE. You certainly shoudn't be saying things like "thick" or "right" since at that point you might as well go back to writing HTML 3.2 like it's still 1997.

    Your FORM is broken incomplete nonsense. Where's your FIELDSET? Where are your LABELs? Did you know... well... this?

    https://www.google.com/search?q=placeholder is not a label

    Because, yeah... THAT! the loss of focus and general accessibilty shit that is using placeholder as a label has no business being done on websites, no matter how many artsy fartsy types who'll "dance to anything" say otherwise.

    Also stop using JavaScript for form checking, this isn't 2008. Let the HTML "required' attributes handle that -- particularly since ANYTHING you do client-side can't be trusted server-side anyways, so your form submit HAS to have the same checks redone on the server. Simply not worth wasting JavaScript on.

    Your stylesheet link has no MEDIA attribute, meaning it's being sent to ALL... pretty sure your screen media layout is gibberish and/or a waste of bandwidth for print, aural, speech, tty, braile, what-have-you.

    ... and those numbers in the ALT attribugtes? ALT exists to be a description for blind and other such users when the image isn't shown, how the blazes is a single digit number helpful in that scenario. It also doesn't help the ridiculous number of images you've allowed on the page, making it agonizingly slow loading on top of the already bloated garbage video. There's a reason you don't see that trash on very many legitimate websites. It's not that we can't do it, but that it tells large swaths of potential users to sod off.

    The presence of static inlined style on some SPAN at the bottom is also troubling, again saying what you want things to look like really has zero business in your HTML. Same for the shoving new windows down user's gullets with target="_blank" removing choice from the equation. It was deprecated and 4 Strict for a reason, and it's little more than the WhatWG going full Pakled that it was allowed back in HTML 5.

    You never go FULL Pakled.

    ... and of course that "normalize.css" BS is the type of bloated trash that gives resets a bad name. When a "normalize" is 6k of CSS before you've even started writing the page, kick that idiocy to the curb. That it uses !important from the bloody start should be warning enough not to use that idiocy.

    That off the shelf on-page smooth scroll script is also pretty shite.... but typical of these "single page but we still have a menu for nothing" sites. Of course as a single page site it's kind of wrong given the relative simplicity of the design that it's wasting 28k for the CSS, but that's typical of when garbage like "normalize" gets involved.

    Of course that the entire layout is done in pixel metrics is an additional flipping of the bird at users with accessibility needs. Hence why the text is massively huge on my one normal font-size machine, and broken trash on my daily drivers. It's called "EM", use 'em! If you're thinking in pixels, you're thinking wrong.

    Oh and this:

    box-shadow: inset 0 0 0 1000px rgba(255,255,255,.3);

    No current browser is capable of generating a box shadow larger than 256 pixels in any one dimension. Sucks.
     
    deathshadow, Dec 28, 2018 IP
  8. Web_Dev_Chris

    Web_Dev_Chris Well-Known Member

    Messages:
    222
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    105
    #8

    Thanks, I'll be fixing my site with all these corrections. This is exactly what I wanted. It will help improve my overall coding and future websites will be structured better.

    I have taken your reset from cutcodedown.com and will be using that.
    Stylesheet has been corrected.

    The first thing I'll correct is the document flow. It does seem I can remove the section tags as I had div's underneath, I could style the div with id's and make the wrapper a class and apply it to all the divs. I'll add H2 and remove the spans.

    After that I'll correct the images. I'll reduce the size to what is being displayed and correct the form tags.

    Probably smooth scrolling is a must though, is there anything better you could recommend? The only other smooth scrolling scripts I know about is scroll-behavior: smooth; which is only working in chrome from memory and some Jquery scripts which is worse as I need to link to Jquery than the script.

    Thanks anyway, I have a lot to correct and will be correcting as I am keen on improving my coding.

    Regards,
    Chris
     
    Web_Dev_Chris, Dec 30, 2018 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    It's a single page with 2k of plaintext -- not even enough text to fill two pages at 80x25 terminal mode. As such there's no reason for it to even HAVE that menu or need fancy scrolling trickery apart from an overuse of white-space, overuse of massive background images for nothing, poor font size choices, and a host of other artsy "design" choices that in actuality have nothing to do with design.

    Like that ENTIRE top area with the video background and "Welcome to" text that I would delete outright -- since it reeks of being a "splash page" the type of rubbish we were told two decades ago to stop putting on websites. It leaves users asking "Where's the beef?!?" like the little old lady in the old Wendy's commercials.. You've got a big bun. Big fluffy bun... But where's the actual CONTENT?

    People go to websites for content, not the goofy presentation you hang around it or a "page worth of plattitudes".

    To that given the actual content of your home page, I'm not sure that at 1080 height there is much reason for the home page to take more than one and a half screen heights if it were well designed, meaning there is zero reason for the 'on-page' menu items. Only the separate calendar, more-info, and contact pages warrant menu items... and I'm not even certain "contact" warrants a separate page with the "contact" footer, since all it adds is a google map. If I were to use hash links, I'd probably make the contact a scriptless modal. I'd also be lowering the line-heights a LOT and axing so many of your images entirely.

    For desktop the site in general could really benefit from actual columns... moving some of the more important data -- like the address, contact form, and so forth -- up to the top on one side where it's actually useful. Give people a meaningful home page, not some massive stupid wasteful full screen video, larger space-wasting version of the logo already in the header, and again, text that's nothing more than plattitudes.

    Oh wait, the address is up there over the video, it's just invisible because "black text over video is invisible". Colour contrasts, yes they're that important.

    ... and for the love of Joe, stop using serif fonts on screen media, it lacks the PPI (pixels per inch) to render the glyphs for best legibility. This is changing with 4k / HDR / Retina displays, but "normies" aren't there yet. Say it with me, serif is for print, sans-serif is for screen. Serif is for print, sans-serif is for screen.
     
    deathshadow, Dec 30, 2018 IP
  10. jaf

    jaf Active Member

    Messages:
    139
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    83
    #10
    "click for more details" should be at the end of paragraph., it looks isolated.
     
    jaf, Jan 10, 2019 IP