DEV Community

loading...

Let's make my website even better

starbist profile image Silvestar Bistrović Updated on ・1 min read

I just finished redesigning my website. It isn't live just yet. I wanted to see what can I do to make it even better. 👌

The link to the current version: https://develop--silvestarcodes.netlify.com/

I would like to get feedback on SEO, performance, page speed optimizations, accessibility, and responsiveness. 💬

First, few notes:

Can you help me? Any feedback would be appreciated. 👍

Now, let's make my website even better! 🥇

EDIT, June 12: The design is updated. All issues, except privacy, have been resolved.

EDIT 2, June 20: Privacy issues resolved, pushed to production.

Discussion

pic
Editor guide
Collapse
davidszabo97 profile image
Dávid Szabó
  1. What's your reason to use CSS Grid? The layout looks pretty simple.
  2. On every navigation I can see the font change. That's really annoying.
  3. Colors are killing my eyes. Gray on white is difficult to read. You really should reconsider that gray. You are using that everywhere. (dequeuniversity.com/rules/axe/2.2/...)
  4. Your CSS is 250KB, why?
  5. You might inline your footer and header logo to save requests. But that's optional in HTTP/2 world.
Collapse
starbist profile image
Silvestar Bistrović Author

Thank you for the awesome feedback.

  1. CSS Grid is very well supported. It should be used for layout, as I am doing here.
  2. That texhnique is called FOFT.
  3. I am considering changing this.
  4. Inline fonts.
  5. Great find, I will consider fixing this.
Collapse
davidszabo97 profile image
Dávid Szabó
  1. That's a good reason :D
  2. Well, I just learned a new thing. Can you cache the font?
  3. Are you inlining fonts and loading them externally too? See image below I think it's a huge waste of bandwidth. I am downloading 433 KB, 289 KB of that is just fonts and css. (gzipped) Can you get away from these fonts and use the web safe fonts? Or get rid of the inline fonts atleast.
Thread Thread
starbist profile image
Silvestar Bistrović Author

It seems something is not working with font caching. I will notify you when I fix this.

Thread Thread
dayvidwhy profile image
David Young

For fonts I'd suggest linking through from google fonts, don't inline them, and lazy load them like this meowni.ca/posts/web-fonts/

Thread Thread
starbist profile image
Silvestar Bistrović Author

After reading this article, that dates from 2016, I decided to stick with the current font loading technique since it is recommended by Zach.

Learn more about ih here: zachleat.com/web/comprehensive-web...

Collapse
starbist profile image
Silvestar Bistrović Author

I fixed the font loading issues.

Collapse
ekimkael profile image
Ekim Kael

If you want i Can help you with the design.
I mean the prototype.
You Can check my Behance

Collapse
andy profile image
Andy Zhao (he/him)

Link's broken :( Gotta use the full link, no relative links, like so: https://behance.net/michkael

Collapse
ekimkael profile image
Ekim Kael

Ohh!!Okay!thanks
I just change it. It might work now

Collapse
starbist profile image
Silvestar Bistrović Author

I could send you the link with an Edit option if you would like to help me pro bono. 🙄

Collapse
ekimkael profile image
Ekim Kael

What means Bono please.i'm not an english native😅.
Ans i know i'll probably look stupid when you'll tell me what it is😅

Thread Thread
starbist profile image
Silvestar Bistrović Author

pro bono means for free. :)

Thread Thread
ekimkael profile image
Ekim Kael

I told you.now i'm feeling stupid😅.
If it's just for wireframing and design prototypes yeah.
You can hit my Twitter DM to tell me exactly what you want

Thread Thread
avasconcelos114 profile image
Andre Vasconcelos

You are a kind soul.

And honestly the designs you got there are pretty good! :)

Thread Thread
ekimkael profile image
Collapse
starbist profile image
Silvestar Bistrović Author

I have updated the design, you could see it here: develop--silvestarbistrovic.netlif...

What do you think?

Collapse
nektro profile image
Meghan (she/her)

A lot of HTTP Headers are pretty insecure by default. Netlify makes changing them really easy to add which you can learn more about here. If you want a one and done list of great ones to add, I also use Netlify and add these. Learn more about them here.

Collapse
starbist profile image
Silvestar Bistrović Author

Sean, thank you.
I have added _headers file to my site, the score is A+:
securityheaders.com/?q=https%3A%2F...

Collapse
nektro profile image
Meghan (she/her)

Great job! 😄

Collapse
starbist profile image
Silvestar Bistrović Author

