Improve Your Website Speed and Performance in Laravel 5.8



In this blog post, we learn how to Improve Your Website Speed and Performance in Laravel 5.8 by using a simple Laravel package. we will use “laravel-page-speed” package

Page speed is a very important factor for SEO and ranking. we will use “laravel-page-speed” a simple package for boost page. Google mention in Doc for website rank an important factor is page speed. By using this package we will improve our application load time for 50%+ optimization of our Laravel applications website.

How work this package?

The Laravel-page-speed package helps us to minify auto HTML and JS output and it can be optimization our web page. By using this package will remove unused properties in HTML tags, remove unused quotes in HTML, remove unused blank space or whitespace in HTML page, and remove comments and other which is the bad impact for the website.

So let's start 

Step 1: Create a Laravel Application

First, create a new Laravel Application using this command.

laravel new speedPage

Step 2: Add some data

At this step, some dummy data compare page loading speed test before install package.

welcome.blade.php


<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">

        <!-- Styles -->
        <style>
            html, body {
                background-color: #fff;
                color: #636b6f;
                font-family: cursive;
                font-weight: 100;
                height: 100vh;
                margin: 0;
                color: #000 !important;
            }

            .title {
                font-size: 84px;
            }

            .links > a {
                color: #636b6f;
                padding: 0 25px;
                font-size: 12px;
                font-weight: 600;
                letter-spacing: .1rem;
                text-decoration: none;
                text-transform: uppercase;
            }

            .m-b-md {
                margin-bottom: 30px;
            }

            h4.li-post-title {
                font-family: sans-serif;
                font-size: 150%;
                border-bottom: solid 2px #ce5014;
                color: #d25151;
            }
            .li-post-group {
                PADDING: 0PX 15PX;
            }
        </style>
    </head>
    <body>
        <div class="flex-center position-ref full-height">
            @if (Route::has('login'))
                <div class="top-right links">
                    @if (Auth::check())
                        <a href="{{ url('/home') }}">Home</a>
                    @else
                        <a href="{{ url('/login') }}">Login</a>
                        <a href="{{ url('/register') }}">Register</a>
                    @endif
                </div>
            @endif

            <div class="content">
                
                <h1>My Post List</h1>
                <hr/>

                <div class="post-data-list">
                    <div class="li-post-group">
                        <h4 class="li-post-title">Drag and Drop Table Row Sorting (Ajax, PHP and MySQLi)</h4>
                        <p class="li-post-desc">In this post, We are going to know how to do Drag and Drop Table Row Sorting with Ajax and PHP script without a refresh of the page. Using this function we can quickly sort or re-order table row data with an easy user interface and Drag and Drop HTML element very useful us to a done table row sorting. Here we have used JQuery UI Drag and Drop library Sortable() function and using this function we can easily move any HTML element from one area to another and the particular element will be placed automatically and it will be sort element.</p>
                    </div>
                    <div class="li-post-group">
                        <h4 class="li-post-title">IMPORT XML DATA INTO MYSQL DATABASE (AJAX, PHP AND PDO)</h4>
                        <p class="li-post-desc">In this article, we are going to know how to Import XML Data into Mysql Database table by using PHP code with Ajax. We all know XML stands for eXtensible Markup Language and it is used for to save and read data on the web and this data readable format for human and machine also.</p>
                    </div>
                    <div class="li-post-group">
                        <h4 class="li-post-title">LIVE DATA SEARCH (AJAX, PHP AND MYSQLI)</h4>
                        <p class="li-post-desc">In this post, we are going to learn Ajax Live Data Search with a help of PHP, MySQLi and Ajax. In real-time most of the website and web applications providing content search option to make the application as most user-friendly.</p>
                    </div>
                    <div class="li-post-group">
                        <h4 class="li-post-title">Form Submission With Validation Using AngularJS and PHP</h4>
                        <p class="li-post-desc">In this post, we are going to learn How to submit form data to PHP script by using AngularJS. In modern web development, many of technology used to submit a form data to the server script. Nowadays AngularJS is one of the technique use front-end technology it will manage by Google Inc on their hosted library. Here we will handle form data submission by using AngularJS and we will make necessary field validation by using AngularJS form valid or PHP Script.</p>
                    </div>
                    <div class="li-post-group">
                        <h4 class="li-post-title">LOAD MORE DATA ON PAGE SCROLL (AJAX, PHP AND MYSQLI)</h4>
                        <p class="li-post-desc">In this post, we will see how we can load more post details list with the help of Ajax. This technique helps us to load the page quickly. At the initial page load time have some limited post details only. Whenever the page scrolling at end of the page it trigger the ajax request to server and get and load specified list of the post details at the end of the post list container. Load more data method is very useful because the data is loaded without loading or redirecting the page.</p>
                    </div>
                    <div class="li-post-group">
                        <h4 class="li-post-title">CRUD REST API USING PHP AND MySQLi</h4>
                        <p class="li-post-desc">In this post, we are going to learn about REST API implementation using PHP and MySQLi. A RESTful web service helps us to perform CRUD operations with MySQL database. In this post which is part of the REST API series, let us learn how to implement an easy and simple CRUD REST API using PHP and MySQLi for Create, Read, Update and Delete operations. The entire process will be handled with a help of core PHP not be using any framework as dependencies.</p>
                    </div>
                    <div class="li-post-group">
                        <h4 class="li-post-title">DISPLAY SWEET ALERT IN LARAVEL USING UXWEB/SWEET-ALERT</h4>
                        <p class="li-post-desc">In this post, we are going to learn to show notify information with an excellent user-friendly look using sweetAlert package in laravel application. Here we are going to use uxweb/sweet-alert package for Display Sweet Alert Notifications in Laravel web application.</p>
                    </div>
                    <div class="li-post-group">
                        <h4 class="li-post-title">GENERATE A WORD DOCUMENT USING PHPWORD IN LARAVEL</h4>
                        <p class="li-post-desc">In this post, we going to see how to generate word doc and docx file using phpword package in Laravel. Nowadays some user needs to export data into a word file for offline usages. Some of the client to give their relevant data like Terms and conditions, Private policy and Copyrights details into pdf or word document format. For this kind of purpose, it will help us to generate word file in laravel using phpoffice/phpword package.</p>
                    </div>
                    <div class="li-post-group">
                        <h4 class="li-post-title">3-DIMENSIONAL(3D) PORTFOLIO IMAGE GALLERY USING HTML & CSS</h4>
                        <p class="li-post-desc">The Portfolio details is a very useful feature of the web page. You can establish your archived details and the works to the entire web community. It was outlined to bring in extra clients, get you selected based on this details.</p>
                    </div>
                    <div class="li-post-group">
                        <h4 class="li-post-title">GET WORDPRESS BLOG POST AND SHOW IN ANY PAGE</h4>
                        <p class="li-post-desc">In WordPress blog, our latest posts are publicized on the home page, and older posts access with the help of post page navigation. In this post, we are going to learn how to display our WordPress blog posts on any static or dynamic page using a simplexml_load_file() method with ATOM that works to get WordPress blog post details as XML data with domain link.</p>
                    </div>
                    <div class="li-post-group">
                        <h4 class="li-post-title">YOUTUBE CHANNEL VIDEO IMPORTING USING DATA API & PHP</h4>
                        <p class="li-post-desc">The YouTube Data API provides an easy way to access YouTube channel videos and include into our web application. The different sources package will get video details from YouTube channel using Data API. If we need to import and display YouTube video gallery on our web page means, YouTube Data API will help us to do this.</p>
                    </div>
                    <div class="li-post-group">
                        <h4 class="li-post-title">EXPORTING MYSQL DATA TO EXCEL USING PHP</h4>
                        <p class="li-post-desc">Exporting MySQL Data into Excel is a very useful method to keep the data list in a relevant area for offline usage. Exporting data method performs your web application as most user-friendly and improves the user to manage list data in offline.</p>
                    </div>
                    <div class="li-post-group">
                        <h4 class="li-post-title">GENERATE A PDF USING TCPDF IN LARAVEL</h4>
                        <p class="li-post-desc">In this post, we are going to know about generating PDF documents using TCPDF Package in Laravel. Most of the application needs to generate pdf documents for many reasons. It may use to produce E-Document for end user knowledge or reference. It helps to prepare Invoice bills, profile information, reports download etc.</p>
                    </div>
                    <div class="li-post-group">
                        <h4 class="li-post-title">SUGGESTION FIELD USING JQUERY, PHP AND MYSQL</h4>
                        <p class="li-post-desc">Suggestion field using jQuery is very useful for a web application. In this post, you will learn how to perform Google-like search textbox in PHP. Using jQuery UI we can efficiently show relevant suggestion from the database under a textbox.</p>
                    </div>
                    <div class="li-post-group">
                        <h4 class="li-post-title">IMAGE TO GRAYSCALE IMAGE CONVERSION IN LARAVEL</h4>
                        <p class="li-post-desc">In this post, I am going to share with you how to make a grayscale image from the original image in laravel. Sometimes, we may require making a grayscale image when user uploads image. The grayscale image looks better if you have a good layout website.</p>
                    </div>
                    <div class="li-post-group">
                        <h4 class="li-post-title">DELETE OPERATION IN CRUD USING PDO – PART 4</h4>
                        <p class="li-post-desc">This post explains how to build a CRUD (Create, Read, Update, Delete) application in PHP & MySQL using PHP Data Objects (PDO). PDO is a PHP extension that implements an interface for accessing databases in PHP. PDO is compact and strong. </p>
                    </div>
                </div>

            </div>
        </div>
    </body>
