[BUSINESS] Page speed tips

[tacnet]

A few people have been asking about this recently so I thought i would start a thread

Im NOT the expert and this is by no means an exhaustive list, but here's a few tips ive picked up over the years that you might find useful. Feel free to add

• Pre-Connect to other domains If your pulling a lot of images/resources from another domain then use the rel="peconnect" link in your header to tell the browser to establish a connection with that domain as soon as the page is loaded and then use that connection to fetch your images. Rather than opening up a new http port for each image.
  

  Code: Select all

  <link rel="preconnect" href="https://otherdomain.com">

• DNS-Prefetch to other domains For less critical resources (or for browsers that dont support preconnect), you can use rel="dns-prefetch" which resolves the domain name to an IP address ready to open a port when needed. Yes you can pair both preconnect and pre-fetch so if preconnect isnt supported, it will pre-fetch the domain instead.
  

  Code: Select all

  <link rel="preconnect" href="https://otherdomain.com">
  <link rel="dns-prefetch" href="https://otherdomain.com">
  

• CSS at the top, Javascript at the bottom The browser needs to process your CSS file first in order to display the page so link to that in your <head> tag. Most of the time, javascript is NOT needed to display the page so you can link to that at the bottom of the page. You can also use the defer keyword to defer loading until the page is finished
  

  Code: Select all

  <script  defer src="myjavascript.js" type="text/javascript"></script>

• Specify image dimensions Wherever possible, you should specify your image dimensions, either via CSS or in the html itself. Otherwise the browser has to load the image before it can work out how much space to allow for it. This leads to the page jumping about as it loads (called Cumulative Shift) and really degrades the user experience and slows down the page

• Lazy Load EVERYTHING Wherever possible, you should lazyload your images/iframes. This simply means that the image isnt loaded until the user scrolls it into view which massively speeds up page loading. There's lots of scripts that do this. A good simple one to use is https://github.com/aFarkas/lazysizes

• DONT Ajax load the top of your page A lot of sites do this, often its a banner rotator or similar script that loads content into view at the top of the page (ie above the fold). There's a big problem with this, the page has to fully load first AND process all the javascript before it can make yet another call to dislay the banner/content via ajax. All the while, the user is left staring at a big blank space on the screen. Keep ajax for out of view stuff

• Mobile First CSS Generally speaking, mobiles run on a slower connection than desktops so your css should always layout the mobile screen first and then only load the desktop css if its needed. You can use css media queires to do this

• Minimise your files Use an online minifier like https://www.minifier.org/ to minimise your code

• Test your pages You can use google's Pagespeed Insights to analyze your page. Another handy tool is GTMetrix

In the adult industry, page speed is critical. Its the most competitive industry on the planet and often you only have a split second to engage the user before he switches to another site. A slow site will massively drive up your bounce rate

Hope somebody finds this useful

[TheButcher]

Just to add a couple of tools I use.


https://pagespeed.web.dev/
https://geopeeker.com/

[razor]

Just asking is it true antivirus softwares block javascript and or pop a warning?

[tacnet]

Just asking is it true antivirus softwares block javascript and or pop a warning?

No. Almost all sites use javascript these days. The internet wouldn't work without it

[AlexO]

It is all about the speed, no one wants a slow loading site, I close the page if it starts taking time. I am sure most people are like me.

[tacnet]

It is all about the speed, no one wants a slow loading site, I close the page if it starts taking time. I am sure most people are like me.

Thats exactly what users do.

As a rough guideline, you should aim to have the viewport filled and displayed (called the Largest Contentful Paint or LCP) within 2.5 seconds or less. Anything more than that and your bounce rate will start going up sharply

Google's Page Speed Index (or any of the other page speed tools mentioned above) will tell you what your LCP time is

[jag]

Google's Page Speed Index (or any of the other page speed tools mentioned above) will tell you what your LCP time is

Trying to remember what this was called in the past,I am pretty certain it had another name.

[Gefreksiy]

A few people have been asking about this recently so I thought i would start a thread

Im NOT the expert and this is by no means an exhaustive list, but here's a few tips ive picked up over the years that you might find useful. Feel free to add

