Saturday, December 07, 2019

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…

 

Looking to use #include in WAMP

I am looking for a way to add Server Side Includes not PHP includes with my WAMP. Another programmer used them extensively and I am now working with his files. I plan to change the files over to PHP and include the header and footer that way, but I am curious about getting them to work with my WAMP the way it is set up out of the box.

I found this article, but I was unsuccessful. I will look into further to see if I can get it to work.

http://www.roseindia.net/tutorial/php/phpbasics/Setting-Up-SSI-On-Wamp.html

 

Centering a div between a div floating left and a div floating right – Responsively

Here is what I ended up using for the CSS

<style>
#contain {
width: 100%;
padding: 0;
margin: 0;
display: table;
}
#left,
#right {
text-decoration: none;
display: table-cell;
width: 310px;
text-align: center;
background: #FF9000;
color: #FFFFFF;
padding: 2% 0;
}
#filler {
display: table-cell;
width: auto;
background: #F00;
text-align: center;
}

@media (max-width: 800px) {

#contain {
display:block;
width: 100%;
}

#left,
#right {

display: block;
width: 100%;
}

#filler {
display: block;
width: 100%;
}

}

</style>

Here is the HTML.

<div id=”contain”>
<div id=”left”>1</div>
<div id=”filler”>m</div>
<div id=”right”>2</div>
</div>

I used the following link to get this result.

http://stackoverflow.com/questions/21782502/how-to-make-a-divs-width-stretch-between-two-divs

I hope this helps someone else out there…

Overriding CSS in Chronoforms 5

I needed to override the standard CSS in Chronoforms. I was using the GCoreUI styling. When the screen size was less than 700px wide the input boxes went below the label, but the label text was still right aligned. I wanted the text to switch to left align.

I quickly found my answer here.

https://www.chronoengine.com/forums/posts/f5/t100824.html

In the “Setup” tab I added “load CSS” after the “Render HTML” in the load area. It worked great. I was even able to use a media query to when using the “Load CSS”

I wanted to use an external CSS file because it is easier to for me to read. I had to use the following path to link the external CSS file.

../../path to the css file.

I hope this helps someone else out there…