Categories
accessibility audit best practices chrome 60 escalatingweb javascript lighthouse progressive web app pwa pwa converter pwa score pwamp

PWA Score : Calculate Progressive Web App Score Of Website

Hello Everyone, in this article, I will show how you can calculate pwa score for your progressive web app. For those who are wondering with the term, Progressive Web App is an enhancement of a web app with features like offline availability, app feeling, homescreen icon, push notifications. For more discussion about PWA, check out PWA.

PWA Score is a number which will tell how close is your progressive web app to an ideal progressive web app. You will also get detailed result on how you can improve your result in case. PWA score is powered by Lighthouse. It provides assesment for other data as well like performance, accessibility, best practices.
PWA Score

So, this can be done with the new Audits Panel feature in Chrome 60 dev tools.
Let’s see it then!

—Method 1—

1- Go to your laptop/desktop machine.

2- Open Chrome(updated version 60 or more).

3- Open the website you want to calculate the pwa score.

4- Open Dev Tools(Ctrl + Shift + I) or right click on somewhere your webpage and Choose Inspect Element.
pwa score

5- Choose Audits tab in the dev tools.
pwa score

6- Click on Perform an audit button.
pwa score

7- Keep all the options(Progressive Web App, Performance, Best Practices, Accessibility) checked and click on Run audit button.
pwa score

8- Wait for sometime until the Audit is complete.
pwa score

9- When the Audit completes you will be presented the data about Progressiveness, performance, accessibility, best practices.
pwa score

—Method 2—

1- Go to Lighthouse tool page and Install Lighthouse chrome extension.
pwa score

2- Open the website you want to calculate the pwa score.

3- Click on Lighthouse extension in chrome.
pwa score

4- Click on Generate report.
pwa score

5- Wait for sometime until the Audit is complete.
pwa score

6- When the Audit completes you will be presented the data about Progressiveness, performance, accessibility, best practices.
pwa score

As you scroll down, you will see the respective fixes if any. Go ahead and make a great Progressive Web App.

Also you can check out this awesome Automatic PWA Converter Platform to build progressive web app of your platform on the fly.

Congratulations!

Categories
accelerated mobile pages amp amp converter escalatingweb google googleio

AMP Limitations And Advantages

Hello Everyone, in this article we will discuss about AMP Limitations And Advantages. AMP stands for Accelerated Mobile Pages. It is a recent google technology which makes access of a web page lightening fast. Google creates cache of the respective web page and delivers it at their end. In google search results, google prioritizes amp search results over normal web page results.

amp limitations

This could be the next big breakthrough in web development in order to get larger audience on lower prices. Though being a great technology, it is always good to go through checklist before making up your mind to adapt a technology. So ahead of this article, we will discuss about AMP Limitations and Advantages, and other tweaks as well to bypass the limitations.

Limitations:

1- In order to build AMP for a platform, it involves a whole new development style. It has its own html tags and needs to be implemented carefully. You can find more about specification here. I would not deny the fact, it is not so simple for beginners.

2- The first result is quite slow. Even if you have built AMP for a platform, you need to wait for about 48-72 hours for any results(error or success). Before that you can’t even say anything about whatever you have developed.
There are methods though, in order to verify your AMP development but the end result is only known after google successfully crawls AMPs.

3- No external javascripts are allowed. So, it does limit down javascript heavily dependent platforms.

4- Only one developer style element allowed. You do not have much window with css as well.

#limitation 1# In order to tackle with this, you can also use Automatic AMP Converter Platform. Using this, you don’t have to worry about any development phase and you can get your AMP platform within a minute.

Advantages:

1- Since these are cached content on Google’s server, they are very fast in terms of accessibility even in low network.

2- Since they are fast even in low network, they have larger audience(more traffic).

3- You don’t have to pay for server’s cost for the amp traffic, as these are hosted on Google’s servers.

4- They allow faster ads, so better cpm, more money.

5- Independent of your normal web page.

6- It is free of cost.

So, this was a quick discussion about AMP limitations and Advantages. Hope it helps!

Categories
accelerated mobile pages amp amp converter google googleio organic progressive web app pwamp

Automatic AMP Converter Platform

Hello Everyone, in this article we will see how to use Automatic Amp Converter Platform and get your platform’s amp version in just few minutes. For those who need a little introduction, AMP stands for Accelerated Mobile Pages which is google’s recent technology. These pages have lightening fast accessibility, so they open comparatively faster than a normal webpage even in low network. Since the speed is the bet, google prefers and has declared that they prioritize AMP search results over normal web pages. A lot of platform(ndtv, thehindu, buzzfeed, scoopwhoop, etc.) have already got their AMP and are doing great.

