Wednesday, May 31, 2017

How to Choose a WordPress Caching Solution

You know you need a fast website. Your visitors don't want to wait, Google rewards speed, and you just want to create the best site you can.

We previously talked about some strategies for speeding your site in our article How to Optimize Your WordPress Site’s Performance. One key strategy we covered in that article is caching.

Once you start googling the topic, you find that it becomes quite complex, and there are a lot of caching solutions out there. Which one should you choose?

In this article we’ll explain the options and help you make a decision.

How Does Caching Speed Up My Site?

There are a lot of benefits to using WordPress for your website. It’s easy to add new posts, tweak the way your site looks, and add new functionality. It’s definitely the way to go, and why it’s the most popular CMS in the world, powering almost 75 million sites, or over 25% of the web.

But all of that convenience comes at a price. Your web site has more work to do when someone visits your site, making it slower. Scripts need to be run, your database accessed, your theme displayed, your plugins run.

Caching changes all that.

A cache is a place to store temporary data. It takes your dynamic, easy-to-change website, and stores it as static HTML files, which are much faster to read. Each time your site is modified, the cache needs to be cleared and regenerated, which is normally triggered by a WordPress plugin.

What Are the Benefits of Caching?

There are three major benefits to using a WordPress cache:

  1. Caching enhances the speed and performance of your website, particularly page load times. Your visitors will spend less time waiting, and more time reading.
  2. Caching reduces the load on your web server. Your database doesn’t need to be accessed as often, and less system memory is used. This can make a big difference on a limited shared hosting plan.
  3. You will rank better on search engines. All other things being equal, Google punishes slow sites by ranking them lower in search results. Your site will become more discoverable, which may lead to an increase in traffic.

So, should you be using a WordPress caching solution? For most people the answer is a resounding “Yes!” It’s the one thing you can do that give a huge performance boost to your site, especially when you have high traffic.

When shouldn’t you use a cache? When you want your site to display differently to each visitor. One example is an ecommerce site, where the shopping cart will be updated differently for each user.

But these are special cases. For most WordPress sites a cache is a great idea.

So where do you get one? There are two options: pre-packaged, or roll your own.

Continue reading %How to Choose a WordPress Caching Solution%


by Adrian Try via SitePoint

Parallel Lite

Parallel Lite - FREE Multi-purpose One-page Business Theme

'Parallel Lite' is the free version of the 'Parallel' One Page WordPress theme by Themely. The long-scrolling WordPress theme is built on the Bootstrap Framework and is suited for a digital agency or freelance portfolio. Features in the free version include big intro background image, photo gallery, testimonials, services, client logos, blog feed, newsletter sign up and ends with a footer contact form.

The Pro version has additional features like drag-n-drop section ordering, intro slider or video background, WooCommerce integration, 500 Google Fonts, Clients section and more project display options.

by Rob Hope via One Page Love

#160: Production Progressive Web Apps with JS Frameworks

Mobile Web Weekly May 31, 2017   #160
Peter Cooper recommends
Production Progressive Web Apps with JS Frameworks — In this Google I/O session, Addy Osmani covers PWA best practices, patterns for efficiently loading sites and the latest tools for getting fast and staying fast.
Google Chrome Developers
Holly Schinsky recommends
Getting a Better React-ion with Progressive Web Apps — A step-by-step tutorial on how to add PWA features to your React apps.
Mike Elsmore
Brian Rinaldi recommends
If It Weren’t For Apple, Hybrid App Development Would Be The Clear Winner Over Native — The author argues that the only real roadblock to hybrid mobile development is the iOS webview and its issues.
Sam Delgado
Sponsored
Are you building mobile apps? — Which app distribution channels do you use for the apps you build? Take the Developer Economics survey and help shape trends in the global developer arena. You might also win an iPhone 7.
Developer Economics

Peter Cooper recommends
How PhoneGap is Moving Forward — A brief update, mostly summed up with “we have embarked on an initiative to update all of the Apache Cordova and PhoneGap API’s to current W3C specifications.”
Simon MacDonald
Holly Schinsky recommends
PhoneGap Day EU 2017 Recap — A recap of PhoneGap Day EU with links to presentations and other resources.
Holly Schinsky
Brian Rinaldi recommends
Mobile Web Perf on News Sites Too Slow for Many — A look at some of the conclusions and statistics in a recent report published by DeviceAtlas.
Martin Clancy
Holly Schinsky recommends
Hybrid Apps Are Unstoppable “The stack is unstoppable now, growing fast, and powering serious apps..”
Max Lynch of Ionic
Chris Brandrick recommends
Low-Hanging Fruits For Enhancing Mobile UX
Nick Babich
Holly Schinsky recommends
Debugging Ionic Applications When Deployed to an iOS Device
Joshua Morony
Holly Schinsky recommends
15 Reasons Why You Should Develop Ionic Apps
Simon Reimler
Brian Rinaldi recommends
What Google AMP Means for the JavaScript Community — AMP is a defeat for the open web community, but one that is entirely self-inflicted due to a lack of focus on performance, says the author.
Mathias Schäfer
Brian Rinaldi recommends
AMP Ads: Google Will Convert Display Ads to AMP, Test AMP Landing Pages for Search Ads — Google is launching a beta to serve AMP-enabled landing pages on mobile from Search ads and, on the Google Display Network, they will convert display ads to AMP.
Ginny Marvin
Holly Schinsky recommends
React Native In Mobile Dev: The Beginning Of The End — A breakdown of developing mobile apps with React Native.
Victor Gutsu
Holly Schinsky recommends
Notifications: A Tragedy Of the Digital Commons — Interesting ideas on how notifications could be handled differently.
Scott Belsky
Brian Rinaldi recommends
Polypane, The Responsive Web Development Browser — A cross-platform in-beta browser for responsive web design and development that lets you see a website in multiple screen sizes at once.
Kilian Valkhof


