AMP (Accelerated Mobile Pages) Example Pages

AMP (Accelerated Mobile Pages) is a Google open source project to speed up page load in mobile devices.

AMP consist of three main parts

  • AMP HTML is HTML with custom AMP tags, properties and some restrictions like only subset of css and html are not allowed that slow down page loading. Only valid AMP HTML files will be shown in Google Search.
  • AMP JS library manage resource loading, provide custom tags, load external resources asynchronously so external resources should not block page rendering, pre-calculate layout of every element before any resources are loaded and it also disable slow CSS selectors.
  • Google AMP CACHE is a content delivery network. It fetches valid AMP HTML pages and cache them to improve page performance.

Sample AMP html

<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>

Required markup for AMP HTML document

  • Start your document with the doctype <!doctype html>.
  • Below doctype <html > tag (<html amp> is accepted as well).
  • Require <head> and <body> tags
  • First tag after <head> is <meta charset=”utf-8″>
  • Include a <script async src=”https://cdn.ampproject.org/v0.js”></script> tag as the second child of their <head> tag (this includes and loads the AMP JS library).
  • <link rel=”canonical” href=”$SOME_URL” /> tag inside their <head> tag that points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists.
  • Add a <meta name=”viewport” content=”width=device-width,minimum-scale=1″> tag inside their <head> tag. It’s also recommended to include initial-scale=1.
  • Add the following in <head> tag:
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

Optional meta-data

A schema.org definition in above sample code is optional. However you can use it, if you want to distribute your content in some places like google search news top stories, rich cards, critic review cards according to your content type.

Validation

As we learn about required syntax need to follow , when you create AMP web page make sure that is valid AMP. It should display correctly to mobile devices to users. You can validate your AMP pages at https://search.google.com/search-console/amp.

Link AMP and non AMP pages

To make sure that search engines read (index) your we pages correctly. You need to add canonical link.

On normal web page –

<link rel="amphtml" href="amp-page-url" />

On AMP web page –

<link rel="canonical" href="none-amp-page-url" />

Demo

Non Amp page: https://sisnolabs.com/demo-non-amp.html
Amp Page: https://sisnolabs.com/demo-amp.html

Improved loading performance

Page load time, http request, page size all almost improved by more than 50%.

Note: In our next post we will going to write about AMP built-in and custom tags.

Upgrade Laravel 4.2 to 5.0 and above version

Laravel framework 5.1 and above versions support php7. Laravel 5.x has modified its application structure to make it more easy, robust and developer friendly. You can not directly upgrade Laravel 4.x to 5.1 or above versions. First you need to upgrade 4.x to 5.0 and then only you can upgrade Laravel to 5.1 or above version.

If you have application built in Lravel 4.x and you are looking to upgrade it to newest version of Laravel to get maximum advantages of this modern framework. Here are steps to upgrade.

  • Install Lravel 5.0 – Open terminal (for linux users), go to folder to where you want to install Laravel , then run below commandcomposer create-project laravel/laravel {directory} "~5.0.0" –prefer-dist

    or you can follow official installation documentation https://laravel.com/docs/5.0/installation

  • Remove vendor/compiled.php file
  • then run this command composer update from root folder of project
  • Open config/database.php and set correct database details
  • Move all files from old public folder (Lravel 4.x project files) to root folder of new installation (Lravel 5.0).
  • Correct path in index.php as below
    require __DIR__.'/bootstrap/autoload.php';
    $app = require_once __DIR__.'/bootstrap/app.php';
  • Correct path on bootstrap/autoload.php to
    require __DIR__.'/../vendor/autoload.php';
    $compiledPath = __DIR__.'/../vendor/compiled.php';
  • Copy and paste your old routes.php file into your new app/Http/routes.php.
  • Move all your controllers from app/Controllers into the app/Http/Controllers. add the app/Http/Controllers directory to the classmap directive of your composer.json file.
  • Create app/Models
    add “app/Models” to the classmap directive of your composer.json file.
  • Move your views from app/views to the new resources/views directory.
  • Move your language files from app/lang to the new resources/lang directory.
  • Move your tests from app/tests to the new tests directory.
  • Add “laravelcollective/html”: “~5.0” to your composer.json file’s require section.
  • Edit config/app.php and add this line to the ‘providers’ array:
    'Collective\Html\HtmlServiceProvider',
    for the 'aliases' array:
    'Form' => 'Collective\Html\FormFacade',
    'Html' => 'Collective\Html\HtmlFacade',
  • Pagination (changes in model/controller class files) Replace any calls to $paginator->links() with $paginator->render().

    Replace any calls to $paginator->getFrom() and $paginator->getTo() with $paginator->firstItem() and $paginator->lastItem() respectively.

    Remove the “get” prefix from calls to $paginator->getPerPage(), $paginator->getCurrentPage(), $paginator->getLastPage() and $paginator->getTotal() (e.g. $paginator->perPage()).

  • Run command at terminal
    composer update
  • Filters in route will not work. For that need to create Middleware class for after and before to work. Follow below tutorial to create middleware
    https://laravel.com/docs/master/middleware
  • We need to add below code on top of controller file, you will get coding error, below will help you to fix it.
    use DB
    So that we can use DB::table(‘Tablename’)

    For input data add on top of controller file
    use stdClass;
    use Input;

    to use model in controller add below code on the top of controller file:
    use App\Models\Category;

    To use segment() function
    Add Request $request in function parameter
    and replace
    Request::segment(4); with $request->segment(4);

    Replace View::make with view()->make

    Replace Config:: with config(‘constant.img’);

  • Admin authentication – changes in route .php
    in place of “before=>auth.admin” use “middleware=>auth.admin”
    and for middleware auth need to create Authmiddlewear class.