It is very important to get your AMP version, in order to increase organic traffic. A lot of other platforms(medium, techcrunch, etc.) have even started amp linking to their website. That means if a webpage reference is given on a platform and that webpage has an existing amp version, that link would open amp webpage. To get more insights for AMP, you can checkout this link.
AMP converter

In order to build AMP for your platform, you need to follow all new html tags specified by AMPPROJECT, and I would not say it is an easy task to do that. The other way out is to use Automatic AMP converter Platform and build AMP for your platform within a minute. Yes, that’s true. Sounds interesting!

Let’s jump then!

1- Go to Automatic AMP Converter Platform.
AMP converter

2- Do a free and easy registration. Click On Register above.
AMP converter

3- Following from above, complete your registration.
AMP converter

4- After successful registration, you will land to features page, choose Accelerated Mobile Pages tab.
AMP converter

5- Click On Use AMP Engine Now and follow the instruction.
AMP converter

6- Voila! Your platform has their AMP Now.

It takes about 2-3 days to get your first AMP indexed in google search. I suggest give it a week or so, and keep tracking in your google webmaster console for number of AMPs indexed by Google.

Also read about Automatic PWA Converter Platform.

Categories
cloudflare https ssl ssl certificate web vr

HTTP Site Into HTTPS Conversion In Simple Steps

This is an era when web is being revolutionized towards making web experience whole lot better and to a completely new level. A lot of development is taking place, such as web virtual reality, progressive web apps, accelerated mobile pages, instant articles, etc. And by any chance if your platform is still on http protocol, you immediately need to take some action. So for all those who still are running on http protocol, this article is for you explaining how you can convert your http site into https.

This is not a yet another article explaining how to implement ssl and other related stuff to get your platform to https. In this, I will demonstrate, how you can get your platform https using cloudflare in simple steps. Believe me, this is way lot easier than implementing ssl certificate, and besides it is free.

Here we go!

1- Go to https://www.cloudflare.com and do free sign up.
http site into https

2- Add your platform name(https://www.escalatingweb.com) and get it scanned for existing dns records.
http site into https

3- Wait till scanning of the records are completed.
http site into https

4- When the scanning completes, click on continue.
http site into https

5- Next you see the screen with all your dns records listed for the entered domain.
http site into https

6- Now click on continue button at the bottom of the page(end of list).
http site into https

7- Next you see the page to choose plan for your cloudflare. Select Free Website option and click on continue.
http site into https

8- Next you see list of cloudflare’s nameservers. The current nameservers(coby.ns.cloudflare.com, ulla.ns.cloudflare.com) are the nameservers provided by your domain supplier(godaddy, bigrock, etc.).[Mine is already shifted to another cloudflare account, that is why it’s showing cloudflare.] Now, in the respective dashboard from wherever you bought your domain, change the nameserver there to listed “change nameservers to”(jerry.ns.cloudflare.com, lisa.ns.cloudflare.com).

Godaddy
i- Open your godaddy account. Find Manage Domain and then manage dns for the corresponding domain.
http site into https

ii- Next you should land on to dns management page. Click on change button under Nameservers heading.
http site into https

iii- Choose custom nameserver type and then edit current nameservers to nameservers provided by cloudflare and then save it.
http site into https

BigRock

i- Open your bigrock account. Choose your domain name you want to shift to cloudflare.
http site into https

ii- Next you see Domain Registration page. Click on Name Servers link.
http site into https

iii- Next you will see a pop up listing nameservers for the corresponding domain. So edit your existing nameservers to the new ones provided by cloudflare.[Do not add more]. Then click on Update Name Servers.
http site into https

9- Click on continue after you have changed nameservers. Now wait for sometime(10-15 minutes, could be earlier) until your nameservers get shifted.

10- After successful shift of name server, you will see something like this.
http site into https

11- Choose Page Rule Menu and then click on Create Page Rule.(3 page rules can be created for free)
http site into https

12- You will see a pop up. Now edit rule(url matches) to redirect all your http web traffic to https. So for that, enter the rule like this, http://www.domain.com*
http site into https

13- Now click on add a setting and then pick a setting, and then choose Always Use HTTPS option.
http site into https

14- Now you might see order option, if this is your first page rule for the domain. So, now your click on Save and Deploy.

15- Now you can see your newly created page rule as listed under Page Rules.
http site into https

16- Now wait for sometime(5-10 mins), and then try to refresh your website(use incognito window to avoid cache effect on to your changes).

17- Bingo! You have converted your http site into https.

Quick Wrap Up- We changed your dns to cloudflare from your non-cloudflare dns, and used cloudflare’s Always Use HTTPS page rule feature. It offers free ssl at dns level, so you don’t have to do anything on your server and can very simply convert your http site into https.

Other useful stuff