How to Make Website Faster With PageSpeed Insight?

Waiting is one of the most irritating things in the world. I think you would agree that there is nothing worse than standing in a line waiting for your turn to buy something, get the information you need or fill in some forms.


How to Make Website Faster With PageSpeed Insight?
The things are pretty much the same with the Internet. It is also quite irritating waiting for the site to download. As a rule, if the loading speed of the site is too low, visitors just leave it and keep on searching for the required information on other resources. This feature is vital for large websites and online stores, as people doesn’t like to wait, especially when they are about to spend their money.


Google pays much attention to this part. It is, actually, a bit obsessed with the loading speed of the page. Check the article here. There is no wonder that it encourages fast sites that have  a clean code. On this basis digital marketers started using the speed boost as a part of their SEO strategy. However, slow loading pages not only reduce traffic flow but also affect indexation rates that is a key to success for large sites and online stores. For this reason, we are going to take a look at how to make website faster with PageSpeed Insight.

pagespeedinsightslogo
It is also critical to optimize the site and content specially for mobile devices. You should pay much attention to this part as more and more people use tablets or smartphones for browsing on the Internet and having a mobile optimized site is a must have feature.

So, why do some pages load slower than the others and how to optimize website speed? Well, there are many factors that influence on the speed of the site and you can’t point out one particular reason that causes troubles. As a rule, low speed is the result of huge lines of code, not optimized images, internal adjustments of the site, etc. It is enough to fix some of these bugs to improve the performance of the site and make it work more effectively.

As you can see, loading speed is the key to success and it is vital to optimize all pages of the site. Unfortunately, it is almost impossible to do that manually, but there is a variety of  tools that will help you get  the job done. PageSpeed Insights is one of the best and the most powerful apps designed to help developers analyze their pages and make them load  faster. The program measures the performance of the site for both desktops and mobile devices, so you don’t need to check the codes separately. Just enter the URL address in the field and hit “Analyze” button.

PageSpeed indicates the performance of the theme with scores. If the score is above 85, it means that the page performs well. If it is below 85, it is recommended to fix the bugs to make it meet the minimum requirements. Besides that, the program will give you recommendations on what changes are required to make your site work to its full potential.

Each suggestion is indicated with a particular sign: green – means that no bugs are detected, yellow – it is better to fix the troubles, red – some serious troubles that affect the performance are detected. In such a way, you get a full picture of how your site looks from the inside.

pagespeed-one

As it was mentioned above, loading speed is vital for eCommerce sites like online stores and shops. If you run such kind of business, you may also find this tool useful. But still there is a problem. If some troubles are detected, do you have enough time to fix them manually. It is OK if there are not many pages, but how to make a web page load faster if the assortment of you store is pretty wide. It will take you a lot of time to optimize the site. In this case, you should consider purchasing one of the given OpenCart templates that were analyzed and showed pretty high results.

Reference: http://blog.templatemonster.com/2015/06/18/how-to-make-website-faster-with-pagespeed-insight/?utm_campaign=TM+Newsletter+maklaud+2015-06-18&utm_medium=email&utm_source=newsletter

Libraries.io monitors 834,365 open source libraries across 29 different package managers.

You can discover new libraries to use in your software projects as well as be notified of new releases to keep your applications secure and up to date. 

https://libraries.io/

What are all the essential topics in PHP for learning?

The below topics we need to cover while learning PHP.
  1. PHP Basics
  2. Strings and String Functions
  3. Basic Arithmetic
  4. Conditions and Loops
  5. Arrays and Array Functions
  6. Processing Form Submissions
  7. Beginning Security, Validation, and Escaping
  8. Cookies, Sessions, and Includes
  9. User Defined Functions
  10. Variable Scope
  11. Beginning Object-Oriented Programming (OOP)
  12. Connecting to and Using MySQL Databases

How to install and configure PHP on IIS 8 in Windows 8

The below three steps we need to follow up for php installation on windoes 8 operating system.
  1. IIS 8 installation.
  2. Microsoft Web Platform Installer instalation.
  3. PHP installation and configuration with Microsoft Web Platform Installer.

