Website of a graphic design studio

Showcase
1

Hello,

this is not my first website with Bootstrap Studio, but so far I have only implemented smaller projects - mostly one-page websites. The site presented here is not huge either, but the portfolio includes around 20 projects.

Originally, I wanted to use the newly introduced “blog component” for this, but as the projects were also to be filtered, this was not possible. Nevertheless, I did not resort to WordPress as usual. Instead, I found a small JavaScript solution for filtering and used a JSON file with some additional JavaScript to navigate between the projects.

It was particularly important to me to create the best possible on-page SEO conditions - not only through optimized meta tags, but above all through a perfect presentation of the images on different displays. I may have gone a little overboard here: Each project image is saved in up to 6 different sizes so that it is optimally output depending on the display size and pixel density. If anyone has experience with whether Google rewards this extra effort - and if so, whether this only affects the image search or also the general search results - I would be happy to receive feedback. And of course I am also open to any other comments.

Here is the link to the website:

https://www.kitzig-identities.com/

Best regards

4 Likes
2

What a very elegant system you have created for a very elegant website. It’s very fast, and the extra touch of animating the elements when filtered is a nice touch I’ve seen similar sites with this feature miss.

Since for your images you are using the newer, <picture> element this is the better standard to use. It’s impact on your SEO will not be highly significant, however Google likes fast sites and this shall improve page load times so should help. How this effects image search results, I’m not sure on.

You might want to use the <picture> element on more of your images in fact as some images are still using the <img> element, and the images it’s loading are quite large for mobile.

Google PageSpeed does give your site a score of 76 on mobile, this is fine, but with the replacement of the <img> elements I expect it will put you in the green.

I always advise people not to chase after the Google PageSpeed scores however though, it’s not the be all and end all of your site, and in my experience doesn’t always reflect the real world.

Overall, your site is very fast, easy to use and has a wonderful design. You should be very proud of it! I’d love to hear more about your implementation of the solution you built for the projects page.

1 Like
3

I like very much what you have done with this website!

The “Strategie”, “Kreation”, “Implementierung” section is inspiring.

Checked the pagespeed results, and they’re really good.

Again, my compliments!

Giampiero

4

Thank you for your feedback.

@catkin
I was also surprised that Google PageSpeed deducted quite a few points for the mobile view.
However, it’s not – as you assumed – because the <picture> element wasn’t used consistently. On the project pages, all images are actually embedded using <picture>. Still, PageSpeed reports: “Properly size images” and suggests possible savings.

Here’s an example of how the images are embedded:

<picture>
<source srcset="0500w.webp 1x, 1000w.webp 2x, 1500w.webp 3x" media="(max-width: 480px)">
<source srcset="0750w.webp 1x, 1500w.webp 2x, 2250w.webp 3x" media="(max-width: 768px)">
<source srcset="0500w.webp 1x, 1000w.webp 2x, 1500w.webp 3x" media="(min-width: 769px)">
<img class="img-fluid" src="0500w.webp" alt="Bildbeschreibung">
</picture>

I eventually realized that PageSpeed assumes a viewport width of 360 pixels and a device pixel ratio (DPR) of 2 during mobile analysis. This results in an effective image width of 720 pixels.

The file 1000w.webp is loaded as intended. But from PageSpeed’s point of view, the image is about 280 pixels too wide – in other words, unnecessarily large. That’s why a potential saving is flagged. If mobile devices really had a maximum width of 360 pixels, this assessment would make sense.

As a test, I changed the first srcset line in one of the projects to:

<source srcset="0500w.webp 1x, 0750w.webp 2x, 1500w.webp 3x" media="(max-width: 480px)">

After that, at least this specific PageSpeed warning disappeared.

As you already said: PageSpeed can provide helpful hints – but in the end, it’s just an automated script.

@GPax
Exactly the three boxes are currently not well solved. Originally, I built them as simple flexboxes, and that worked fine. But in the end, the boxes were changed again and needed to be collapsible. I didn’t want to throw away the existing structure entirely, so I tried to adapt it. I tested three different approaches, but none of them really worked well.

In the end, I solved it by assigning a fixed minimum height per breakpoint to the top and bottom boxes. It’s not ideal – but at least it’s stable.

1 Like
5

I had only been able to check the site on my phone at the time and expected I may have been making an error in figuring out the low PageSpeed Score, interesting to know that the <picture> elements are still a pain point for their testing!

6

As @catkin mentioned, I wouldn’t get too hung up on Google’s PageSpeed score. I’ve seen plenty of horribly scoring websites (30’s and 40’s) have the number one spot in a search simply because they’ve got a lot of high-quality backlinks and quality content. WordPress websites, especially, seem to be abysmally slow.

Google touts page speed as a “crucial” ranking factor, but I think they do this more because it benefits them, not us. In fact, I posed this very question to ChatGPT, which verified my suspicions. This is ChatGPT’s response…

