Siegfried, deploy!

When you're working with websites, you can't ignore the WebP image format. But what makes this format better than other image formats? And is it really practical and will stay? In this episode, Steffen and Dominik dive deep into image formats and discuss how to use WebP.


Highlights
00:00 Intro
00:48 How do you optimize image loading?
01:22 The old image formats of the web
02:55 The newer image format: WebP
05:35 How to optimize png and jpg for web
07:13 What’s so cool about WebP?
09:33 Why didn't we use WebP for a long time?
12:13 Who should convert images to WebP?
13:47 Why is it so great to use just one image format?
17:06 Upload WebP directly
17:30 Dominik has an idea...
20:33 Workflow of integrating WebP
29:09 The image resizing bug (Can somebody fix it, please!)
30:15 There's no ideal image size to upload
32:29 Use WebP!


Links
Squoosh: https://squoosh.app/
Flynt: https://flyntwp.com/
WebP Express: https://wordpress.org/plugins/webp-express/
Blurry images bug report (2015): https://bugs.chromium.org/p/chromium/issues/detail?id=562162

More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel)

How do you make sure every developer on a website project sees the same content across environments? How do we maintain stable development environments for very old websites? And on which environments do we present code changes to our clients? In this episode Dominik and Steffen give insights how they set up the deployment and cloning process and architecture at Bleech.


Highlights
00:00 Intro
00:31 Why care about the development server setup?
01:44 How we deployed back in the days
05:24 How we synch database and assets across development environments
07:05 Local environments on a remote server
10:33 The challenge with maintaining build processes
15:07 How we set up environments, cloning and deployments
21:21 When we split development and staging
22:41 More environments increase complexity
24:34 Dominik's favourite stack and process
31:10 Beware of data privacy!
32:47 A typical workflow for new projects
37:26 The future of dev environments


Links
StackBlitz: https://stackblitz.com/
CodeSandbox: https://codesandbox.io/
InstaWP: https://instawp.com/

More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel)

With caching you can speed up the loading time of your website. In this episode Steffen and Dominik dig into types of caching and discuss different WordPress plugins. It seems popular caching plugins turn into huge optimization plugins, but they might not necessarily be the right choice.

Highlights
00:00 Intro
00:29 What is caching?
01:32 Three big types of caching
06:57 It's not the browser cache!
07:35 How to achieve the biggest impact with low effort?
10:44 Looking at different WordPress caching plugins
16:20 Think twice before choosing a complex plugin
17:45 How we cache browser assets indefinitely
23:23 Our advice on WordPress caching
32:38 Conclusion


Links
Cache Enabler: https://de.wordpress.org/plugins/cache-enabler/
WP Super Cache: https://de.wordpress.org/plugins/wp-super-cache/
W3 Total Cache: https://wordpress.org/plugins/w3-total-cache/
Enable Media Replace: https://de.wordpress.org/plugins/enable-media-replace/
WP Fastest Cache: https://wordpress.org/plugins/wp-fastest-cache/
Autoptimize: https://de.wordpress.org/plugins/autoptimize/
WP Rocket: https://wp-rocket.me/

More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel)

In this episode, Steffen and Dominik discuss why the verdict on the use of Google Fonts is so absurd. Does this mean that for all other services that work similarly, a ruling has to happen first? Will courts decide on designs in the future? And what could the ruling mean for free and paid fonts?

Highlights
00:00 Why do people get sued over Google Fonts?
03:44 How to load fonts from a local server?
08:01 Why is the verdict absurd?
09:46 What's the problem with Google Fonts?
13:41 Loading Google Fonts via other services (reCaptcha)
22:43 Accomplish GDPR privacy = impact on competitiveness
29:10 Why is it so easy to load Google Fonts?
33:18 Future of paid and free fonts

Links
GDPR: https://gdpr.eu/
Google reCAPTCHA: https://www.google.com/recaptcha/about/
Plausible: https://plausible.io/

More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel)

In this episode, you'll learn how to use visual regression tests in WordPress to track website changes. We explain the benefits of visual tests, how they'll help you detect critical issues and how you can set up visual regression tests with software libraries or WordPress plugins.

VRTs WordPress Plugin
https://vrts.app

Highlights
00:00 Intro
00:22 What are visual regression tests (VRTs)?
01:39 Why we build a VRTs plugin for WordPress
04:54 Experience with BackstopJS
11:40 Questions to consider before building a tool
14:22 Why don't we use an existing tool?
18:02 Why did we need visual regression tests for our websites?
19:00 Reason 1: Automatic Plugin-Updates
24:45 Reason 2: Code-Changes
25:28 Reason 3: Unnoticed Changes
30:31 How does our plugin work?
33:47 The technical structure
37:35 Don't miss the promo code and get 50% off :)
38:58 Why VRTs is so simple

Links
VRTs WordPress Plugin: https://wordpress.org/plugins/visual-regression-tests/
BackstopJS: http://garris.github.io/BackstopJS/
Selenium: https://www.selenium.dev/
PhantomJS: https://phantomjs.org/
Puppeteer: https://pptr.dev/
Playwright: https://playwright.dev/
Storybook: https://storybook.js.org/
Flynt Starter Theme: https://flyntwp.com/

More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel)

We've seen it many times: a cookie banner pops up on a website, but it's clearly not working as expected. External scripts are loaded right away and cookies are set without consent. What's okay to load, what isn't? How are necessary cookies defined? Who's responsible? And what would we like to of see consent management in the future?

Highlights
00:00 Intro
00:48 What is consent management?
02:48 How we use the cookie banner
04:59 Accept all cookies or pay?
08:44 Goal of the GDPR failed
10:28 What's the problem with cookie banners?
11:50 Example: Saving a language / country
13:13 What does the German law TTDSG §25 say?
15:25 Handling embedded YouTube Video on your website
17:58 How do you check, if a cookie banner is wrongly implemented?
22:57 Can you rely on consent management tools?
27:16 Become more aware of the right way doing consent management
34:24 Solution: Go privacy by design

Links
Borlabs Cookie: https://de.borlabs.io/borlabs-cookie/
TTDSG §25: https://www.gesetze-im-internet.de/ttdsg/__25.html
Chrome DevTools: https://developer.chrome.com/docs/devtools/open/

More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel)

To start off the podcast, Dominik and Steffen dive deeper into the question: for what or for whom should PageSpeed be optimized?

The user should be in the main focus of PageSpeed optimization, because a fast website contributes to a good UX. But should you consider users who come for the first time to the homepage or should you look at returning visitors?

On the other hand a high PageSpeed score is one of the most important numbers for website clients these days. Does increasing the score - without the user in mind - force developers to think of techniques to trick the measurement tool?

Highlights
00:00 Intro / Understanding Core Web Vitals
01:06 What did Dominik do to optimize the Bleech website?
02:16 What is Blackhat PageSpeed Optimization?
04:36 Should you consider Core Web Vitals or page speed ranking?
17:15 How did we optimize the page speed of bleech.de?
22:52 Why is this way blackhat?
26:57 The problem with Third-Party Scripts
29:08 What's the future of website optimization?
39:27 Wrap up

Links
Our website: https://bleech.de
PageSpeed Insights: https://pagespeed.web.dev/
Core Web Vitals: https://web.dev/vitals/
Plausible: https://plausible.io/
Borlabs Cookie: https://borlabs.io/borlabs-cookie/
Flynt WordPress Starter Theme: https://flyntwp.com/
Partytown: https://partytown.builder.io/
web-vitals JavaScript Library: https://github.com/GoogleChrome/web-vitals

More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel)