One of the simplest ways to ensure WordPress speed grandeur is to focus on the things that can clog down your web server: media files. Every page has loads of them. Images, videos and too many stupid GIFs. I know, I know – who am I to talk. But let’s face it: text is not the most satisfying content out there any more. But what to do if you already have exhausted all the common strategies of improving performance – such as using proper caching or optimising all images?

Offloading media to the rescue!

Offloading media means to save your images not only in the „/wp-content/uploads/“ folder – a.k.a. your web server – but also on a specialised service providing you with cheap storage and fast delivery – a Content Delivery Network or CDN for short.

But why – in the name of Tim Berners-Lee – would I waste any more of my hard-earned golden nuggets on hosting?

Anyone hosting websites on the cheap

Good that you ask. Because first and foremost your users will thank you for improved speed and better user experience – and Google will rank you better. If that alone does not tickle your buttons, then listen to this:

Spending money on offloading media and a proper CDN setup will actually save you some bucks as you scale up.

Lonely Austrian Nerd

Spending money to save money? No, I am not entirely crazy. Let me explain.

Let’s say you host the Website of a medium sized company aiming for signups to a service – and assume that you regularly send out newsletters which lead to spikes in visitors. These spikes turn your website sluggish – the reason why your conversions are down 25% in comparison to any normal day. That sucks, mate.

So how do we fix this?

Well, doubling server resources would most certainly take care of things. But it seems crazy to basically double server costs just to handle one spike every couple of months. Going static rocks hard when it comes to performance – but would also require a full rewrite of the Website.

I say let’s get rid of media. But not by getting rid of the images itself but rather offloading them to a CDN. For this Proof-of-Concept I ran a WordPress Multisite installation on a basic tier droplet of DigitalOcean ($5/month) using a managed database (MySQL, $15/month) – using flood.io to load test three pages with multiple images and 100 concurrent users – resulting in thousands of requests per minute.

Initial run without offloading media

I hear you say „are you barking mad? 100 concurrent users on a tiny droplet like that?„. Well – if caching is used (in this test I use the W3 Total Cache plugin), this fares relatively well:

So, what do we have here? As you can see by the lack of red, the rate of failed requests was actually 0 – so no failed requests at all. That’s good. However, what becomes painfully obvious is the influence of concurrency on response time – after the ramp up period the perfectly acceptable 250ms jump up to a „I-will-bounce-from-this-site“ 8500ms; a bloody disgrace to any professional Website. All in all, this should not come as a surprise – using a $5/month server to be bombarded with almost 2,500,000 requests a day (approx. 1,760 requests per minute) seems to go a bit overboard

Performance of WordPress with media offloading to a CDN

New the moment of truth: how does WordPress fare when offloading all media to a CDN? Well, great. But before diving into the data let me explain what exactly I offloaded – so that you can judge the possible impact offloading media to a CDN can have for your WordPress installation.

First of all, I used DigitalOcean’s „Spaces Object Storage“ with a custom subdomain to offload media from my server. The process of uploading all media automatically to this object storage is done – quite unusually – not by plugin, but by using a combination of Lsyncd and s3cmd. But let’s not get distracted by the more exciting parts of this PoC and get back to the boring data – a post will follow on how to build a similar setup.

Same testing period, same ramp-up period – and most important of all, same amount of concurrent users. As you can see in the comparison above, the results are quite striking. Not only was the test able to run at a substantially higher transaction rate of 2,250 requests per minute – an increase of well over 25% – but also the response times decreased mindbogglingly: from a catastrophic 4.7 seconds to an average of 166ms. I cannot stress this improvement enough: while serving approximately 3,240,000 requests a day the response time decreased to an average of 3,5% of the initial reaction time – all at the negligible cost increase of $5/month.

How far can we push this?

So, now we have seen a direct comparison of WordPress running on a small server without and with CDN. We saw that offloading media to a CDN yields substantial benefits to anyone trying to squeeze out every inch of performance from good ol‘ WordPress.

Well – to be perfectly honest, this has nothing to do with WordPress itself. The reason why this works so well is simple: by offloading media to a managed service hosted somewhere else, there is no need for our server to flex its muscles. As the images are not loaded from the same host as WordPress, the web server (Apache in this case) does not have to work as hard due to fewer requests made (about half actually – but this greatly depends on your site/workload). Consequentially, with less requests the CPU does not need to work as hard, the memory does not fill up as quickly and the drives hum along softly as there are very few files to serve.

This is all great. But when are we finally going to break things?
Patience, young coder.

Alright – how far can we push this? Let’s give this another run – and triple the number of concurrent users to 300.

While it still amazes me that this setup can handle over 6.2 million requests per day without returning a single error, one thing becomes clear: with an average response time of almost 10 seconds we won’t be winning any medals from our customers. Nevertheless, this PoC strengthens my view that scaling WordPress is not only a matter of pushing more money to a better hosting provider but substantially depends on your ability to optimise.

