How-To’s

How to create a Let’s Encrypt SSL encrypted Reverse Proxy for Plex in OpenMediaVault

I’ve been messing around for a long time with creating reverse proxy‘s for the applications I use with OpenMediaVault. Creating a Let’s Encrypt SSL encrypted reverse proxy for Plex especially. But in the last few days I finally managed to achieve it. Today I’m going to share with you how to create encrypted Reverse Proxy for Plex in OpenMediaVault 2.x using Let’s Encrypt free SSL-certificates.

The 30-Minute-Guide to a 100/100 Score on Pagespeed Insights and Pingdom

By now your Pingdom score should be nearing the 100. However, Google Pagespeed is a bit harder to satisfy. Google gives great rewards to sites that efficiently handle their above-the-fold content and severely punishes those that don’t. Even after all the optimizations we already did in the previous chapters, Pagespeed will still show a big red warning: eliminate render-blocking Javascript & CSS in above-the-fold content. Luckily, we’ve got Autoptimize on our side.

Extracting your Above-the-fold Content with Critical Path CSS Generator

We’ll be using Autoptimize to eliminate the following warning in Google Pagespeed Insights:

  • Eliminate render-blocking Javascript and CSS in above-the-fold content.

In order to do this, we need to collect all of our CSS code so we can extract the Above-the-fold Content from our WordPress blog. Recently I found a free online which makes this insanely easy.

  1. Go to Sitelocity.com,
  2. Enter your site’s URL,
  3. Wait a few seconds,
  4. Do a victory dance!

Eliminate render-blocking Javascript and CSS in above-the-fold content with Autoptimize

In order to stop the Javascript and CSS from render-blocking you must add the Critical Path CSS you just generated to your site’s header. For this we’re going back to Autoptimize’s settings:

Within the ‘CSS Options’ section there’s an option called ‘Inline and Defer CSS?’ That’s exactly what we’re looking for.

Check this option and paste your Critical Path CSS (the first text area on Sitelocity.com — you don’t need the second field!) into the text area that just magically appeared. Be sure to remove the <style> and </style> nodes wrapped around the generated output your just copied. Click ‘Save Changes and Empty Cache’.

Extra Auto-Optimizations

"Autoptimize

If you run another Pagespeed Insights analysis you’ll see that your score has increased even more! Maybe it has even reached the perfect 100/100 score.

Probably, you will never see eliminate render-blocking Javascript and CSS in above-the-fold content as a suggestion in Google Pagespeed Insights anymore. In some cases, it might still be listed as a (yellow) ‘consideration’. Either Autoptimize’s CSS-file or another file could be blocking the page from rendering immediately. In any case, Autoptimize offers a few tiny tweaks that I’d recommend to anyone.

Combine External Javascript: Disable Emoji’s

I don’t think anyone uses this feature in WordPress.

While it is forcefully integrated into the WordPress-core, our new BFF Autoptimize offers an options to disable it:

  1. Click the ‘Extra’-tab in Autoptimize’s Settings-page,
  2. Check ‘remove emojis’.

This disables wp-emoji.js from loading entirely, eliminating one more DNS lookup from your total pageload. Now you can wave goodbye to Pagespeed Insights’ and Pingdom’s suggestion to combine external javascript.

Remove Query Strings from Static Resources

Also located within the ‘Extra’-tab you’ll find another useful feature in Autoptimize. It’s the option to remove query strings from static resources. This does not improve pageload times, but does improve your score on Pingdom and Pagespeed Insights. It removes the ver parameter from all your static (JS and CSS) resources, guaranteeing maximum usage of each visitor’s browser cache.

Leverage Browser Caching: Host Google Fonts Locally

You might’ve noticed the different options Autoptimize offers for Google Fonts. The most interesting option here is ‘Remove Google Fonts’.

Autoptimize implements an efficiënt way to parse your blog’s source and remove any URL’s pointing to Google’s Webfont services.

Just removing them will break your sites typography and design. Before removing them, you need locally hosted copies to replace them with. That’s why I built OMGF. Combining Autoptimize with OMGF is simply the easiest, most efficient way to locally host Google Webfonts and leveraging your browser cache. I suggest you click that link.

You’re welcome.

If you’re a Google Analytics user and you’re being punished by Pagespeed Insights and/or GT Metrix and/or Pingdom for using it, it’s about time you learned about CAOS. It does exactly what OMGF does for Google Fonts: it allows you to use Google Analytics with an always up-to-date, local version of analytics.js, instead of an externally hosted version. Effectively leveraging your browser cache even further, while preserving Google Analytics’ full functionality.

Summary

