Laravel AMP optimization

AMP (Accelerated Mobile Pages) is an open-source website publishing technology developed by Google. It gives your users fast, lightweight and almost instant loading experience on the mobile web. If you are concern your website SEO, then it is highly recommended for you to make an AMP version of your website. It has a huge impact on SEO. When we search on Google through our mobile device Google will show some search result like this which load instantly in our browser.

Are you interested with how to make AMP pages in Laravel Framework? Okay, it's not so hard to implement amp version on your existing or new laravel website. In this article, I'll show you a step by step process to make AMP pages of your site in Laravel Framework without any third-party package.

Suppose our website has routes like these or any other route combinations.

Route::get('/','SiteController@home');
Route::get('/posts','SiteController@posts');
Route::get('/{slug}','SiteController@postDetails');

and controller code like this.

<?php

namespace App\Http\Controllers\Site;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Post;

class SiteController extends Controller
{

    public function home(){
        return view('site.home');
    }

    public function posts(){
        $data = Post::all();
        return view('site.posts',compact('data'));
    }

    public function postDetails($slug){
        $post = Post::where('slug',$slug)->first();
        return view('site.single',compact('post'));
    }

}

It's a simple scenario but your site might have more routes. It'll be difficult to make a separate route and controller file to handle amp pages.

Our Plan We'll not create any more route to handle our AMP version. We use our existing routes and controller file to handle our AMP version of site with some minor changes and tricks. Let's start.

Step 01: Add a mapAmpRoutes method to routeServiceProvider.php

protected function mapAmpRoutes()
{
    Route::prefix('amp')
        ->middleware('web')
        ->namespace($this->namespace)
        ->group(base_path('routes/web.php'));
}

and add this in the map method.

$this->mapAmpRoutes();

Note: It'll use our web.php route file and use our existing site routes. With this, our base URL start with example.com/amp.

Now, we have to detect the current route is for amp page request or normal view then we'll deliver blade template according to route request. Let's do the tricks to detect the current route is for amp or normal page. The plan is when route request for amp page we will return same template name with amp suffix.

Example

Step 02: Make a request detector.

Add this method in your controller. This getView method will detect the request is for amp page or normal.

private function getView($viewName)
{
    if (request()->segment(1) == 'amp') {
        if (view()->exists($viewName . '-amp')) {
            $viewName .= '-amp';
        } else {
            abort(404);
        }
    }
    return $viewName;
}

After adding this method we have to just update our view return statement like return view($this->getView('home'))

<?php

namespace App\Http\Controllers\Site;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Post;

class SiteController extends Controller
{

    private function getView($viewName)
    {
        if (request()->segment(1) == 'amp') {
            if (view()->exists($viewName . '-amp')) {
                $viewName .= '-amp';
            } else {
                abort(404);
            }
        }
        return $viewName;
    }

    public function home(){
        return view($this->getView('site.home'));
    }

    public function posts(){
        $data = Post::all();
        return view($this->getView('site.posts'),compact('data'));
    }

    public function postDetails($slug){
        $post = Post::where('slug',$slug)->first();
        return view($this->getView('site.single'),compact('post'));
    }

}

Step 03: Make amp pages

Now we just have to create these pages for amp page request.

home-amp.blade.php
posts-amp.blade.php
single-amp.blade.php

AMP page design has some rules and direction. If you are new and interested to learn how to make amp page design then take a tour of AMP official documentation and guideline to design amp page or you can free download amp page template.

Hope this article will help you to make amp page in Laravel website. If you find this helpful then please share with others.