Summa summarum

In this post we used Object Storage to offload our WordPress media. This enabled us to more than double the amount of concurrent users our server can handle – and still leaves some room for further optimisation, such as offloading CSS and JavaScript files, offloading minified files generated by T3 Total Cache, switching from Apache to nginx, …

Your Website experiences spikes and you want to save a buck while still being able to handle more users? Go ahead and use a CDN – your visitors will thank you with higher sign-up rates.

How do you optimise your WordPress installations?

The post Performance gains from offloading WordPress Media to S3 / DigitalOcean Spaces appeared first on jiaa.io Blog.

Delete your h1 element so we can simplify our view.

freeCodeCmap

Well, there is not much to it, to be perfectly honest… We need to mark the <h1> element including its content and hit the delete key, so the code looks something like this:

<h2>CatPhotoApp</h2>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

While it’s a bit sad to see the very first HTML element we added go, life goes on – so we need to adapt I am quite sure we’ll add some new friends soon

Summa summarum: this task was very much straight forward: we simply had to delete the <h1> heading element we added a couple of tasks ago. In order to do so we mark the HTML element (starting and ending tag) as well as content and remove it.

Photo by Thought Catalog on Unsplash

The post freeCodeCamp: Delete HTML Elements appeared first on jiaa.io Blog.

Comment out your h1 element and your p element, but not your h2 element.

freeCodeCamp

Well, that’s an oddly specific task. And while it is important to know that you can hide elements including its content from the user by commenting out HTML, it is equally – if not more – important to understand, that comments can be used for all kinds of useful things. Georgie Luhur formulated five different reasons why comments are so important:

• Comments can help maintain consistency
• Comments facilitate understanding
• Commenting can also assist with hotfixes or quick fixes
• Comments help speed up the development process
• Comments facilitate more efficient collaboration
• Comments help a lot of people

Read his post on sitepoint.com, it’s a good read!

But let’s rise to the challenge and finish this daunting task ? The following is given:

<!--
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
-->

As indicated in the description, we need to let the <h1> headline element as well as the <p> paragraph element commented out while making the <h2> headline element visible to the user. The following should do the trick:

<!--
<h1>Hello World</h1>
-->
<h2>CatPhotoApp</h2>
<!--
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
-->

Summa summarum: this task is about removing the HTML commenting tags of one element, while retaining the comments for the other two elements. Therefore, we need to add the ending tag of HTML comments –> after the <h1> headline as well as add the beginning tag <!– after the <h2> headline element. And that’s it

Photo by Luca Bravo on Unsplash

The post freeCodeCamp: Comment out HTML appeared first on jiaa.io Blog.

Commenting is a way that you can leave comments for other developers within your code without affecting the resulting output that is displayed to the end user.

Commenting is also a convenient way to make code inactive without having to delete it entirely.

freeCodeCamp

And that’s actually almost everything there is to say about „uncommenting“ HTML elements. While we will explore different strategies on how to properly comment your HTML in the future, this task is about uncommenting the code provided:

<!--
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
-->

What this task asks us to do is quite straight forward:

Uncomment your h1, h2 and p elements.

freeCodeCamp

So how do we uncomment HTML? We simply get rid of <!– which starts a comment, and remove –> which ends comments in HTML. The result should look somewhat similar to the following:

<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

Summa summarum: this task is about removing the HTML commenting tags in order to restore the markup to all its previous glory – meaning, that it actually shows up again. Therefore, we need to delete the opening tag of HTML comments <!– at the very beginning as well as the closing tag of HTML comments –> at the end of the markup provided. This is important as HTML comments not only enable us to hide elements temporarily, but with a proper commenting strategy in place we can document the HTML we wrote so others can understand and build upon it.

Photo by Mikhail Vasilyev on Unsplash

The post freeCodeCamp: Uncomment HTML appeared first on jiaa.io Blog.

Web developers traditionally use lorem ipsum text as placeholder text. The lorem ipsum text is randomly scraped from a famous passage by Cicero of Ancient Rome.

freeCodeCamp

Only second to „Hello World„, „lorem ipsum“ is one of the best known secrets in the development- as well as design community. While its origin is widely disputed, there seems to be agreement that this seemingly random text derives to a certain degree from Cicero’s „De finibus bonorum et malorum„.

The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn’t distract from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful when the focus is meant to be on design, not content.

loremipsum.io

Furthermore – and probably more important – this „placeholder text“ is not to be confused with the placeholder attribute, an HTML attribute associated with the <input> and <textarea> elements. This attribute shows a hint to the user in order to describe the expected input value. Often you will see this i.e. with login forms, indicating username and password.