In this chapter we’ve focussed on eliminating render-blocking Javascript and CSS in above-the-fold content by configuring Autoptimize to use our pre-generated Critical Path CSS. Using Autoptimize’s advanced features, we’ve also discovered ways to eliminate suggestions such as combine external JavaScript, leverage browser caching and remove query strings from static resources. Congratulations! You’ve officially tweaked your WordPress blog for maximum performance. Have any questions or remarks? Leave a comment!

How to Locally Host Google Fonts and Leverage Browser Caching

Google Fonts. Every WordPress blogger uses them. It’s an easy — if not the easiest — way to improve your blog’s looks. Pagespeed Insights. We’ve all heard of that too. And we all want to achieve the highest possible score. Both are brought to you by the same entity we’ve come to know, love — and hate: Google. Love, because they gave us these beautiful fonts. Hate, because as soon as we use them, it lowers our score on Pagespeed Insights!

Today I’m showing you how you can achieve the best of both worlds:

  1. Maintain your high score on Pagespeed Insights by leveraging your browser cache, and
  2. Keep using your Google Fonts by hosting them locally.

And I promise you, it couldn’t be easier.

Redirect Simple Products to their Configurable Parent with Attributes Pre-selected in Magento 2

About two years ago I wrote a tutorial on how to redirect simple products to their configurable parents with pre-selected attributes in Magento 1.9.x. Shortly after that Magento 2 was released and I’ve received some requests on how to do the same in the new version.

In this post I will explain to you how to build a module that will redirect simple products to their configurable parent product with automatically pre-selected configurable attributes.

Fix ‘Uncaught TypeError: Cannot read property ‘updateData’ of undefined’ in Magento 2

Many people have complained on Magento Dev’s Github about a bug in Magento 2, which occurs when you try to pre-select configurable attributes by parsing the URL. It triggers an Uncaught TypeError in your console and causes all Javascript execution to crash, causing the image gallery not be updated. In this tutorial I’ll show you how to squash this bug.

Complete Guide to GDPR Compliance for Google Analytics in WordPress

I’ve already written a lot of posts ever since the new GDPR laws were introduced. Most of CAOS’ code had to be rewritten for the sake of GDPR Compliance. Now we’re nearing — the big — v2.0 and many options have been added. To WordPress — and CAOS. This post will function as a Complete Guide through the jungle that is called GDPR Compliance.

Leverage Browser Caching by Hosting Analytics Locally with Monster Insights’ WordPress Plugin

It’s a great performance boost for your website to host analytics.js locally. This helps you leverage browser caching, get a perfect 100/100 score on Pagespeed and Pingdom and raise conversion.

An average blog can locally host analytics.js without any fuss. If you’re in ecommerce (e.g. WooCommerce) things get tough, because hosting your Analytics file locally, usually means you can’t use most of Google’s Universal Analytics features.

Today I’m going to show you how you can easily host analytics.js locally, leverage browser caching and still profit from Universal Analytics’ advanced features.

How to Write Data to Custom Database Table and Create a Custom Collection in Magento 2

If you want to use your custom data, you’ll want to generate a custom collection. StackOverflow is flooded (ha! Pun-intended) with answers advising you to use the object manager, but as a wise man once told me:

“using the object manager’s baaad, mkay?”

— Mr. Mackey

The right way to generate a collection from your custom data in your Magento 2 module is using a Factory.

Generate a Custom Collection from a Database Table using a Factory in Magento 2

To gain access to your custom data, you have to define your data as a collection. Tell Magento 2 where your Data-model and its corresponding ResourceModel are:

DaanvdB/ProductQty/Model/ResourceModel/Data/Collection.php
<?php
namespace DaanvdB\ProductQty\Model\ResourceModel\Data;
use Magento\Framework\Model\ResourceModel\Db\Collection\AbstractCollection;
class Collection extends AbstractCollection {
public function _construct() {
$this->_init( "DaanvdB\ProductQty\Model\Data", "DaanvdB\ProductQty\Model\ResourceModel\Data" );
}
}

If we want to show the data in a Block, Magento 2 allows us to use our Custom Collection to get the data from our Custom Database Table:

DaanvdB/ProductQty/Block/Data.php
<?php
namespace DaanvdB\ProductQty\Block;
use Magento\Framework\View\Element\Template;
use DaanvdB\ProductQty\Model\DataFactory;
class Data extends Template {
protected $dataFactory;
public function __construct(
Template\Context $context,
DataFactory $dataFactory
) {
$this->dataFactory = $dataFactory;
parent::__construct(
$context
);
}
public function showData() {
$collection = $this->dataFactory->create()->getCollection();
$data = $collection->getData();
return $data;
}
}
view raw Block-Data.php hosted with ❤ by GitHub

These are the fundamentals for creating a Magento 2 module which allows you to create a custom database table, write data to it and create a custom collection using a factory — and NOT the ObjectManager. I hope it was useful to you. If you have any remarks or questions or just want to compliment me, leave a comment!

Shopping Cart
  • Your cart is empty.