A. IIS 8 Installation

These are steps to activate IIS 8 in Windows 8 :
  1. Run Turn Windows features on or off with choose Settings form charms bar, then choose Control Panel.
  2. In Control Panel window, choose Programs.
  3. In Programs and Features, choose Turn Windows features on or off.

    2831030

  4. Check Internet Information Service and click OK button.

    2819101
After the installation process is complete, we can check whether IIS 8 is installed correctly by running Internet Explorer. In the address bar, type http://localhost. If successful, we see web page like this picture below.

2819102


B. Microsoft Web Platform Installer Installation
Microsoft Web Platform Installer is a simple, free tool that automates the installation of Microsoft's entire Web Platform including PHP. We can download it form this url http://www.microsoft.com/web/downloads/platform.aspx. The name of installer is wpilauncher.exe.

Run wpilauncher.exe and we will see installation status like this picture below.

2819103


After installation is completed, we can see Web Platform Installer 4.0 window like this picture below.

2819104


C. PHP Installation and Configuration
These are step to install and configure PHP with Web Platform Installer :
  1. In Web Platform Installer window, choose Products tab and search PHP version that we will install.
  2. Click Add button as we can see in picture below.

    2819105

  3. After click Add button, we can see there are 2 items that will be installed. By click Items to be installed link, we can see list of those items.

    2819106

  4. Click Install button.

    2819107

  5. Click I Accept button and it will be downloaded item and install them.

    2819108

  6. After the installation process is complete, click Finish button.

 To check whether the installation and configuration are success, we can test it by follow these steps :
  1. Create info.php file and type this code below as content.
    2819109
  2. Copy info.php file to IIS’s root folder in C:\inetpub\wwwroot.
  3. Run Internet Explorer, and type http://localhost/infor.php in address bar.
  4. We will see web page like picture below if all installation and configuration are successed.

    2819110

What is IIS (Internet Information Services)?

Internet Information Services (IIS) for Windows® Server is a flexible, secure and manageable Web server for hosting anything on the Web. From media streaming to web applications, IIS's scalable and open architecture is ready to handle the most demanding tasks.

Steps to integrate Yamm mega menu into your own bootstrap website

I am doing website design using bootstrap and a need to use mega menu instead of using list menu items in the navigation bar.

For this purpose I found Yamm mega menu will be useful for my site and followed the below steps for the integration.

1. Download Yamm from http://geedmo.github.io/yamm/

After you download extract the zip file (yamm3-master). The following directories will be exists in the extracted yamm3-master directory.
















2. Copy yamm folder and paste it in your website css folder.

 3. Include yamm.css in header.html/php file like below

     <link href="css/yamm/yamm.css" rel="stylesheet" type="text/css">

4. Go to yamm directory which you downloaded and open the demo.css from demo directory.

 5. Find & copy the below css class and paste it in your website css (yoursite.css) file which is used for your UI Design.

 /* menu styes */
.list-unstyled,
.list-unstyled ul { min-width: 120px }

@media ( min-width: 767px ) {
  .panel-group { width: 400px; }
  .thumbnail { margin: 0; }

}

6. Find the navbar css style in header.html/php file and include the yamm class in div tag.

     <!-- Navigation -->
    <nav class="navbar yamm navbar-inverse navbar-fixed-top" role="navigation">

7. Then finally add the mega menu content in menu items like below.

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <b class="caret"></b></a>
       
           <ul class="dropdown-menu">
       <li>
    <div class="yamm-content">
                    <div class="row">
                      <ul class="col-sm-4 list-unstyled">
                        <li>
                          <p><strong>Web Designing</strong></p>
                        </li>
                        <li>List Item</li>
                        <li>List Item</li>
                        <li>List Item</li>
                        <li>List Item</li>
                        <li>List Item</li>
                        <li>List Item</li>
                      </ul>
                      <ul class="col-sm-4 list-unstyled">
                        <li>
                          <p><strong>Web Development</strong></p>
                        </li>
                        <li><a href="#"> Link Item </a></li>
                        <li><a href="#"> Link Item </a></li>
                        <li><a href="#"> Link Item </a></li>
                        <li><a href="#"> Link Item </a></li>
                        <li><a href="#"> Link Item </a></li>
                        <li><a href="#"> Link Item </a></li>
                      </ul>
                      <ul class="col-sm-4 list-unstyled">
                        <li>
                          <p><strong>Ecommerce & CMS Solutions</strong></p>
                        </li>
                        <li>List Item</li>
                        <li>List Item</li>
                        <li>List Item</li>
                        <li>List Item</li>
                        <li>List Item</li>
                        <li>List Item</li>
                      </ul>
                </div></div>