Wow, what a notable finding. I will learn more about HTTP Headers security and secure my website soon.

Collapse
otacke profile image
Oliver Tacke

Have you considered to optimize privacy, too?

webbkoll.dataskydd.net/en/results?...

The developer console of Chrome is pretty nice and has an audit tab. There you can get some hints on performance and accessibility, although it doesn't replace some human pairs of eyes.

Collapse
starbist profile image
Silvestar Bistrović Author

Finally, I managed to update the privacy, too.

Check my score now: webbkoll.dataskydd.net/en/results?...

👍 💯

Thank you once again!

Collapse
otacke profile image
Oliver Tacke

Nice! Glad I could help.

Collapse
starbist profile image
Silvestar Bistrović Author

I am considering it now. Thanks!

Collapse
tmcsquared profile image
TMcSquared

In my opinion, the color scheme is a little bit un-tamed, the colors go together, but they're not working alongside each other.

The font color makes it hard to read against the glaring white background.
Also, the top and bottom headers look nice, but there's not much color in between to link them to each other.

But overall, the design looks nice :)

Collapse
starbist profile image
Silvestar Bistrović Author

Thank you for your feedback.

I didn't want to use too much color in the central part of the website because I wanted to make it more professional. But I am not considering changing the color of all headings. That could connect header and footer, possibly.

Collapse
tmcsquared profile image
TMcSquared

Your welcome! I will admit, I was not under the impression that lack of color implies professionality. I like to think that well-placed colors give a professional feel to it.

Collapse
sethusenthil profile image
Sethu Senthil

Try using WebP images, its a new format that allows images to load a crap ton faster, this might also help get better SEO rating on Google. Check this out to learn more. Since this is new not many browsers support this feature, so you can use this technique

gist.github.com/SethuSenthil/e76b0...

This will load and render the webP image if supported by the browser and if it dosent it will render the png encodeding of the image. You can see this live at my website

Collapse
starbist profile image
Silvestar Bistrović Author

I just learned that I already serve WebP images, thanks to excellent Cloudinary service:
prntscr.com/jtl1ym

Collapse
starbist profile image
Silvestar Bistrović Author

Great advice. I read about WebP earlier but never used it in a project before.

Also, I am serving images from Cloudinary. I will investigate how to convert to WebP.

Collapse
lynnewritescode profile image
Lynne Finnigan

I'd work on reducing the padding / spacing a little bit, and maybe add a bit more colour to the list items at the beginning. You could maybe even play with css transitions or animations to fade each one in nicely.

I'm not a designer either, but using a bit more colour in the text catches your eye more!

Screenshot from playing with it in the dev tools:
thepracticaldev.s3.amazonaws.com/i...

Collapse
starbist profile image
Silvestar Bistrović Author

Thank you, Lynne.

I am not sure if I want to introduce more colors to the website at this point. Maybe I will use different shades of current colors to provide more eye-catching experience.

Stayed tuned.

Collapse
lynnewritescode profile image
Lynne Finnigan

No problem, there are some sites like this one where you can generate a colour palette. If you're worried about professionalism, that might help give you a feel for what colours work:

coolors.co/

Thread Thread
starbist profile image
Silvestar Bistrović Author

Now that I see this colors, I think I could introduce more colors after all.
Great advice, thank you for your help.

Collapse
deweydell profile image
Nicola B.

You can use webaim.org/resources/contrastchecker/ to check background/text colors to see if the contrast ratio meets accessibility guidelines.

Collapse
starbist profile image
Silvestar Bistrović Author

I will fix the contrast ratio since it is mentioned more than once. Thank you for your feedback.

Collapse
josipbartulovic profile image
JosipBartulovic

Eeeejj ša ima mi smo jedini hrvati vamo :D

Collapse
noncototient profile image
Bo

Text is too small on mobile.

Navigation is not optimised for mobile.

The body of the site looks great, featured/top section need some improvements in terms of colors

Collapse
starbist profile image
Silvestar Bistrović Author

Could you clarify last two suggestions?

I am not sure why do you think that navigation is not optimized for mobile.

Collapse
abbhishek971 profile image
abbhishek971

I have attached a screenshot to this comment. Just put your Logo besides the "Home" button. It's positioned below currently.

Also try decreasing the padding in elements on the homepage. Everything looks good but at least one section should fit in on the screen completely.

The Screenshot

Collapse
starbist profile image
Silvestar Bistrović Author

Thank you for your feedback.
I would say that my website is remarkable performance wise, would you agree? 💯