by via Mobile Web Weekly

The Facebook Algorithm Demystified: How to Optimize for News Feed Exposure

Are your posts reaching fewer people on Facebook? Wondering how to appear in more people’s news feeds? Facebook’s algorithm dictates who sees your content and who doesn’t. In this article, you’ll discover how the Facebook algorithm works, and how marketers can optimize their posts for maximum news feed visibility. #1: How Facebook’s News Feed Algorithm Ranks [...]

This post The Facebook Algorithm Demystified: How to Optimize for News Feed Exposure first appeared on .
- Your Guide to the Social Media Jungle


by Paul Ramondo via

WordPress Development, Freelancing, and Taking Time Off, with Lara Schenck

In this episode of the Versioning Show, David and Tim are joined by Lara Schenck, a freelance web consultant and educator. They discuss making a living as a freelancer, productivity and the art of procrastinating, networking and answering emails, self teaching and gaining experience, using metaphors to explain things, understanding what clients really need, taking time off, saving money, and progressively enhancing babies.

Continue reading %WordPress Development, Freelancing, and Taking Time Off, with Lara Schenck%


by M. David Green via SitePoint

40 Ways to Keep Your WordPress Site Secure

Hackers. Vulnerabilities. Brute-force. Malware. Denial of service. Man-in-the-middle. Phishing. All scary words. We live in a dangerous online world!

Has your site been hacked? I have, and we’re not alone. In 2012 more than 70% of WordPress sites were vulnerable to attack, and not much has changed since. What have you done to protect your site?

In this article we’ve pulled together security tips from previous SitePoint articles, our own experience, and from around the web, and organized them in a way I hope you find useful and understandable. And most importantly, easy to act on.

All-in-one WordPress security plugins are useful (and we’ll be covering them in our next article), but security requires more than just installing a plugin and walking away. It requires a careful strategy and constant vigilance. Be proactive, not reactive. In other words, don’t assume your site is safe—work out a security plan before you are hacked!

That being said, there is no such thing as 100% security. What you can achieve is risk reduction, and find the balance (for you) between security and convenience.

Security is not about perfectly secure systems. Such a thing might well be impractical, or impossible to find and/or maintain. What security is though is risk reduction, not risk elimination. It’s about employing all the appropriate controls available to you, within reason, that allow you to improve your overall posture reducing the odds of making yourself a target, subsequently getting hacked.” — codex.wordpress.org

Where should you focus your attention? In an article last year, WP White Security reported the following statistics about hacked websites:

  • 41% were hacked through a security vulnerability on their hosting platform
  • 29% were hacked via a security issue in the WordPress Theme they were using
  • 22% were hacked via a security issue in the WordPress Plugins they were using
  • 8% were hacked because they had a weak password

That's where the holes are in your defence. Keep that in mind while you're creating your security strategy.

OK. With all that in mind, here are 40 ways you can keep your WordPress site secure. Choose the ones that make sense for you and your site.

Secure WordPress

1. Keep WordPress Up to Date

The latest of WordPress is most likely more secure than the last one, and has less vulnerabilities. So keep it up to date—it’s a one-click operation. Make sure you back up your site first!

WordPress updates rarely cause problems, but if you like to be careful, update it on a test server first. Or, if you’d just like WordPress to auto-update itself, apply the following code to your wp-config.php file:

#Enable all core updates, including minor and major:
define ( 'WP_AUTO_UPDATE_CORE', true );

2. Back Up Your Site Regularly

Make sure you make regular backups of your WordPress site. A backup of WordPress data and files can play a crucial role in an emergency. If all else fails, you won’t have to start from scratch!

Schedule your backups so you won’t forget them, and do a test restore from time to time.

Further reading:

3. Enable SSL for WordPress Data Security

Enable SSL to secure your WordPress site. A Secure Sockets Layer encrypts all information sent to and from your site, keeping it private and preventing man-in-the-middle attacks where a third party listens in or modifies the communication between the client and the server. As a bonus it can also boost your Google PageRank.

The address of an SSL-certified site will start with an HTTPS, while a site that’s not SSL certified will begin with HTTP. It’s best to activate HTTPS before installing WordPress, but it’s possible to update your WordPress settings if you add it later. Hosting providers like SiteGround offer free SSL certificates.

Further reading:

4. Secure wp-config.php

Lock down wp-config.php—it’s one single location that contains a wealth of critical data regarding your database, username, and password. Only you should have access.

To deny access to this file, you should add the code below at the top of the .htaccess file:

<files wp-config.php>
    order allow,deny
    deny from all
    </files>

5. Move wp-config.php

Move the wp-config.php file into the folder above your WordPress installation. This will make it inaccessible to anyone using a browser, meaning a cracker has less chance of locating it.

Further reading:

6. Hide the WordPress Version Number

Some versions of WordPress have known vulnerabilities. Someone familiar with those vulnerabilities can discover which version you’re using because it’s shown in the HTML head of every page.

Remove that information by adding the following line to your theme’s functions.php file:

remove_action('wp_head', 'wp_generator');

You should also remove the readme.html file, which also contains the WordPress version number.

7. Remove WordPress References from Your Theme

Someone will only try to hack WordPress if they know you’re using it. So keep it a secret! Remove all references to WordPress from your theme files.

Find and delete the references from the header.php that look like this:

<meta name="generator" content="WordPress" />

8. Disable PHP Error Reporting

Hackers can use error messages to their advantage. For example, an error from a theme or plugin might display your server path.

To disable error reporting, add the following code to your wp-config.php file:

error_reporting (0);
@ini_set ('display_errors', 0);

9. Change the Default Secret Keys

When you install WordPress, four secret keys are written to your wp-config.php file. They improve encryption of information stored in the user’s cookies and make it harder to crack your password.

Use WordPress’ Secret Code Generator to get some new keys, and copy them into your wp-config.php file.

Continue reading %40 Ways to Keep Your WordPress Site Secure%


by Adrian Try via SitePoint

Tuesday, May 30, 2017

Check CSS Animation Performance with the Browser’s Dev Tools

Check CSS Animation Performance with Your Browser's Dev Tools

This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.

CSS animations are known to be super performant. Although this is the case for simple animations on a few elements, add more complexity, and if you didn't code your animations with performance in mind, website users will soon take notice and possibly get annoyed.

In this article, I introduce some useful browser dev tools' features that will enable you to check what happens under the hood when animating with CSS. This way, when an animation looks a bit choppy, you'll have a better idea why and what you can do to fix it.

Developer Tools for CSS Performance

Your animations need to hit 60 fps (frames per second) to run fluidly in the browser — the lower the rate the worse your animation will look. This means the browser has no more than about 16 milliseconds to do its job for one frame. But what does it do during that time? And how would you know if your browser is keeping up with the desired framerate?

I think nothing beats user experience when it comes to assess the quality of an animation. However, developer tools in modern browsers, while not always being 100% reliable, have been getting smarter and smarter and there's quite a bit you can do to review, edit and debug your code using them.

This is also true when you need to check framerate and CSS animation performance. Here's how it works.

Exploring the Performance Tool in Firefox

In this article I use Firefox Performance Tool, the other big contender is Chrome Performance Tool. You can pick your favorite, as both browsers offer powerful performance features.

To open the developer tools in Firefox, choose one of these options:

  • Right-click on your web page and choose Inspect Element in the context menu
  • If you use the keyboard, press Ctrl + Shift + I on Windows and Linux or Cmd + Opt + I on OS X.

Next, click on the Performance tab. Here, you'll find the button that lets you start a recording of your website's performance:

Performance panel in Firefox Developer Tools.

Press that button and wait for a few seconds or perform some action on the page. When you're done, click the Stop Recording Performance button:

Stop recording browser activity in the Performance panel.

In a split second Firefox presents you with tons of well-organized data that will help you make sense of which issues your code is suffering from.

The result of a recording inside the Performance panel looks something like this:

Results of the recording in the Performance panel.

The Waterfall section is perfect for checking issues related to CSS transitions and keyframe animations. Other sections are the Call Tree and the JS Flame Chart, which you can use to find out about bottlenecks in your JavaScript code.

The Waterfall has a summary section at the top and a detailed breakdown. In both the data is color-coded:

  • Yellow bars refer to JavaScript operations
  • Purple bars refer to calculating HTML elements’ CSS styles (recalculate styles) and laying out your page (layout). Layout operations are quite expensive for the browser to perform, so if you animate properties that involve repeated layouts (also known as reflows), e.g., margin, padding, top, left, etc., the results could be janky
  • Green bars refer to painting your elements into one or more bitmaps (Paint). Animating properties like color, background-color, box-shadow, etc., involves costly paint operations, which could be the cause of sluggish animations and poor user experience.

You can also filter the type of data you want to inspect. For instance, I'm interested only in CSS-related data, therefore I can deselect everything else by clicking on the filter icon at the top left of the screen:

Filter feature inside Firefox Performance Dev Tools.

The big green bar below the Waterfall summary represents information on the framerate.

A healthy representation would look quite high, but most importantly, consistent, that is, without too many deep gaps.

Let's illustrate this with an example.

The Performance Tool In Action

Continue reading %Check CSS Animation Performance with the Browser’s Dev Tools%


by Maria Antonietta Perna via SitePoint