Yes, Google has a vested financial interest in websites being fast, beyond just improving user experience. Here’s how:

  1. Reduced Crawling Costs

Googlebot has to crawl billions of pages across the web. The faster a website loads, the less time and resources Google has to spend fetching, rendering, and indexing it. Slow websites increase server costs for Google because they require more processing time.

  1. Better Ad Performance = More Revenue

Google’s primary revenue source is Google Ads. Faster-loading pages lead to:
Higher ad visibility: Users are more likely to see and interact with ads if a page loads quickly.
Lower bounce rates: If a page loads too slowly, users may leave before seeing or clicking ads.
More ad impressions: A faster website means users can navigate and see more pages in the same session, increasing ad impressions.

  1. Improved User Satisfaction = More Google Usage

Google prioritizes user experience because the more people rely on Google for search, the more ad revenue they generate. If search results lead to slow, frustrating websites, users may blame Google or use alternative search engines.

  1. Mobile-First Strategy

With Google’s mobile-first indexing, fast-loading sites perform better on mobile devices. Given the dominance of mobile searches, speed is crucial for keeping users engaged, ensuring they stay in Google’s ecosystem (e.g., using Chrome, searching on Google, engaging with AMP pages).

So Why Do Slow Sites Still Outrank Fast Ones?

While speed is a ranking factor, it’s not the most important one. Relevance, backlinks, content quality, and user engagement signals (e.g., dwell time, click-through rate) still weigh more heavily. A slow site with exceptional content and strong backlinks can still outrank a blazing-fast site with weaker content.

That said, speed remains a factor because it aligns with Google’s business interests. Faster sites make them more money and save them money, so while they won’t tank a slow site’s rankings outright, they’ll always push the ecosystem toward speed.

So there you have it. If you can get your website into the 70-80 range, you’ll typically be faster than most of your competitors, and the difference in load time on a 4G connection between a site that scores 80 and 100 is (at least to me) imperceptible. Even less so on a 200 mbps desktop connection.

7

On a totally different note, I seem to have uncovered a serious bug in your navigation when the page language is translated to English. If I click on the hamburger menu and choose Customers, the page changes and scrolls to the References section, but it scrolls a bit too far. The word References and some of the first names listed are not visible. The URL in the browser reads…

https://www.kitzig-identities.com/#kunden

From there, if I scroll back to the top and click the logo to return to the home page, I’m taken here…

https://www.kitzig-identities.com/

But then if I go back to the hamburger menu and choose Customers again, nothing happens. Similarly, if I’m on the Customers page, scroll back to the top, click the hamburger menu and select Customers, the page does not scroll. Nor will Contact or About Us work. The only link that will work is Projects, which seems to “reset” the menu.

The issue only occurs when the page is translated to English. When left in German, everything seems to work as it should.

8

Hello @printninja thank you for your detailed reply, and I apologize for my late response.

I agree with you on all points: ranking is still strongly influenced by the relevance and quality of backlinks – just like 10 or 20 years ago – only with the difference that there have also been negative backlinks since the Penguin update in 2012. And of course, Google has a financial interest of its own for the reasons you described. Perhaps Google also wants to keep the SEO scene occupied with the PageSpeed tool. Those who receive “exact” data, where cause and effect are clearly visible, tend to worry less about link building and other ranking factors.

However, I have to admit that I didn’t spend much time on PageSpeed in the past – simply because I don’t enjoy writing alt texts for images or creating descriptions. I also (unfortunately) work a lot with WordPress and, as you wrote, achieving good pagespeed results with Worpress is almost hopeless.

But with ChatGPT, many of these unpopular tasks suddenly become easier. And sure, you can also work with the picture-element in WordPress and provide images in different display sizes and pixel densities, but I would never do it. In Bootstrap Studio, on the other hand, I really enjoyed optimizing and compressing.

I’m curious to see how the site will perform over the next few months in terms of visitor numbers and rankings. Even if I can’t pinpoint cause and effect exactly, I have comparative data from other sites. Maybe that will show whether the effort put into the images has paid off and is reflected in better rankings.

Regarding your second post:

One question in advance: which browser did you use? Did you mean Firefox’s integrated translation function? I tried to reproduce the behavior using Firefox but wasn’t able to see what you described. Please let me know which browser and which tool you were using.

The menu might also have caused some confusion. It includes a mix of internal jump targets (like “#kunden” and “#kontakt”) and an external link like the “Projekte” link, which leads to a separate subpage.

9

I was using Chrome when I found the issue, and when you open a foreign language website in Chrome, it automatically offer to translate it to English with Google translate.

But I am on an older version of Chrome because I’m on Windows 7. I’ll check to see if it does it in the latest version of Firefox.

10

You’re right. Google Translate in Chrome translates very aggressively and even seems to change anchor links – even if they still show correctly in the status bar.

I fixed it by adding translate=“no” and translate=“yes” to the right places. Now everything except the menu gets translated.

Thanks and best regards

1 Like