• Pre-Connect to other domains If your pulling a lot of images/resources from another domain then use the rel="peconnect" link in your header to tell the browser to establish a connection with that domain as soon as the page is loaded and then use that connection to fetch your images. Rather than opening up a new http port for each image.
  

  Code: Select all

  <link rel="preconnect" href="https://otherdomain.com">

• DNS-Prefetch to other domains For less critical resources (or for browsers that dont support preconnect), you can use rel="dns-prefetch" which resolves the domain name to an IP address ready to open a port when needed. Yes you can pair both preconnect and pre-fetch so if preconnect isnt supported, it will pre-fetch the domain instead.
  

  Code: Select all

  <link rel="preconnect" href="https://otherdomain.com">
  <link rel="dns-prefetch" href="https://otherdomain.com">
  

• CSS at the top, Javascript at the bottom The browser needs to process your CSS file first in order to display the page so link to that in your <head> tag. Most of the time, javascript is NOT needed to display the page so you can link to that at the bottom of the page. You can also use the defer keyword to defer loading until the page is finished
  

  Code: Select all

  <script  defer src="myjavascript.js" type="text/javascript"></script>

• Specify image dimensions Wherever possible, you should specify your image dimensions, either via CSS or in the html itself. Otherwise the browser has to load the image before it can work out how much space to allow for it. This leads to the page jumping about as it loads (called Cumulative Shift) and really degrades the user experience and slows down the page

• Lazy Load EVERYTHING Wherever possible, you should lazyload your images/iframes. This simply means that the image isnt loaded until the user scrolls it into view which massively speeds up page loading. There's lots of scripts that do this. A good simple one to use is https://github.com/aFarkas/lazysizes

• DONT Ajax load the top of your page A lot of sites do this, often its a banner rotator or similar script that loads content into view at the top of the page (ie above the fold). There's a big problem with this, the page has to fully load first AND process all the javascript before it can make yet another call to dislay the banner/content via ajax. All the while, the user is left staring at a big blank space on the screen. Keep ajax for out of view stuff

• Mobile First CSS Generally speaking, mobiles run on a slower connection than desktops so your css should always layout the mobile screen first and then only load the desktop css if its needed. You can use css media queires to do this

• Minimise your files Use an online minifier like https://www.minifier.org/ to minimise your code

• Test your pages You can use google's Pagespeed Insights to analyze your page. Another handy tool is GTMetrix

In the adult industry, page speed is critical. Its the most competitive industry on the planet and often you only have a split second to engage the user before he switches to another site. A slow site will massively drive up your bounce rate

Hope somebody finds this useful

All this is new to me. Doeswordpress come with any of these built in?

[tacnet]

All this is new to me. Doeswordpress come with any of these built in?

Sorry, I dont use wordpress that much so somebody else would have to answer that one

Its very easy to check though. Simply RIGHT click on your page and select View Source and have a look at your HTML code.

Do all the images have a width and height specified ? Is the CSS at the top and the Javascript at the bottom ? etc etc

Hope that helps

[LuKenGas]

All this is new to me. Doeswordpress come with any of these built in?

Sorry, I dont use wordpress that much so somebody else would have to answer that one

Its very easy to check though. Simply RIGHT click on your page and select View Source and have a look at your HTML code.

Do all the images have a width and height specified ? Is the CSS at the top and the Javascript at the bottom ? etc etc

Hope that helps

I just checked one of my blogs and they sure do not have the width and height specified.

[alsporn]

Github is a nice resources - just saying.

[tacnet]

I just checked one of my blogs and they sure do not have the width and height specified.

This is a common issue. You'll probably find that the width is being set by CSS (RIGHT click the image and select Inspect. In the bottom right corner, you will see the css rules that apply to that image. You'll probably see width: 100% and max-width: whatever pixels)

But by not setting the height, it means that the browser cannot layout the page until it has loaded each and every image. This not only slows the page up, it makes the page jump about as it re-draws itself over and over as each image is loaded (called cumulative shift)

Its not good practise (and Im sure wordpress will have a setting somewhere for it) but it really only comes into play if you have a lot of images on your page

hope thats of some help

@alsporn - Yep github is a great source for scripts etc

[trafficseller]

Speed is a very important don't let any one tell you otherwise. No one likes a slow as molasses page.

[viking]

Speed is a very important don't let any one tell you otherwise. No one likes a slow as molasses page.

word

[badkitty]

Fast cars win races and fast pages get results all there is to it