Would like some input on my site's design problems

I have a website that I just started 3 weeks ago and it's slowly growing. I chose a wordpress theme that I thought looked pretty good, but after using it for a while, am noticing some major problems specifically with performance and typography.

The performance problems I've half-way remedied with W3 Total Cache to minify and combine CSS and JS (the theme had 26 different js files it was loading). With readability, I've made minor adjustments, increasing font size to 16px and line-height to 1.7em and making the font color darker for good contrast.

Could you guys give me a second opinion? I'm thinking through a site redesign, but that will take a while and I'd like to fix some things with the design sooner rather than later. Any low-hanging fruit you guys see to fix? Here's the link: http://thematicnet.com

 

Well, being turdpress by default it's going to be bloated, slow inaccessible poorly written garbage. It sounds like you've slapped together a bunch of off the shelf stuff -- and are now paying for it... and to be frank, throwing more code at it in the form of 'total cache' is NOT a fix, it's sweeping deep rooted issues under the rug.

Of course, you're showing flawed thinking just in saying "16px" as a font size -- generally as much as possible fonts should be % and/or EM so they automatically adjust to user preferences. PX metric fonts are an accessibility wreck and generally shouldn't be used.

First impression of the site it feels like everything is just thrown in any old way, and it's BEGGING to be slow as molasssas with all the scripting for nothing, goofy hover and 'scroller' garbage (that whole 'popular now' section needs an axe swung at it!). There are illegible color contrasts, broken attempt at responsive layout, and on the whole just from a visual standpoint there's nothing I'd even try to salvage from that.

Under the hood things are far, far worse. The HTML 5 bloat with the stupid malfing 'endless conditional crap' around the HTML tags that Paul Irish has somehow convinced people to shit all over the Internet with are just the tip of the iceberg -- what with 62k of markup to deliver 7k of plaintext and a dozen visible content images... easily three to five times as much code as should have been needed. Much of this is the typical turdpress bloat of endless pointless classes on everything for nothing other than covering up developer ineptitude mated to absolute URL's for no good reason, but the title's for nothing, little if anything resembling sematic markup, endless pointless DIV for nothing, pointless redundant HTML 5 crap-tags for nothing... It all adds up to a disaster in terms of speed, functionality, and usability.

Right now you're totalling 1.7 megabytes in 80 files, for something that by all rights should probably get gutted down to 170k in 24 files or less.... a tenth the filesizes and quarter the files.

Though to do that with turdpress you'll REALLY need to know what you are doing and bend that sucker over the table to make it your ***** -- at which point you might as well make a custom system from scratch for your site instead of going the cookie-cutter route.

... but to be fair, the TOPIC of the site is fat bloated slow inaccessible messes, so it's not surprising the site itself suffers from the same problems as all the goofy but ultimately useless PSD jockey BS it links to.

 

Oh, and sorry if that last part (or even the whole thing) sounds harsh, but shoe-horning content into off the shelf templates is ALWAYS the route to failure... 99.99% of those off the shelf templates suffering from accessibility and coding issues because the people spanking it on the screen in photoshop and calling themselves 'designers' don't -- as you'll find I say a LOT -- know enough about HTML, CSS, Accessibility, emissive colourspace, or limitations of the medium to be designing JACK **** for the Internet. The only reason they've effectively taken over the industry with their ignorant halfwit garbage is people are more impressed by "wow pretty" than they are functionality and speed.

... and it doesn't matter how pretty it is, if it's useless to the user what good is it?

 

Sorry Sarah, but I disagree -- while there is some hang time from off-site requests, with an average access time of 200ms per file the impact of that is far, FAR less important than the sheer number of files; 80 files is ridiculous for THAT... and since that's a 14.4 seconds of handshaking on a good day and as much as two minutes on a bad one, worrying about one off-site link really isn't the issue here.

The 586k in 10 javascripts and 56 separate image files are a much bigger worry than where the files are coming from. Of course the 189k of CSS (FOR WHAT?!?) isn't helping matters either, being five times the style needed for an entire forums software.

 

It took 4.5s for me to load your site, but there are some still some optimisation problems. I agree with @deathshadow that the "What's Popular Now?" needs to be ditched, as it's causing slow loading and some cancelled requests (one was after about 3.4s). Another one did load, but after 4s. It doesn't really add any value and I would rather see what is the latest and have what's popular as a list of links (not images) in a sidebar block, such as what you already have (but without the images). You will reduce resource usage (and requests) a lot with these small changes.

You have a bunch of CSS within the HTML - does it need to be there or can it go into a CSS file instead?

 

