IoT, Code, Security, Server Stuff etc

Views are my own and not my employer's.

Personal Development Blog...

Coding for fun since 1996, Learn by doing and sharing.

Buy a domain name, then create your own server (get $25 free credit)

View all of my posts.

apps

Deploying nodejs apps in the background and monitoring them with PM2 from keymetrics.io

by

This guide will help you install and setup the pm2 NodejJS process monitor PM2 from Keymetrics.io for free and manage your node apps performance and exceptions.

What is PM2?

PM2 is a production process manager for Node.js applications with a built-in load balancer. It allows you to keep applications alive forever, to reload them without downtime and to facilitate common system admin tasks. This is the steps I used on Ubuntu 16.04. This is NOT a paid endorsement (just self-documenting).

Key Features of PM2

PM2 offers web-based monitoring dashboard, exception reporting, load balancer, CPU and memory monitoring, transaction tracer and much more for NodeJS apps.

pm2-features

What is PM2?

Official page: http://pm2.keymetrics.io/

More info https://www.npmjs.com/package/pm2

Install PM2

Install Output

PM2 Pricing

PM2 appears to be for high-end apps but I am only using the free version or PM2 (thanks KeyMetrics)

pm2-pricing

Create a bucket for your node app

Login to keymetrics.io,

Click Generate New Bucket

Create New Bucket

Give the bucket a name etc.

Node Bucket Name

You can now link your bucket with your local pm2 installation (keep the keys private (this one no longer exists))

pm2-link

Linking your local pm2 installation with your keymetrics bucket

To add an existing node app to PM2 type the following.

You can view node apps that pm2 is managing by typing

I had a two CPU VM and I found that the app I added was added to each of the two CPU (I only needed one) so I needed to delete the second app on my second core

Restart the API

You can add a single node apps one 1, 3 or max available CPU’s

Again, to add an existing node app to PM2 type the following.

Now you can view node app data online. If you don’t have a node app ready you can use the test app.

monitor output

You can monitor your node app locally too from the CLI.

local monitoring

You can also view a demo bucket at keymetrix.io

pm2-demo-bucket

PM2’s one age documentation can be found here.

I hope this guide helps someone.

Ask a question or recommend an article

[contact-form-7 id=”30″ title=”Ask a Question”]

Revision History

v1.0 Initial post

Using Chrome 65 to measure website Performance, Progressive Web Apps, Basic Practices, Accessibility and SEO

by

Chrome 65 beta has added SEO to audits in the Developer Tools Audit tab.

I have a number of guides on moving hasting away form CPanel, Setting up VM’s on AWS, Vultr or Digital Ocean along with installing and managing WordPress from the command line.

