Tag Archives: developer

Things that can be cached in WordPress Cache

WordPress Cache What can be Cached and How We Do it

Caching is one of technologies which can contribute to site speed. Besides, caching will enable your stored data to be available for future requests. Some web developers might be familiar with it, some might not. But, if you haven’t been familiar with caching, you can learn more about it in this article. This article will explain what WordPress cache is and how it can be implemented on many different levels.

What is Caching?
In computing, the word “cache” is quite familiar. It refers to software or hardware component which is temporarily used to store values and retrieve them faster in the future. Values include MySQL queries, or compiled PHP bytecode as well as duplicate data, such as HTML and images.

In fact, we can gain a significant performance advantage by making copies of data and placing them in the “caching” component. This is because your visitors can retrieve cached content much faster than un-cached. Besides, your performance improvement can enhance depends on how much data that you can cache.

Things that can be cached
There are several levels, depending on how far you want to go in optimizing your website using caching. Here they are:

  • HTML Output
    You can find many plugins that can help you cache the HTML page itself. For instance, you can use WP Rocket and W3 Total Cache that can perform cache and many more. These plugins cache the result of the HTML output saving time for future requests. In fact, you can serve uncached content for every plugin have a cache invalidation mechanism.
    You can also try to “minify” HTML to make it smaller. This will add up a couple of kilobytes per page and keep increasing over time.
  • PHP OpCache
    A technique which PHP takes the source PHP files and compiles them into an intermediary form called bytecode is named OpCaching. Bytecode is like a computer’s machine code, but it refers to machine code that is executed by a “virtual machine” rather than by a real one. Fortunately, it can be executed quicker than having the PHP interpreter parse a command at a time since it is machine code and resides in memory.
    At a certain level, caching stores these bytecode data into memory, this causes your application gets executed faster. Besides, in order to have PHP OpCache enabled, you need to have access to the PHP configuration file.
  • PHP Object Cache
    This cache is done on the language’s OOP level. It uses the concept of “objects” to describe logic, data, and ideas. Objects are constantly being created and destroyed as your application runs. This technique solves the problem by caching the objects themselves.
    You can find PHP object cache in Memcached and the assorted ones for Redis. However, in order to enable PHP Object caching, you need to have access PHP configuration.
  • MySQL Query Caching
    The idea might be the same with PHP object cache, unless it is applied at a database level. A set of data are returned by the database based on the query that was entered. In fact, someone can get data much faster if someone has called the same data first. This is because they would reside cached in memory. But, you need to have access to the database server.

7 Pop Ups Tricks to Avoid Hurting Your SEO Efforts

Blog5June-01

Using pop-ups add in your website can be a confusing task. Especially since, Google’s mobile has just released its new update, Google’s mobile interstitial penalty. Many web developers are still arguing whether to use or not to use pop ups. In this article, we reveal 7 simple tricks to minimize the risk for using pop-ups without harming your SEO.

  1. Understand Which Interstitials are No-goes

Lately Google’s mobile interstitial penalty has become one of the most popular updates. “Interstitial” is a broad term that refers to most pop-ups, overlays, and modals. However, not all interstitials are considered equally intrusive.

As a general rule of thumb, your mobile page may be devalued if your interstitials are spammy, difficult to dismiss, or diminish your users’ experience. In addition of mobile indexing, this will hurt your positions in the SERPs.

Below are examples of interstitials that make your content less accessible:

  • Content-covering pop-ups which users are forced to close it before they can continue reading.
  • Standalone interstitials that appear before users can access your content.
  • Deceptive page layouts whose above-the-fold portion looks like an interstitial.

Moreover, there are some ads that Google’s known to dislike and has penalized in the past, including:

  • Classic interstitial ads and splash ads that interrupt users since they navigate between pages or before they reach your homepage.
  • Annoying window pop-ups that appear as soon as a user clicks on your page.
  • Welcome mats, new window pop-ups, and other intrusive ads.
  • Confusing overlay modals or easily redirects visitors who accidentally click on them.
  • Intrusive lightbox ads and pop-ups.

These don’t mean that all interstitials are forbidden for interstitials triggered by exit intent are still permitted.

  1. Continue Using Non-Intrusive Interstitials

If Intrusive interstitials are bad, non-intrusive interstitials are oppositely good for your SEO. Non-intrusive interstitials are information such as age verification interstitials, and cookie use notifications. It also includes other pop-ups, such as banner ads; slide ins, in lines and tabs. This is because they take up only 15 percent or less portion of the screen than it is recommended.

The important thing is to avoid covering all of your screen with full-screen overlays, welcome mats, and ad modals. Instead of using them, you can use other options, such as top banners and slide-in boxes.

  1. Switch to Timed Pop Ups