</li>
        </ul>
    </li><!-- Services li element-->
                    

I hope this will be helpful for you also to integrate with your website designing.

Website is broken in IE due to "SEC7113: CSS was ignored due to mime type mismatch"

I am doing web designing using bootstrap. But Internet Explorer 8-10+ refuses to load the CSS files due to "CSS was ignored due to mime type mismatch"
  1. On your computer search for "regedit.exe" (go to the start menu and click on the search button on the top-right corner of the screen).
  2. Once regedit opens up, on the left column click on "HKEY_CLASSES_ROOT" and then on ".css"
  3. On the right column double-click on "Content Type". This will open up a dialog box with value as application/x-css.
  4. Change this "value data" to "text/css".
  6. Click "Ok" and that's it.

List of Arrays Functions and Examples in PHP

1. The array() function is used to create an array
2. The array_change_key_case() function changes all keys in an array to lowercase or uppercase.
3. The array_chunk() function splits an array into chunks of new arrays.
4. The array_combine() function creates an array by using the elements from one “keys” array and one “values” array.
5. The array_count_values() function counts all the values of an array.
6. The array_diff() function compares the values of two (or more) arrays, and returns the differences.
7. The array_fill() function fills an array with values.
8. The array_merge() function merges one or more arrays into one array.
9. The array_shift() function removes the first element from an array, and returns the value of the removed element.
10. The array_pop() function deletes the last element of an array.

<?php

$cars = array("Volvo", "BMW", "Toyota");
echo "<br>:: array() function ::<br>";
echo "I like " . $cars[0] . ", " . $cars[1] . " and " . $cars[2] . ".";

echo "<br>-----------------------------------------";

$cars = array("Volvo", "BMW", "Toyota", "Honda", "Mercedes", "Opel");

echo "<br><br>:: array_chunk() function :: </br>";

print_r(array_chunk($cars, 2));

echo "<br>-----------------------------------------";


$fname = array("Peter", "Ben", "Joe");

$age = array("35", "37", "43");

echo "<br><br>:: array_combine() function :: </br>";

$c = array_combine($fname, $age);

print_r($c);

echo "<br>-----------------------------------------";

$a = array("A", "Cat", "Dog", "A", "Dog");
echo "<br><br>:: array_count_values() function :: </br>";
print_r(array_count_values($a));

echo "<br>-----------------------------------------";

$a1 = array("a"=>"red", "b"=>"green", "c"=>"blue", "d"=>"yellow");

$a2 = array("e"=>"red", "f"=>"green", "g"=>"blue");

$result = array_diff($a1, $a2);
echo "<br><br>:: array_diff() function :: </br>";
print_r($result);

echo "<br>-----------------------------------------";

$a1 = array_fill(3, 4, "blue");

$b1 = array_fill(0, 1, "red");
echo "<br><br>:: array_fill() function :: </br>";

print_r($a1);
echo "<br>";
print_r($b1);

echo "<br>-----------------------------------------";


$a1 = array("red", "green");

$a2 = array("blue", "yellow");

echo "<br><br>:: array_merge() function :: </br>";

print_r(array_merge($a1, $a2));

echo "<br>-----------------------------------------";


$a = array("a"=>"red", "b"=>"green", "c"=>"blue");

echo "<br><br>:: array_shift() function :: </br>";

echo array_shift($a);
echo "<br>";

print_r ($a);

echo "<br>-----------------------------------------";

$a = array("red", "green", "blue");