Hahaha, thanks DeathShadow for making my day. (if I could, I'd "like" your first post). Never heard it called turdpress before. You've got some good advice buried among your hatred for HTML5 and wordpress

I agree, and I generally don't like wordpress either. Like I said in the original post, I'm planning a site redesign and will almost definitely use a different platform/language (I'm looking at node.js). That won't be until December-January before I have the time to do that, which is why I was asking for input on band-aids for the current design. I started it now (instead of when I have my own site designed) so that I could go ahead and start making content, getting a few page-views, and start getting some ideas and analytics data to base future design decisions on.

You're all right that there's a LOT of bloat. More so than normal for wordpress. I've been digging into the theme today and have found that I can cut about half of the javascript without losing any functionality. With CSS, I ran chrome dev tools and found that, on average, I can cut about 60% of the CSS since it's not used (Deathshadow will love that the theme uses bootstrap. I know it's your favorite). The performance issue I'm most concerned about though is a 30 second wait that happens periodically when the site hasn't been accessed recently (within the last couple minutes). After that initial wait, subsequent page views are fast. I posted a thread specifically about that in Site & Server Administration.

I'll take you guys advice about simplifying the homepage as well. It's true that it looks adhoc and doesn't really have a focal point. One thing I don't understand is DeathShadow's remark about the font size needing to be a percentage instead of pixel value. It's the base font size, so what would it be a percentage of? If I set it to, say, 80%, it would be 80% of the browser's default? That doesn't seem right, but maybe I'm missing something.

Edit: Thanks sarahk. You're right that not everyone has the time or the money to start with a custom developed website. I'm starting small with this ($60 total initial investment) and once it starts making money, I will start reinvesting that money into it to make it a "proper" site (i.e. probably hire a good front-end designer). I have backend coding skills and some outdated front-end skills that I'm working on bringing up to speed. But until that happens, I'm using wordpress.

 

16px is not everyone's default font size, so use percent or em. So if you use percent or em you will always be setting font sizes in relation to your visitors default font sizes.

If the site is slow every few minutes, it sounds like your caching period might be too short.

 

I can understand giving the user the choice to change their default font size, but what about between browsers? I doubt the font-size is the same between every browser. Keep in mind, my front-end knowledge is quite outdated by a few years, so I'm still catching up. I imagine, after thinking about it, that you set the font size as a percentage to compensate for mobile devices?

Also, about the performance issue, I doubt it's the caching period (set for 1 hour right now before it goes stale). Besides, it's not good to rely on the cache to make the majority of requests faster if when the odd request does hit the whole stack on the application that it takes more than 30 seconds to respond. That's a major wait and shows there's a major problem. It's easy to blame wordpress bloat, but other wordpress sites don't have this problem. Here's the link to my other thread if you guys would like to have a look: https://forums.digitalpoint.com/threads/30-seconds-to-initial-response-wordpress-apache-on-linux-vps.2687258/

 

It could still be a cache issue -- just not CLIENT side. Are you on shared hosting? Is there PHP byte-code cache like eAccellerator or APM installed? How much memory is assigned to apache, php and mysql to cache. The behavior you describe of slow after not accessing for a while and fast after a 'first-load' screams caching issue; just remember client side cache is NOT the only cache on your plate.

Oh, it could also be that "total cache" garbage's initial overhead -- one of the reasons I call it 'sweeping deeper rooted problems under the rug' is it can even introduce slowdowns like the one you describe, in order to speed up where you said it's faster. A lot of "lets just slap another layer of cache on it" solutions tread into that territory -- it's the old problem of "If someone says to throw more code at it to make it faster, your common sense should start tingling". See 90% or so of the stuff people crap all over website accessibility using AJAX for.

 

Thanks for the response DeathShadow. I figured out what the problem was. I detailed the problem and solution in the other thread. Basically, another issue with this theme I got. The social widget that was in the footer was making a function call that would hang for 30 seconds and block any other processing. I've since removed the widget and learned my lesson to do due diligence before implementing a theme in Wordpress. [Cue rant from DeathShadow about "turdpress"] Note that this was the fault of the poorly written theme and not wordpress itself. Give credit where credit is due.

 

font color needs to be darker, its hard to read now.

 

Thanks karthimx. You're right. As the site is right now, it's hard to read in several ways and one is the lack of contrast on the text. I'm in the process of redesigning the single-post page right now so that it will fix most of these problems, I hope. Then, in a few months when I have more time, I'll be redesigning the site in something I'm familiar with (I know almost nothing about wordpress, hence the reason I bought a theme). That will also be a great opportunity to get away from the problems mentioned above, as right now all I've done is just put a band-aid on the issues.

 

Pages are opening pretty quick right now and your pagespeed score is not so bad
(although you have a red exclamation point you might want to look into)
developers.google.com/speed/pagespeed/insights/

 

Thanks @monkeye. The performance is definitely better than before. Not perfect, but good enough for now. I was able to fix it by removing a social plugin that was having problems, minifying and combining javascript and css files, moving most javascript to the bottom of the <body>, and implementing a CDN (using Cloudflare, though really, that's a trivial performance increase). When I do my site redesign, performance will be even better, as I'll cut a lot of the unnecessary javascript/css and I'll not be using wordpress.