If you have to continue to use pop-ups and overlays, you can try to redesign and change the timing of your interstitials. For instance, you get used to place a pop-up right after a user lands on your page. Now you can display the pop-up before your users leaving your blog post.

Another idea is to limit how long pop-ups are displayed. A pop up that can automatically close after several seconds is way better than one that should be closed.

  1. Watch Out for “Gray Area” Interstitials

You might be surprised that some interstitials might be devalued as Google consider them as intrusive interstitials. They are sticky sidebars, related posts, share button, live chat boxes, and coupon pop-ups. Even though, they may not produce big negative impact on your SEO, but you better avoid them than sorry.

  1. Use Permitted (but Intrusive) Pop-ups cautiously

There are some ads that are definitely interruptive but aren’t penalized yet. This is because Google will inspect them later.

  • Page-to-page interstitials: We all know that Google values good UX, but page to page interstitials are not good UX.
  • Interstitials triggered by exit intent: Pop-ups triggered by exit intent aren’t penalized by the new update. To avoid landing on the wrong side of the interstitial penalty, you can place a no index tag in your code.
  1. Intrusive Ads on Desktop is still Allowed

The easiest way to solve this problem is by hiding pop-ups on mobile devices. However, you can keep using them for desktop visitors. In fact, you can find some pop-up plugins that allow you to display your ads on any particular platforms. However, this is not a permanent solution as intrusive pop ups would diminish your UX. Therefore, it could be penalized under a future update.

  1. Restrict Pop-Ups to Sources Other Than Google Organic Search

Another way to avoid the interstitials penalty is by finding your websites from other sources outside Google organic search results. In addition, don’t feel too pressured to switch, if organic search drives a lot of your traffic and it generates leads. Bear in mind that useful content is above the other things, so one or two interstitial ad won’t lose a website.

Bootstrap 4 Alpha 6 Major Components in Flexbox

Bootstrap-4-Alpha-6

Alpha 6 has just launched and it becomes the biggest ships to date.  Hence, in this article we will describe its grid system and major components in flexbox. If you are web developers who are currently working on WordPress, this article is for you. Discover what’s new with Bootstrap 4 Alpha 6, here!

Embracing Flexbox
As bootstrap is now flexbox by default, you can control your grid system and core components and provide unparalleled flexibility. However, it may be dropping IE9 support yet brings significant improvements to component layout, alignment, and sizing.

If you have no idea about Flexbox, here are some benefits that you can have when applying Bootstrap 4:

  • No more HTML white space or broken table-style rendering
  • Auto margins for easy spacing
  • Automatic equal-width grid columns (e.g., two columns are automatically 50% wide)
  • Equal height and equal; width cards
  • Utility classes for easily changing display, direction, alignment, and more.
  • Justified navigation and button groups
  • Vertical and horizontal centering without hardcoding values with translate or margin

In fact, almost every component now takes advantage of flexbox. This is because less reliance on clearfix, more control over Dom, and visual order, and fewer bugs. Even, Carousels, a more complex component has used Flexbox in some areas.

Responsive Utilities and the Great Infix
Among so many advantages that Alpha 6 offered, they also made two important changes to their naming scheme.

  • First, we’ve dropped the –xs infix from our lowest (extra small) breakpoint. However, xs isn’t a responsive breakpoint just like sm, md, lg, and xl. This is because it doesn’t start applying styles at a min-width and up. It can be applied to everything as there’s no bounding @media query.
  • Second, to better articulate their property value pairings, we’ve renamed several classes. Instead of pull, we use float. You can start with the property name, instead of creating new names for the various flexbox properties.

Combine them together and you’ll get updated class, such as .col-6, .d-none, .float-right, .d-md-flex, .justify-content-end, and .text-lg-left. With these classes, you can have immense power and customization to folks building with Boothstrap.

More Grid Improvements
You will also have more grid improvements. By adding responsive auto sizing columns, more container padding options, and add any number of .col-* classes, the result will automatically be equal in width.

To remove gutters from grid rows and their columns, you can use the .no-gutters modifier.

Updated Navbar
If you find that the Alpha 5 navbar still needs more improvement, you’ll see that the Alpha 6 is done perfectly. The navbar has been rewritten and it provides better built-in responsive behaviors and improved layout customization.

Here are some of the lists of the updates:

  • The responsive navbar toggle, .navbar-toggler, has also been updated. The icon is once again a child element, .navbar-toggler-icon, for improved customization. It also includes easy modifiers for absolutely aligning it to the top right or top left.
  • Navbar navs no longer require the .nav base class. While it provided a starting point, these shared styles often got in the way of navbar behaviors. Now it’s just .navbar-nav and utilities for alignment.
  • Navbars are built with flexbox! Instead of floats, you’ll need flexbox and margin utilities.
  • The .navbar-toggleable classes are now applied to the .navbar instead of the .collapse within. This allows us to provide better responsive behavior with just one class change.