array_pop($a);

echo "<br><br>:: array_pop() function :: </br>";

print_r($a);

echo "<br>-----------------------------------------";

?>

OUTPUT:

:: array() function ::
I like Volvo, BMW and Toyota.
-----------------------------------------

:: array_chunk() function ::
Array ( [0] => Array ( [0] => Volvo [1] => BMW ) [1] => Array ( [0] => Toyota [1] => Honda ) [2] => Array ( [0] => Mercedes [1] => Opel ) )
-----------------------------------------

:: array_combine() function ::
Array ( [Peter] => 35 [Ben] => 37 [Joe] => 43 )
-----------------------------------------

:: array_count_values() function ::
Array ( [A] => 2 [Cat] => 1 [Dog] => 2 )
-----------------------------------------

:: array_diff() function ::
Array ( [d] => yellow )
-----------------------------------------

:: array_fill() function ::
Array ( [3] => blue [4] => blue [5] => blue [6] => blue )
Array ( [0] => red )
-----------------------------------------

:: array_merge() function ::
Array ( [0] => red [1] => green [2] => blue [3] => yellow )
-----------------------------------------

:: array_shift() function ::
red
Array ( [b] => green [c] => blue )
-----------------------------------------

:: array_pop() function ::
Array ( [0] => red [1] => green )
-----------------------------------------

What are all the OOP Features in PHP?

  • Object cloning
  • Inheritance
  • Interfaces
  • Abstract classes
  • Namespaces

15 Essential CSS Questions:

1. Which of the following is NOT a valid border-style property value?
  • dotted
  • inset
  • glazed
  • groove
  • solid
 Ans:  glazed

Visual guide of border-style property values - w3.org 


2. Which of the following is NOT a valid CSS length unit?
  • cm
  • dm
  • em
  • mm

Ans: dm
cm and mm are absolute length units. em is a font-relative length.

3. What is the CSS selector which allows you to target every element in a web page?

Ans: The universal selector (*).

4. Which CSS property allows you to hide an element but still maintain the space it occupies in the web page?

 Ans: visibility or opacity

There are several ways to hide an HTML element with CSS.
Setting the visibility property of the element to hidden will hide the element. The element will still occupy space equal to its geometric size in the web page. For example, if the hidden element’s dimensions are 100x100px, you will see an empty 100x100px space in the area where the element is located. Hiding an element can also be accomplished by assigning opacity: 0 to an element.
Hiding an element without maintaining the space it occupies in the web page can be done by setting the element’s display property to none. Setting display to none renders the element as though it doesn’t exist.

 5. There are 16 basic color keywords in CSS. Which of the following are NOT basic color keywords?
  • olive
  • fuchsia
  • cyan
  • aqua
  • maroon
 Ans: cyan
cyan is a valid color keyword. But it’s not one of the basic color keywords.

6. The font-style CSS property has four different valid values. Three of these values are inherit, normal, and italic. What is one other valid value?

Ans: oblique

7. Which of the following two selectors has a higher CSS specificity?

Selector 1:

#object h2::first-letter
Selector 2:
body .item div h2::first-letter:hover
Ans: Selector 1: #object h2:first-letter

The specificity value of Selector 1 is 102. The specificity value of Selector 2 is 24.


 8. What is the ideal order of the following pseudo-class selectors in a stylesheet?
  • :active
  • :hover
  • :link
  • :visited
 Ans:
  1. :link
  2. :visited
  3. :hover
  4. :active
9. Which of the following CSS properties DOES NOT influence the box model?
  • content
  • padding
  • margin
  • outline
  • border
 Ans: outline

The outline created with the outline properties is drawn “over” a box, i.e., the outline is always on top, and does not influence the position or size of the box, or of any other boxes. Therefore, displaying or suppressing outlines does not cause reflow or overflow.

10. When using media queries, which of the following is NOT a valid media type?
  • tv
  • all
  • voice
  • print
  • braille
  • tty
  • embossed
 Ans: voice

