Speeding Up Joomla Page Load Times

I have been getting helpful emails from Dart Creations about speeding up page load times with my Joomla sites.

Google has a page for testing page speeds and gives recommendations.

https://developers.google.com/speed/pagespeed/insights/

Lesson 1: Turn on Joomla Cache  – page caching

Lesson 2: Enable browser caching – browser caching

Lesson 3:  Enable GZip Compression – GZip compression

Lesson 4: Reduce / Compress Joomla images – compress images

Lesson 5:  Disable or remove unused plug-ins and Modules  – disable plugins

Lesson 6:  Try using JCH Optimize plugin –  JCH Optimize

Lesson 7:  Content Delivery Network – CDN
Your website can be given the ultimate speed boost by reducing the distance your content has to travel to reach its visitor. A Content Delivery Network (or CDN) delivers the heavy content of your site from a location which is very close to them. This is a trick major websites like Facebook, YouTube, CNN and NetFlix use to make sure their sites are fast. Images, CSS files, JS files, video and other content will have to travel much less. It does make your website lightning fast.

Lesson 8:  Put your site on a fast hosting platform – Hosting

Do yourself and (most of all) your website’s visitors a favour. Upgrade to a better hosting server. Get a faster website today. If you’re on a cheap plan – upgrade it.

Check out InMotion Hosting now. Or if you really love your website, go for a Virtual Private Server. They offer free transfers, so you don’t have to worry about down time or moving your site. It’s just plug and play.

Lesson 9: Use system fonts – This method was given to me by Bmorecreative, inc. They suggested the following article:

https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/

Lesson 10: Optimizing images – Optimize Images

I am also using a Joomart Template that uses the T3 framework, and here is a link that shows how to compress the CSS and JS files.

https://www.joomlart.com/video-tutorials/t3-framework/optimize-css-and-js

Theme Expert – has sent out a article on how they perfer to speed things up. I like the details the put into the article. Speeding up page load times without an additional plug-in.
https://www.themexpert.com/blog/the-beginners-guide-to-joomla-caching

 

I hope this helps someone else out there…

 

Email cloaking in Joomla 3

I was getting the error “this-email-address-is-being-protected-from-spambots-you-need-javascript-enabled-to-view-it”.

I disable “email cloaking” in the plugins and that fixed the issue.

In my research I found the article to disable on “In-Motions” website.

https://www.dart-creations.com/joomla/joomla-tips-and-tricks/95-this-email-address-is-being-protected-from-spambots-you-need-javascript-enabled-to-view-it.html

In the comments section a user suggested No-Number or Regular Labs version. I love their other products so I thought I would list it

https://www.regularlabs.com/extensions/emailprotector

I hope this helps some one else out there…

 

Chronoforms 5 styled with Font Awesome

Here is the end result:

chronoform_font_awesome

Font Awesome gets linked in the header:

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

Here is the Chronoforms Code:

<div class=”form-group gcore-form-row” id=”form-row-custom”><div class=”gcore-input gcore-display-table” id=”fin-custom”><p class=”disclaimer_text_home”>Notice: This website presents general information about  and is not intended as legal advice, nor should you consider it as advice. You should not act upon this information without seeking professional counsel. Please keep in mind that merely contacting  by email or otherwise will not establish an attorney-client relationship.  cannot represent you until the firm knows there would not be a conflict of interest and the firm determines that it is otherwise able to accept the engagement. Accordingly, please do not send  any information or documents until a formal attorney-client relationship has been established through an interview with an attorney and you get authorization in the form of an engagement letter from  Any information or documents sent prior to your receipt of an engagement letter cannot be treated as confidences, secrets, or protected information of any nature.</p></div></div>
<div class=”form-group gcore-form-row” id=”form-row-multi-11″><div class=”gcore-subinput-container-wide” id=”fitem-namehome”><div class=”gcore-input pull-left gcore-sub-input gcore-display-table” id=”fin-namehome”><input name=”namehome” id=”namehome” value=”” placeholder=”name…” class=”validate[&#039;required&#039;,&#039;alpha&#039;] form-control A” title=”” style=”border:none;color:#FFF;” data-inputmask=”” data-load-state=”” data-tooltip=”” type=”text” /><i class=”icon-append fa fa-user”></i></div></div>
<div class=”gcore-subinput-container-wide” id=”fitem-emailhome”><div class=”gcore-input pull-left gcore-sub-input gcore-display-table” id=”fin-emailhome”><input name=”emailhome” id=”emailhome” value=”” placeholder=”email…” class=”validate[&#039;required&#039;,&#039;email&#039;] form-control A” title=”” style=”border:none;color:#FFF;” data-inputmask=”” data-load-state=”” data-tooltip=”” type=”text” /><i class=”icon-append fa fa-envelope”></i></div></div>
<div class=”gcore-subinput-container-wide” id=”fitem-subjecthome”><div class=”gcore-input pull-left gcore-sub-input gcore-display-table” id=”fin-subjecthome”><input name=”subjecthome” id=”subjecthome” value=”” placeholder=”subject…” class=”validate[&#039;required&#039;] form-control A” title=”” style=”border:none;color:#FFF;” data-inputmask=”” data-load-state=”” data-tooltip=”” type=”text” /><i class=”icon-append fa fa-tag”></i></div></div></div><div class=”form-group gcore-form-row” id=”form-row-messagehome”><div class=”gcore-input gcore-display-table” id=”fin-messagehome”><textarea name=”messagehome” id=”messagehome” placeholder=”message…” rows=”3″ cols=”40″ class=”validate[&#039;required&#039;] form-control A” title=”” style=”border:none;width: 93% !important;color:#FFF;” data-wysiwyg=”0″ data-load-state=”” data-tooltip=””></textarea><i class=”icon-append textarea fa fa-comment”></i></div></div><div class=”form-group gcore-form-row” id=”form-row-captcha”><div class=”gcore-subinput-container-wide” id=”fitem”>
<div class=”gcore-input pull-left gcore-sub-input gcore-display-table” id=”fin-captchahome”><input placeholder=”enter code…” class=”form-control A” title=”” style=”” type=”text” name=”captcha” id=”captcha” /></div></div>
<div class=”gcore-subinput-container-wide” id=”fitem1″><div class=”gcore-input pull-left gcore-sub-input gcore-display-table” id=”fin-captchahome2″>{captcha_img}</div></div></div><div class=”form-group gcore-form-row” id=”form-row-button4″><div class=”gcore-input gcore-display-table” id=”fin-button4″><input name=”button4″ id=”button4″ type=”submit” value=”Send Message” class=”btn btn-default form-control A” style=”” data-load-state=”” /></div></div>

 

Here is the added CSS:

/*  Home Page Consultation Form Styles */

#chronoform-free_consultation {
text-align: center;
padding-top: 30px;
}

#form-row-multi-11 {
margin: 0 0 15px 0;
width: 95%;

}

#namehome {
border: none;
float:left;
width: 32%;
background: none;
}