</html>

 

Step 3: Check the speed 

Run your Laravel application and check home page speed loading time before install  “laravel-page-speed” package.

Improve Your Website Speed and Performance in Laravel 5.8

 

To check speed use ctrl+shift+i than the select network.

You can see in image localhost loading time is 763 ms. now install package. 

Improve Your Website Speed and Performance in Laravel 5.8

You can also see our HTML not minified.

 

Step 4: Install  “laravel-page-speed” Package

You can install the package via the composer using this command.

 composer require renatomarinho/laravel-page-speed

Step 5: Update provider details

Now successfully install update provider details.

'providers' => [
	....
	....
	RenatoMarinho\LaravelPageSpeed\ServiceProvider::class,
],

Step 6: Publish the package

Now run the flowing command to publish the package.


php artisan vendor:publish --provider="RenatoMarinho\LaravelPageSpeed\ServiceProvider"

Step 5: Adding middleware for web access

After Successfully publishing the package we need to add middleware details in Kernel.php file.


protected $middlewareGroups = [
    'web' => [
        ........
        ........
    \RenatoMarinho\LaravelPageSpeed\Middleware\InlineCss::class,
	\RenatoMarinho\LaravelPageSpeed\Middleware\ElideAttributes::class,
	\RenatoMarinho\LaravelPageSpeed\Middleware\InsertDNSPrefetch::class,
	\RenatoMarinho\LaravelPageSpeed\Middleware\RemoveComments::class,
	\RenatoMarinho\LaravelPageSpeed\Middleware\TrimUrls::class,
	\RenatoMarinho\LaravelPageSpeed\Middleware\RemoveQuotes::class,
	\RenatoMarinho\LaravelPageSpeed\Middleware\CollapseWhitespace::class,
   ]
]

Now we done all steps now times to check it's work or not run the home page and check speed.

Improve Your Website Speed and Performance in Laravel 5.8

 

Bingo ! you can see our page loading time reduce 50% now it takes only 379 ms. and our HTML page is minified you can check by Ctrl + u.

Improve Your Website Speed and Performance in Laravel 5.8

 

So here we complated this post on how to Improve Your Website Speed and Performance in Laravel 5.8..

Good luck.

 


About Author
  • user profile
    Brijpal Sharma

    brijpalsharma99@gmail.com, January 29th, 2018

    Hello, My Name is Brijpal Sharma. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of Codermen. I started this blog to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers...


0 Comment


You must be logged in to post a comment.