Now as we migrated project from laravel 4.x to 5.0 , It is ready to upgrade to 5.1 or above version.

To upgrade laravel 5.0 to 5.2

  • Update your composer.json file to point to laravel/framework 5.2.*.

    Add "illuminate/html": "5.2.*",
    "laravel/framework": "5.2.*",

    to require section of your composer.json file.

  • Add “symfony/dom-crawler”: “~3.0” and “symfony/css-selector”: “~3.0” to the require-dev section of your composer.json file.
  • Then in your config/app.php file, add this to your providers array:
    Collective\Html\HtmlServiceProvider::class
    and this to your aliases array:
    'Form' => Collective\Html\FormFacade::class,
    'Html' => Collective\Html\HtmlFacade::class,
  • Run composer update command at terminal

Thats it!

Update: also read Introduction to laravel 5.x application structure

Introduction to laravel 5.x application structure

There are more than 40 PHP frameworks available. The popular frameworks are Cakephp, Zend, Symfony, Codeigniter, Yii etc. In recent times Laravel got very popular among web developers. Currently, Laravel is one of the top PHP frameworks for modern web development.

popular php frameworks
popular php frameworks

Laravel did major changes in its Application structure from 4.x to 5.x.

Application Structure

Laravel 4.X
  • app
    • commands
    • config
    • controller
    • database
    • lang
    • start
    • storage
    • database
    • tests
    • views
    • filters.php
    • routes.php
  • bootstrap
    • autoload.php
    • path.php
    • start.php
  • public
    • css
    • fonts
    • img
    • js
    • locales
    • packages
    • .htacess
    • index.php
    • robots.txt
  • vendor
    • composer.json
    • composer.lock
    • server.php
Laravel 5.X
  • app
    • Console
    • Http
      • Controllers
      • Filters
      • Requests
    • Providers
  • bootstrap
  • config
  • database
    • migrations
    • seeds
  • public
  • resources
    • lang
    • views
  • storage
    • cache
    • logs
    • meta
    • sessions
    • views
    • work

Laravel 5.x Application structure

App directory only contain application core code. App directory contains directories such as console , http , providers.

  • The Console directory contains all of the custom Artisan commands for your application.
  • The Http directory conatins code to handle request entering your application.It conatins controllers, middleware, and form requests.
    – Filters for authentication in laravel 4.x have been converted to middleware , if you want to use filter you can still use in laravel 5.x.
    The old app/models directory has been removed but if you want to use it you can implement.

You can also create other directories and classes as per your requirement inside app directory to extend your application.

Config directory contains all configuration file of application.

Database directory contains your database migration and seeds.

Resources directory contains all your appliactions views , assest and language files.

Storage directory contains compiled blade templates, file based cache , logs etc.

Why Laravel 5.x changed Application structure?

New structure help developers to easily understand and work with framework , as you can see its follows “best practice” that development community follow.

It also implemented advanced objected oriented features like name spacing etc.

New route:cache Artisan command to speed up the registration of your application routes.

Most important key point is Laravel 5.1 and above version is compatible with PHP7.

Update: Also read Read how to upgrade Laravel 4.2 to 5.0 and above version

Gzip compression – to make website load faster

Now a days Gzip compression become popular for speed up website. It compresses webpage upto 60% to 80%. We know about zipping a file to make them use less space, today web servers can also compress the content before sending it to your browsers. It lower the bandwidth requirements of your server and speed up your site.

 

How Gzip works? Click Here to watch video

 

If mod_deflate and mod_gzip modules is enable on server, Here is the code you should added to your .htaccess file.


< ifModule mod_gzip.c >
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
< / ifModule >

 

If the above code did not seem to work, do not afraid there is other way to do it, remove above code from your .htaccess file and add this code in .htaccess file.


< IfModule mod_deflate.c >

# Restrict compression to these MIME types
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/css

# Level of compression (Highest 9 – Lowest 1)
DeflateCompressionLevel 9

# Netscape 4.x has some problems.
BrowserMatch ^Mozilla/4 gzip-only-text/html

# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4.0[678] no-gzip

# MSIE masquerades as Netscape, but it is fine
BrowserMatch bMSI[E] !no-gzip !gzip-only-text/html

< IfModule mod_headers.c >
# Make sure proxies don’t deliver the wrong content
Header append Vary User-Agent env=!dont-vary

< /IfModule >
< /IfModule >

 

Some hosting provider disable mod_deflate and mod_gzip modules, so above code will not work for you. Here is the solution.

 

1) Create file called headers.php and add the following code, upload to public_html or htdocs folder.

< ? php
if (isset($_SERVER['SCRIPT_FILENAME'])) {
$timestamp = filemtime(__FILE__);
header('Last-Modified: ' . $timestamp);
$expirestime = 60*60*24*30;
header("Pragma: public");
header("Cache-Control: maxage=".$expirestime);
header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$expirestime) . ' GMT');
header('Vary: Accept-Encoding');
$pathinfo = pathinfo($_SERVER['SCRIPT_FILENAME']);
$fileextension = $pathinfo['extension'];
if ($fileextension == 'css') {
header('Content-type: text/css;
charset=utf-8');
}
if ($fileextension == 'js') {
header('Content-type: text/javascript;
charset=utf-8');
}
} ? >

 

2) Create another file and give the name php.ini and add following code in it.
zlib.output_compression=1
auto_prepend_file=[PATH OF headers.php FILE]

if zlib.output_compression=1 is not work try utput_handler=ob_gzhandler instead.
Now you need to upload copy of php.ini file in every folder containing files you want to compress.

 

3) Now add below code in your .htaccess file
AddType x-mapp-php5 .php .shtml .html .htm .txt .js .css
if you have php4 then add x-mapp-php4 instead x-mapp-php5
if x-mapp-ph Continue reading Gzip compression – to make website load faster