#fin-namehome {

padding: 3px;
margin-right: 20px;
background: #4b4b4b;
border-radius: 4px;
width: 32%;

}

#fin-namehome i {
border-left: #727272 thin solid;
padding: 10px;
margin-left: 10px;
float: right;

}

#ftd-namehome .gcore-line-td {

float:left;

}

#emailhome {
border: none;
float:left;
background: none;
color: #FFF;
}

#fin-emailhome {
border: none;
padding: 3px;
margin-right: 20px;
background: #4b4b4b;
border-radius: 4px;
width: 32%;
}

#fin-emailhome i {
border-left: #727272 thin solid;
padding: 10px;
margin-left: 10px;
float: right;
}

#subjecthome {
border: none;
float:left;
background: none;

}

#fin-subjecthome {
border: none;
padding: 3px;
width: 32%;
background: #4b4b4b;
border-radius: 4px;
}

#fin-subjecthome i {
border-left: #727272 thin solid;
padding: 10px;
margin-left: 10px;
float: right;
}

#messagehome {
border: none;
float:left;
width: 93%;
height: 95px;
background: none;
}

#fin-messagehome {
border: none;
padding: 3px;
width: 95%;
background: #4b4b4b;
border-radius: 4px;
}

#fin-messagehome i {
border-left: #727272 thin solid;
padding: 10px;
margin-left: 10px;
float: right;
}

#captchahome {
border: none;
float:left;
color: #FFF;
background: none;
}

#form-row-captcha {
display: inline-block;
width: 400px;
margin: 0 auto 15px;
}

#fin-captchahome {
border: none;
padding: 3px;
margin-right: 20px;
background: #4b4b4b;
border-radius: 4px;
}

#fin-button4 {
margin: auto;
}

#captcha {
background: none;
border: none;
color: #FFF;
}

#button4 {
background:#2d4f68;
color: #FFF;
border:none;
padding: 10px 80px;
font-size: 18px;
margin-top: 30px;
height: 50px;
}

#button4:hover {
background: #999;

}

#chronoform-free_consultation #fin-custom {
width: 75%;
color: #FFF;
margin: auto;
}

FontAwesome for web icons

I recently purchased a template for joomla site that uses fontAwesome. It was wonderful. Below is link to see how it works and to downloaded it.

https://fortawesome.github.io/Font-Awesome/icons/

I found that when I go to edit a custom module with Font Awesome <i> tags I had two issues:

  1. JCE ( Joomla Content Editor ) – Would change the <i> to <em> when I saved the module. Below is an article on how to fix that.
    https://www.joomlacontenteditor.net/support/forum/jce-and-font-awesome
  2. TinyMCE Editor – I couldn’t see any source code.I have found if I switch the default Joomla editor to “codemirror” I can see everything in the source code in order to edit it.

    In the administrative area go to Global Configuration >> Default Editor >> Editor – CodeMirror.

    I hope this helps someone else out there…

 

Firefox show window / element width – Firebug and the Layout tab

In Chrome’s developer tools is was easy to see the width of a browser window. With developer tools open, grab to lower right corner and shrink the window. In the upper-right the size of the window shows up. That makes working with Media Queries so much easier.

I use Firefox so often and wanted the same feature. I found what I needed in firebug and this article helped me.

http://getfirebug.com/layout

In the layout table as you inspect an element it’s size will show in the Layout tab.

I hope this helps someone else out there…