Well, to stop beating around the bush – in this task freeCodeCamp asks the following of us:

Replace the text inside your p element with the first few words of this kitty ipsum text: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

freeCodeCamp

Alright – finishing this task should be quite straight forward: just change the content between the <p> element:

<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Kitty ipsum dolor sit amet</p>

And sure enough, we made it ???

Summa summarum: this task is about changing the text between the paragraph element of the previous solution. In order to do so, we need to change “Hello Paragraph” in between the <p> and </p> tags to „Kitty ipsum dolor sit amet„.

Photo by Marcel Friedrich on Unsplash

The post freeCodeCamp: Fill in the Blank with Placeholder Text appeared first on jiaa.io Blog.

The next task for our in depth freeCodeCamp session on „Basic HTML and HTML5“ is quite straight forward:

Create a p element below your h2 element, and give it the text „Hello Paragraph“.

freeCodeCamp

Remember the previous tasks? First, we head to add a majorly important <h1> headline, then we went on to add cat content with an unbearably difficult <h2> headline. While I make it sound like this is nothing at all, in fact, this is already quite important: if we get the semantics wrong search engines, screen readers and markup junkies will want our head for wasting their time. Yes, I am talking to you, you <div> taggers!

The web being made for the exchange of information and all, let’s dive into the nitty-gritty stuff of the paragraph tag

The HTML <p> element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.

MDN web docs

I would like to emphasise the part about „structural grouping of related content“: this means that so called phrasing content should be placed between <p> and </p>. Not more, not less. I know, this sounds quite theoretical – but fear not: if it fits into a sentence, then it is phrasing content. You want to make something bold for example. Does it fit into your sentence? YES IT DOES. Therefore, it is phrasing content. This holds true for images, links and many other things – probably best described in this answer on Stack Overflow.

The <p> element allows tag omission if the opening tag is immediately followed by certain elements (LMGTFY) and includes global attributes – a funky way to provide additional information.

So what about the answer for the freeCodeCamp task? Do not dismay, my friend. If you want to add a paragraph, you simply add:

<p>This is a funky little paragraph</p>
<p>This is a second funky little paragraph</p>

To complete the task at hand we have to add a <p> tag with the asked for content in between so it looks something like this:

<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Hello Paragraph</p>

Summa summarum: this task is about adding a text paragraph to the previous solution. In order to do so, we need to add “Hello Paragraph” as content in between the <p> and </p> tags. This is important because browsers, screen readers and search engines would not know what they are looking at and might wrongly label your content to the disadvantage of your users.

The post freeCodeCamp: Inform with the Paragraph Element appeared first on jiaa.io Blog.

By completing the HTML task so admirably, we now have a similar step ahead:

Add an h2 tag that says „CatPhotoApp“ to create a second HTML element below your „Hello World“ h1 element.

freeCodeCamp

Why not use another heading element, such as the <h3> element? Good you ask.

Because it screws with semantics!

Well, that escalated quickly… It’s no understatement, however. While you might be perfectly fine reading the <h3> element above on your fancy hipster retina display, a lot of users and even more machines will struggle to do the same – because they depend on a page’s right semantic to understand what your awesome page is about. Sorry about the insult btw.

So how to structure headings the right way? MDN to the rescue!

<h1>Beetles</h1>
    <h2>External morphology</h2>
        <h3>Head</h3>
            <h4>Mouthparts</h4>
        <h3>Thorax</h3>
            <h4>Prothorax</h4>
            <h4>Pterothorax</h4>

Now, let’s apply this to the task at hand. We are given the following:

<h1>Hello World</h1>

Looks familiar? Yes, it’s what we provided in the last task.

<h1>Hello World</h1>
    <h2>CatPhotoApp</h2>

The tab used to visually divide the <h1> and the <h2> element will not influence our result – it’s there to give yourself some slack, using whitespace. And yes, it works for code too!

Summa summarum: this task is about adding a subheading to our previous solution. In order to do so, we need to add „CatPhotoApp“ as content in between the <h2> and </h2> tags.

Photo by Jae Park on Unsplash

The post freeCodeCamp: Headline with the h2 Element appeared first on jiaa.io Blog.

As the intro to this task explains, most HTML elements have an opening and a closing tag – in the example of this task it is…

<h1>

… for opening a primary headline and …

</h1>

… for closing it. In between these two tags the content rules the lands with an iron fist. Not exactly rocket science, is it? Do not despair, however! There are a couple of things one has to know about these HTML section heading elements. The content permitted between heading tags is so called „phrasing content“ – content that makes up paragraphs. I know what you are thinking: Captain obvious, at your service.

But this is quite essential if you care about valid HTML. And you should, as this not only influences performance and your SERPs, but gives visitors using supporting technologies a way to properly use your website. So don’t screw this up, mate! If you want to know more about what goes where and why, MDN has your back!

