I’ve just performed a free site audit for ra-design.me, by Raul Cirt beautiful site and work by the way.
Here are some technical details
Performance score 12/100
Accessibility score 88/100
Best Practices score 79/100
SEO Score 92/100
Performance
The score of 12 puts you as much worse than average performance. While it’s pretty difficult to achieve a great score with an image-heavy site, you should be able to get it up to 50 or above. *Actual download times vary*
Enable text compression
Usually, gzip or similar. It should be in your Cpanel. – 3.75 seconds
Preload requests
Try <link rel=preload> on your /8.css to prioritize it. – 3.49 seconds
Eliminate render-blocking resources
This one is a little bit more difficult. Firstly, you’re running a LOT of fonts. Montserrat, Open Sans, PT Sans, Nunito and Font awesome. Usually, you’d want just two fonts and font awesome. You can also inline or eliminate bootstrap.min.css … you’re using 2.2% of it. (about ~50 lines out of its 10,000) – .9 seconds
Enable caching 17 uncached resources found
If you can, enable caching. In WordPress this is as simple as a plugin but, it looks like you’re running a page builder or something.
Compress images
The largest size you should need is 1920×1080 and a jpg quality of 7-8. You shouldn’t be able to see the difference with a naked eye. – Total size 7,723 KB
/mom1.png(radesign.s3.eu-west-2.amazonaws.com) – 1,453 KB
/wacom%20contest.jpg(radesign.s3.eu-west-2.amazonaws.com) – 1,064 KB
/1fb7c00….svg(www.ra-design.me) – 992 KB
/chasing%20deco-01.png(radesign.s3.eu-west-2.amazonaws.com) – 682 KB
/wacom%20contest%202020%20V2-01.jpg(radesign.s3.eu-west-2.amazonaws.com) – 680 KB
/BH1.png(radesign.s3.eu-west-2.amazonaws.com) – 575 KB
/il1.png(radesign.s3.eu-west-2.amazonaws.com) – 565 KB
/bundle.js(www.ra-design.me) – 304 KB
/8.bundle.js(www.ra-design.me) – 161 KB
/ballons%20to%20shout%20about-01.png(radesign.s3.eu-west-2.amazonaws.com) – 150 KB
There are a couple more performance-enhancing tips in this free site audit but, they’re negligible and there isn’t much we can do about them with your site. The biggest one is your images and scripts … which is to be expected from a beautiful site like that.
Accessibility
The first tip is the contrast on your projects. I think it’s beautiful but, visually impaired people could have trouble. Here’s a list of the ones that are flagged.
Failing Elements
Branding
<span class=”tag”>Branding</span>
Mommy’s cake is a bakery startup made by…you guessed it, a mommy :))) she spe…
<p class=”project-description”>Mommy’s cake is a bakery startup made by…you guessed it, a mommy :))) she specializes in sweets so the logo needed to be playful, friendly and deliciously colored all wrapped…</p>
View project
<span class=”link-text”>View project</span>
Branding
<span class=”tag”>Branding</span>
Angora
<h1 class=”project-name”>Angora</h1>
Angora is a parfume company specializing in parfumes design for both man and wo…
<p class=”project-description”>Angora is a parfume company specializing in parfumes design for both man and woman, they wanted a high-end semi-luxury look as their products don’t come cheap.So i managed to pull…</p>
View project
<span class=”link-text”>View project</span>
Branding
<span class=”tag”>Branding</span>
A logo that is a but…unusual i you ask me since it does cross some borders th…
<p class=”project-description”>A logo that is a but…unusual i you ask me since it does cross some borders that it shouldn’t but….it works perfectly for Sandman comedy club as it needed to…</p>
View project
<span class=”link-text”>View project</span>
Branding
<span class=”tag”>Branding</span>
Balloons to Shout About is a balloon entertainment and decor company. They do e…
<p class=”project-description”>Balloons to Shout About is a balloon entertainment and decor company. They do everything from birthday parties to large scale corporate decor by combining amazing balloon twisting with traditional balloon decor…</p>
View project
<span class=”link-text”>View project</span>
Illustration
<span class=”tag”>Illustration</span>
Teddy
<h1 class=”project-name”>Teddy</h1>
This type of digital illustration artwork can be custom made and be used on all…
<p class=”project-description”>This type of digital illustration artwork can be custom made and be used on all kinds of media, either you want to sell tshirts, phone cases or anything really. have…</p>
View project
<span class=”link-text”>View project</span>
Illustration
<span class=”tag”>Illustration</span>
Memphis Dog
<h1 class=”project-name”>Memphis Dog</h1>
This type of digital illustration artwork can be custom made and be used on all…
<p class=”project-description”>This type of digital illustration artwork can be custom made and be used on all kinds of media, either you want to sell tshirts, phone cases or anything really. have…</p>
View project
<span class=”link-text”>View project</span>
Illustration
<span class=”tag”>Illustration</span>
High Lights
<h1 class=”project-name”>High Lights</h1>
This type of digital illustration artwork can be custom made and be used on all…
<p class=”project-description”>This type of digital illustration artwork can be custom made and be used on all kinds of media, either you want to sell tshirts, phone cases or anything really. have…</p>
View project
<span class=”link-text”>View project</span>
Print Design
<span class=”tag”>Print Design</span>
DeerBack Brochure
<h1 class=”project-name”>DeerBack Brochure</h1>
8-page brochure design for DeerBack construction solutions. The brochure is mad…
<p class=”project-description”>8-page brochure design for DeerBack construction solutions. The brochure is made in A5 format for easy handling and transportation. This is a presentation brochure meaning it needs to contain the…</p>
View project
<span class=”link-text”>View project</span>
menu
<span class=”text”>menu</span>
The next is simple. Just add the [lang] attribute in your html element so your line 4 should read <html lang=”en”>
Many of your links don’t have a name. (so screenreaders can’t read them). The image or text should go between the tags … <a blah blah blah>image or text</a>
Failing Elements
<a target=”_blank” href=“mailto:raul.cirt1993@gmail.com”>
<a target=”_blank” href=“tel:+40725640513”>
<a target=”_blank” href=“https://www.facebook.com/profile.php?id=100010341764382”>
<a target=”_blank” href=“https://www.linkedin.com/in/raul-cirt-b72481172/”>
<a class=”image-wrapper” href=”/projects/mommy’s-cake” style=”background: rgba(226, 84, 112, 0.5);”></a>
<a class=”image-wrapper” href=”/projects/angora” style=”background: rgba(147, 192, 225, 0.5);”></a>
<a class=”image-wrapper” href=”/projects/aclb” style=”background: rgba(1, 28, 55, 0.5);”></a>
<a class=”image-wrapper” href=”/projects/mic” style=”background: rgba(217, 82, 51, 0.5);”></a>
<a class=”image-wrapper” href=”/projects/book-hook” style=”background: rgba(7, 47, 95, 0.5);”></a>
<a class=”image-wrapper” href=”/projects/no-limit” style=”background: rgba(39, 54, 85, 0.5);”></a>
<a class=”image-wrapper” href=”/projects/balloons-to-shout-about” style=”background: rgba(5, 160, 208, 0.5);”></a>
<a class=”image-wrapper” href=”/projects/chasing-deco” style=”background: rgba(11, 34, 84, 0.5);”></a>
<a class=”image-wrapper” href=”/projects/tribe-vibe” style=”background: rgba(173, 43, 40, 0.5);”></a>
<a class=”image-wrapper” href=”/projects/drink-with-the-gods” style=”background: rgba(17, 16, 56, 0.5);”></a>
<a class=”image-wrapper” href=”/projects/teddy” style=”background: rgba(177, 217, 244, 0.5);”></a>
<a class=”image-wrapper” href=”/projects/fishing” style=”background: rgba(41, 45, 54, 0.5);”></a>
<a class=”image-wrapper” href=”/projects/minimal-poster-"dots"” style=”background: rgba(60, 65, 153, 0.5);”></a>
<a class=”image-wrapper” href=”/projects/memphis-dog” style=”background: rgba(253, 223, 39, 0.5);”></a>
<a class=”image-wrapper” href=”/projects/high-lights” style=”background: rgba(254, 144, 157, 0.5);”></a>
<a class=”image-wrapper” href=”/projects/deerback-brochure” style=”background: rgba(167, 169, 172, 0.5);”></a>
<a href=”#” class=”slides__pager__close-button”>
Best Practices
There isn’t much you can do here. HTTP/2 isn’t widely supported among servers. You could add passive listeners for the other warning if desired. It’s a bit more work though … more than needs covered in this free site audit. Here are some links regarding those issues.
https://web.dev/uses-http2/?utm_source=lighthouse&utm_medium=devtools
https://web.dev/uses-passive-event-listeners/?utm_source=lighthouse&utm_medium=devtools
SEO
Your SEO looks Really good, It looks like your robots.txt file is just a duplicate of your index.html file or something though. That’s the only ERROR shown. If you can though, it would give more content for the browser to read if things like
<a class=”image-wrapper” href=”/projects/mommy’s-cake” style=”background: rgba(226, 84, 112, 0.5);”></a>
were made like
<a href=”/projects/mommy’s-cake”><img src=”mommy’s-cake” alt=”Mommy’s Cake Logo”></a>
Alt tags are how the browser and search engines know what the image is and what it’s describing. This should have thrown an accessibility warning too but, the way that it’s coded doesn’t let it I guess. On the project pages it’s using them as “background-image” too … and that doesn’t require alt tags either.
Overall a great site Raul. Let me know if I can assist you any further!
EDIT: I was going to mention something else too. Because I messed up as well with drpgraphicdesign. (actually just learned this a few weeks ago) When picking domain names, using initials and special characters, even numbers … isn’t a great practice. People think in words and letters. So a few times while writing I typed in radesign.com instead. lol.