voice is not a valid media type. Though there is a speech media type. 

 11. There are five generic font family values that can be assigned to the font-family property. Three of them are listed below. What are the other two generic font family values?
  • serif
  • sans-serif
  • monospace
  • ?
  • ?
 Ans:
  • cursive
  • fantasy

 12. What is the color keyword that will always be equal to the calculated color property value of the selected element/elements?

Ans:   currentColor

Below is an example where the background-color and the border color will be equal to the color property value of .box elements:
.box {
  color: green;
  background-color: currentColor;
  border: 1px dashed currentColor;
}
The benefit of using the currentColor keyword is that we only need to change the color value in one place. We can just change the value of the color property, and the change will cascade to the other properties. This keyword works much the same way as CSS variables.

13. Which of the following is NOT a valid CSS unit?
  • ch
  • turn
  • px
  • ems
  • dpcm
  • s
  • hz
  • rem
 Ans: ems
  • ch and rem are font-relative length units.
  • turn is an angle unit.
  • px is an absolute length unit.
  • dpcm is a resolution unit.
  • s is a time unit.
  • hz is a frequency unit.
14. Which of the following color keywords has NOT yet been proposed in a W3C specification?
  • blanchedalmond
  • dodgerblue
  • peachpuff
  • orchidblack
  • navajowhite
  • tomato
Ans:  orchidblack

15. What is the CSS at-rule that can allow you to define the character encoding of a stylesheet?

Ans:   @charset

UTF-8 should always be used as your CSS file’s character encoding. If this is the case, then you don’t need to declare a @charset rule.

How to run the multiple jquery methods within a single statement

In JQuery, this activity is called as chaining which means you can chain together actions/methods. Below snippet is the example of Jquery Chaining.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#p1").css("color", "red").slideUp(2000).slideDown(2000);
    });
});
</script>

Use of callback function in JQuery

JavaScript statements are executed line by line. However, with effects, the next line of code can be run even though the effect is not finished. This will cause to trigger the errors.

To prevent this, you can create a callback function.

A callback function is executed after the current effect is finished.


With Callback function:

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide("slow", function(){
            alert("The paragraph is now hidden");
        });
    });
});
</script>

Without Callback function:

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide(1000);
        alert("The paragraph is now hidden");
    });
});
</script>

The difference between these two function is without callback function will throw the alert box before the hide event is finished.

Examples of JQuery Selectors

jQuery selectors are used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more.

All selectors in jQuery start with the dollar sign and parentheses: $().

The jQuery element selector selects elements based on the element name.

You can select all <p> elements on a page like this:
$("p") 
The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.
An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.

To find an element with a specific id, write a hash character, followed by the id of the HTML element:
$("#test")

Syntax Description
$("*") Selects all elements
$(this) Selects the current HTML element
$("p.intro") Selects all <p> elements with class="intro"
$("p:first") Selects the first <p> element
$("ul li:first") Selects the first <li> element of the first <ul>
$("ul li:first-child") Selects the first <li> element of every <ul>
$("[href]") Selects all elements with an href attribute
$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank"
$("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank"
$(":button") Selects all <button> elements and <input> elements of type="button"
$("tr:even") Selects all even <tr> elements
$("tr:odd") Selects all odd <tr> elements

Why we are using $(document).ready(function() in jquery?

This is used to restrict any jQuery code from running before the document is finished loading or document is ready.

It is good practice to wait for the document to be fully loaded and ready before working with it.

This also allows you to have your JavaScript code before the body of your document, in the head section.

Here are some examples of actions that can fail if methods are run before the document is fully loaded:
  • Trying to hide an element that is not created yet
  • Trying to get the size of an image that is not loaded yet

Alternate Syntax instead of using document ready event

 $(function(){

   // jQuery methods go here...

});

Why we do not need to have text/javascript inside the script tag?

Our actual question is why we do not need to have type="text/javascript" inside the <script> tag in HTML5?

Ans: This is not required in HTML5 because javascript is the default scripting language in HTML5 and in all modern browsers!
Subscribe to: Posts (Atom)

Blog Archive

Total Pageviews

Popular Posts

Copyright © PHP Rewind