Back to the task at hand.

To pass the test on this challenge, change your h1 element’s text to say „Hello World“.

freeCodeCamp

What we have to do is quite straight forward. We have to change this…

<h1>Hello</h1>

… to this…

<h1>Hello World</h1>

Manageable, right?

Summa summarum: this task is about changing the content of the primary headline. In order to do so, we need to add the asked for content in between the <h1> and </h1> tags.

Photo by Drew Beamer on Unsplash

The post freeCodeCamp: Say Hello to HTML Elements appeared first on jiaa.io Blog.

HTML, or HyperText Markup Language, is a markup language used to describe the structure of a web page. It uses a special syntax or notation to organize and give information about the page to the browser. Elements usually have opening and closing tags that surround and give meaning to content.

freecodecamp.org

There are already very good hints in this short paragraph to answer the question „What the heck is HTML?“. MDN starts a bit more vague:

HTML (HyperText Markup Language) is the most basic building block of the Web.

MDN web docs

However, this is quite right – without HTML the Web as we know it would not be the same. We could theoretically live without other building blocks such as CSS (which describes the visual presentation) and JavaScript (which describes functionality), but not without the general structure. As probably most of you know, the foundations of the Web were laid out in 1989 by the British physicist Tim Berners-Lee at CERN. In his proposal „Information Management: A Proposal“ he detailed the need for „linked information systems„, using the non-linear text system „hypertext„. The term hypertext, however, was coined decades before Berners-Lee’s proposal by Ted Nelson – around the 1950s.

While Berners-Lee created HTML in late 1991, it was not released until 1993. However, the first officially published specification was not HTML 1.0 but HTML 2.0 in the year 1995 – and can be read in all its glory in RFC 1866.

But I am losing myself in awesome tech-history Probably most important is the syntax of HTML: by using opening and closing tags the content of a page receives semantics, thus its meaning. freeCodeCamp provides the following example:

What this does is easily explained:

<h1>Top level heading: Maybe a page title</h1>

This defines a primary headline of a page. Being the first of the six section heading elements (<h1>-<h6>) this headline represents an important part for every page. Therefore, this element should be chosen with care as it influences not „only“ the semantics of the page, but also how screen readers interpret the content within and how search engines rank the page.

<p>A paragraph of text...</p>

Well, the text itself says it all: the <p> element defines a paragraph, grouping related content such as text, images and links together. Paragraphs are block-level elements, so they always start a new line and take up the full width available within their parent element. They also allow tag omission – meaning that the end tag can be omitted if another block-level element or no element follows within its parent.

<ol>
  <li>Number one on the list</li>
  <li>Number two</li>
  <li>A third item</li>
</ol>

The <ol> element defines ordered lists – with <li> elements representing the items of that list. Items within ordered lists are automatically numbered and can receive values as well as a type classification as attributes. While <li> elements support tag omission, the end tags of <ol> elements can’t be omitted.

As you can see, there is a lot that can be said about HTML elements; therefore, it’s quite obviously that writing its specifications is not a one-man-show. Founded by Tim Berners-Lee in 1994, the World Wide Web Consortium – W3C for short – is, looking for a better word, the „governing“ body organising the development of Web-related specifications.

While there is still much more to say about the HTML, the W3C and the Web, I think I will leave it with this. It’s just the first task after all

Photo by Florian Olivo on Unsplash

The post freeCodeCamp: Introduction to Basic HTML & HTML5 appeared first on jiaa.io Blog.

I got there eventually – but after a year of learning how to code I realised that social networks are a dead end. Meaning: I got my ass handed to me by the competition^^

Be that as it may – since these days I have been dedicated to encourage change by using technology to solve seemingly complicated problems. I have transitioned from being a developer to product owner to product manager to digital policy aficionado and back – so it goes without saying, that my code output has suffered of late…

While I have tried to keep up to date with pet projects, there is no denying that I am less a developer than ever before. Web Development has seen such rapid change over the last decade that I am starting to feel more and more like the biggest imposter that walks this planet earth.

So what to do about this? Hiding underneath a billion emails in order to avoid my own shortcomings? Learning the latest and greatest JavaScript framework for peace of mind?

No, I think not.

I want to do this the right way – so going back to the very beginnings is the only way forward. It might be slow, it might be painful; but it is also necessary.

So what am I going to do, you ask?

I will do the curriculums of freecodecamp.org the hard way: not only going through all the tasks and projects, but I will write about them in depth; explaining, discussing and criticising my own solutions so the very basics sink in properly this time. I will commit myself to think for myself – and learn code on the way

This will take time – loads of it. But there is no way around it. Ready or not, here I come.

Happy coding

The post Deep diving freeCodeCamp appeared first on jiaa.io Blog.