When you develop any site you need to perform regular audits to ensure it is up-to-date and compliant.  Google Chrome has audit tools built right in (Chrome 65 has SEO audit tools (yay)

Chrome 64Developer Tools – Audit tool.

Chroms 64 Audit

Chrome 64 Audit Scan options

Chrome 64 Audit Scan

Chrome 64 Audit Results

The performance results seem off given I have set up a CDN, optimized WordPress.

Chrome 64 Audit Results

Time to download Chrome 65 beta and get new audit tools.

Time to download Chrome 65 and get new audit tools

Chrome version confirmed

Chrome Version

Audit Options

Chrome 65 BETA Audit Options

Chrome 65 Audit Results

Hmmm, results are different (same website, network and time)

Chrome 64 Audit Results:

  • Performance: 45
  • Progressive Web App: 30
  • Accessibility: 86
  • Best Practice: 56
  • SEO: N/A

Chrome 65 BETA Audit Results:

  • Performance: 24
  • Progressive Web App: 45
  • Accessibility: 65
  • Best Practice: 63
  • SEO: 90

Chrome 65 BETA Audio Results
Google recommends you load pages in under 1s, I would suggest using multiple tools to indicate site speed.

https://gtmetrix.com is a great site for testing your sites speed. I used GT Metrix to move my site from 26s to 6 by setting up a WordPress CDN, moving away from CPanel to a self-managed server on Vultr then to 4s with optimising PHP by setting up child workers.

GT Metrix

https://www.webpagetest.org is also good for testing websites.

I will continue to use Chrome Audit Tools for other results like SEO

Chrome SEO Tools

That’s weird Chrome Audit Tools, I thought I did not have meta tags?

I downloaded the WP Meta SEO plugin, I use the wp command from the SLI (setup guide here)

I activated the plugin in WordPress the loaded the dashboard.  WP Meta SEO asked to import data from the Yoast plugin.

meta-dashboard

Now I can see my metadata is falling behind.

wp-meta-seo

With WP Meta SEO I was able to apply individual page Meta tags.

meta-apply

I added the following meta tags with WP Meta SEO plugin for each page (the metadata below was for this page)

<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="twitter:image" content="https://fearby-com.exactdn.com/wp-content/uploads/2018/02/php_pool_featured.jpg" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@FearbySoftware" />
<meta name="twitter:domain" content="Programming, IoT and Server Stuff" />
<meta name="twitter:description" content="How to setup PHP FPM on demand child workers in PHP 7.x to increase website traffic" />
<meta name="twitter:title" content="Setup PHP FPM on demand child workers in PHP 7.x" />
<meta property="og:image" content="https://fearby-com.exactdn.com/wp-content/uploads/2018/02/php_pool_featured.jpg" />
<meta property="og:site_name" content="Programming, IoT and Server Stuff" />
<meta property="og:description" content="How to setup PHP FPM on demand child workers in PHP 7.x to increase website traffic" />
<meta property="og:url" content="https://fearby.com/article/how-to-setup-php-fpm-on-demand-child-workers-in-php-7-x-to-increase-website-traffic/" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Setup PHP FPM on demand child workers in PHP 7.x" />
<meta name="description" content="How to setup PHP FPM on demand child workers in PHP 7.x to increase website traffic" />
<meta name="keywords" content="Setup PHP FPM on demand child workers in PHP 7.x" />
<meta name="title" content="Setup PHP FPM on demand child workers in PHP 7.x" />

fyi

I use the free version of the Yoast for SEO plugin in WordPress.  The premium version has a lot more to offer, I might have to check Premium out.

Yoast Compare

I am now on the hunt for meta plugins for WordPress

I hope this guide helps someone.

Ask a question or recommend an article

[contact-form-7 id=”30″ title=”Ask a Question”]

Revision History

v1.2 WP-Meta SEO

v1.1 Added webpagetest.org link and results

v1.0 Initial post

Building faster web apps with google tools and exceed user expectations

by

@jawache pointed me in the direction of twitter user @addyosmani and a talk at Chrome Dev Summit 2017 called “Fast By Default: Modern Loading Best Practices

Recently I blogged about speeding up my serves (by moving them closer to me and visitors) and Sped up WordPress by moving away from CPanel tp a  self-managed server.

Update 2018: For the best performing VM host (UpCloud) read my guide on the awesome UpCloud VM hosts (get $25 free credit by signing up here).

RAIL: Measure Performance with the RAIL Model (Fast Integrated, Reliable and Engaging)

https://developers.google.com/web/fundamentals/

  • Focus on the user
  • Initial Response under 100ms
  • Animate, produce a frame in under 10ms
  • Idle maximize idle time
  • Deliver all content in under 1000ms

Read more here: https://developers.google.com/web/fundamentals/performance/rail

Replaced with: User happiness metrics

  • First Paint
  • First content Paint
  • First Meaningful Paint
  • Time to interactive

Potential Impacts

  • Network ( See my scalability on a journey on a budget blog post)
  • CPU throttling
  • Client Heavy Frameworks (JavaScript is heavy parsing)
  • Shared hosts (Moving away from a shared host to AWS from CPanel or other shared hosts can be a good thing for performance. )
  • Network Latency
  • Size (number and file size)
  • HTTP ASync Downloads Limit (2)
  • Device Speed
  • Parsing JavaScript.
  • 3r party libraries
  • Caching (web server (NGINX caching https://www.nginx.com/blog/nginx-caching-guide/ ) or local browser cache)
  • User Limitations
  • etc

Do’s

  • Less JavaScript
  • More Caching
  • Lazy Loading ( I use the BJ Lazy Load plugin in WordPress )
  • Develop on Slow Devices/Links
  • CDN
  • DNS
  • Minify Code  ( fyi )
  • Optimize Images ( fyi )
  • Respect Visitor Data Plans/Devices (offer low data version)

Use online tools (Browser dev audit tools) to measure performance metrics.

Consider in-memory caching solutions

Use the following third-party tools while developing.

These are highly recommended tools.

Siege Command Line Benchmarking tool (Read guide here)

https://calibreapp.com/

https://speedcurve.com/

https://github.com/siddharthkp/bundlesize

http://loader.io/ – External Benchmarker

State of the Web:

Use http://beta.httparchive.org/ to see the average website stats and trends, is your site average or abusing the code type/size you push?

Sample httparchive.org Reports:

Average TCP Connection Per Page

The average percent of HTTPS requests (now over 50%)

Time in seconds to first meaningful paint

1st paint

Average time to first interactive paint

1st Interactic paint

Average time to first on load (finished)

On Load

Netcraft: October 2017 Web Server Survey:

https://news.netcraft.com/archives/2017/10/26/october-2017-web-server-survey-13.html

Web Server Technology Share

Web Server Share

(Image credit: netcraft.com)

Active Web Sites v Hostnames

Active Sites

(Image credit: netcraft.com)

State of Desktops (Gamers Survey)

Steam conducts a monthly survey to collect data about what kinds of computer hardware and software our customers are using. Participation in the survey is optional, and anonymous via the steam app.

Steam HW Scale

This gives a rough (biased) breakdown of high-end machines (gamers) but does reveal valid stats on installed memory and product share.

http://store.steampowered.com/hwsurvey

Don’t forget to track the visitors (location, time, devices, speed, gender etc.) to your site with Google Analytics https://support.google.com/sites/answer/97459?hl=en

Google Progressive Web APP LightHouse Site Audit (Chrome Dev Tools)

You can now run Audits in the Chrome DevTools. To run a report (Read More: https://developers.google.com/web/tools/lighthouse/#devtools )

Chrome Dev Tools

Click Perform and Audit (in the Chrome Developer Tools) on the site you have loaded.

Perform and Audit

Audit in Progress

Audit in Progress

My Report

FYI: Report scores will depend on the time of day and the speed of your computer, A  55 score maybe 65 or 45 the following day.

PWA Score

Read the Progressive Web App Check List to help understand how to boost your score.

https://developers.google.com/web/progressive-web-apps/checklist

Google Mobile-Friendly Check List

Also, run the mobile-friendly tesh over your site here.

https://search.google.com/test/mobile-friendly

Mobile Friendly

Google Page Speed Insights

Goto PageSpeed Insights and scan your site.

Page Speed Insights

Scanning

Page Speed Insights Report Results

page Insights Results

FYI: My site is a WordPress site and I speed up the sight by.

The next thing I want to try is (Sponsors needed).

  • Setting up self-managed Sub Domain CDN’s (https://img01cdn.fearby.com, https://img02cdn.feearby.com etc). – See Vultr and Digital Ocean Ubuntu Server setup guides.
  • Third Party CDN’s.
  • DNS optimizations.
  • Setup NGINX Caching.

Google User Experience Report (Advanced):

The Google User Experience Report (SQL like query and reporting system) is a public dataset of key user experience metrics for top origins on the web. All performance data included in the report is from real-world conditions, aggregated from Chrome users who have opted-in to syncing their browsing history and have usage statistic reporting enabled ( https://www.google.com/chrome/browser/privacy/whitepaper.html#usagestats ) .(end snip from  https://blog.chromium.org/2017/10/introducing-chrome-user-experience-report.html )

Getting started with Chrome User Experience Report Tool: https://developers.google.com/web/tools/chrome-user-experience-report/getting-started
Chrome User Experience Report Tool will allow you to query datasets on page load times.

Why

Better able to compete and deliver measurable advantages to your customers.

Conclusion

  • Know data – MOM (Measure, Optimise and Monitor).
  • Improve over time or before launch.
  • Set budgets on file sizes and page times.
  • Develop on slow devices/links.
  • Consider using PageSpeed Module on your server https://developers.google.com/speed/pagespeed/module/
  • Consider using the RPRL Pattern (https://developers.google.com/web/fundamentals/performance/prpl-pattern/ ) to split and cache code to speed up the time to interactivity.
  • Scale up or out?
  • Enabling web server caching (NGINX: https://www.nginx.com/blog/nginx-caching-guide/

Still Reading?

View more Google Dev Summit 2017 talks: https://www.youtube.com/playlist?list=PLNYkxOF6rcICUD5nBfRdAR6Fveosnqa5m

Also read: Can You Afford It?: Real-world Web Performance Budgets: https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/

Still Reading:

Check out Googles HTTPS Transparency Report https://transparencyreport.google.com/https/overview

Read the introduction blog at Chromium Blog https://blog.chromium.org/2017/10/introducing-chrome-user-experience-report.html

Bookmark https://blog.chromium.org/

Update Jan 2018

Google begins mobile-first indexing of sites to improve mobile search results

What Crawl Budget Means for Googlebot

More to come.

Donate and make this blog better


Ask a question or recommend an article
[contact-form-7 id=”30″ title=”Ask a Question”]

v1.2 Jan 2018 additions on Google’s mobile first approach and increasing crawl rates.

v1.1 fixed typos